ybc 다운로드 - ybc 소스코드 다운로드

ybc

기타 소스코드

v0.4.0

다운로드

ybc

빌드 상태

Bulma CSS 프레임워크를 기반으로 하는 Yew 구성 요소 라이브러리입니다.

YBC는 Bulma CSS 프레임워크의 모든 구조, 스타일 및 기능을 Yew 구성 요소 집합으로 캡슐화합니다. YBC는 또한 Yew Router에 대한 지원과 함께 제공되어 깔끔한 통합을 위해 Yew Router 구성 요소를 래핑하는 Bulma 스타일 구성 요소를 추가합니다.

지침 원칙에 따라 YBC는 많은 유효한 스타일 조합은 물론 모든 단일 Bulma 스타일을 Rust 유형으로 캡슐화하려고 시도하지 않습니다. 이는 너무 복잡하고 아마도 여러 면에서 사용자에게만 국한될 것입니다. 대신 YBC는 구조, 필수 클래스, 기능, 올바른 기본값을 처리하며 모든 구성 요소는 정확한 모양과 느낌을 위해 추가 클래스를 사용하여 사용자 정의할 수 있습니다.

YBC를 활용하는 것은 어떤 모습인가요? 다음은 탐색 표시줄, 유동 컨테이너 및 일부 타일을 렌더링하는 구성 요소의 view 메서드 조각입니다.

 use ybc :: NavbarFixed :: Top ;
use ybc :: TileCtx :: { Ancestor , Child , Parent } ;
use ybc :: TileSize :: Four ;
use yew :: prelude :: * ;

struct App ; // An application component.

impl Component for App {
  /* .. snip .. */
  fn view ( & self ) -> Html {
    html ! {
      <>
      <ybc:: Navbar fixed= Top /* .. your navbar content here .. */ />
      <ybc:: Container fluid= true >
        <ybc:: Tile ctx= Ancestor >
          <ybc:: Tile ctx= Parent vertical= true size= Four >
            <ybc:: Tile ctx= Child classes=classes! ( "box" ) >
              <p> { "Lorem ipsum dolor sit amet ..." } </p>
            </ybc:: Tile >
            /* .. snip .. more tiles here .. */
          </ybc:: Tile >
        </ybc:: Tile >
      </ybc:: Container >
      </>
    }
  }
}

시작하기

ybc 종속성 추가

먼저 이 라이브러리를 Cargo.toml 종속성에 추가하세요.

[ dependencies ]
ybc = " * "

부르마 추가

bulma CSS 추가(사용자 정의 없음)

이 프로젝트는 여기에 설명된 대로 HTML에 Bulma CSS를 포함하면 완벽하게 작동합니다. HTML 헤드의 다음 링크가 트릭을 수행해야 합니다. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"/> .

bulma sass 추가(사용자 정의 및 테마 허용)

그러나 스타일 지침에 맞게 Bulma를 사용자 정의하려면 Bulma SASS의 복사본을 로컬로 가져와야 하며 여기에 설명된 대로 사용자 정의를 정의한 후 Bulma를 가져와야 합니다.

 // index.scss

// Set your brand colors
$purple : #8A4D76 ;
$pink : #FA7C91 ;
$brown : #757763 ;
$beige-light : #D0D1CD ;
$beige-lighter : #EFF0EB ;

// Import the rest of Bulma
@import " path/to/bulma " ;

Trunk를 사용하여 애플리케이션을 구축하고 해당 자산을 번들로 묶는 경우 index.html 파일에서 index.scss 가리키기만 하면 Trunk가 애플리케이션, sass 컴파일을 처리하고 dist 디렉토리에서 모든 것을 사용할 수 있게 만듭니다.

 <!DOCTYPE html >
< html >
  < head >
    < meta charset =" utf-8 "/>
    < meta name =" viewport " content =" width=device-width, initial-scale=1 "/>
    < link rel =" stylesheet " href =" index.sass "/>
  </ head >
  < body >
    <!-- ... snip ... -->
  </ body >
</ html >