ybc
v0.4.0
YBC инкапсулирует всю структуру, стиль и функциональность платформы Bulma CSS в виде набора компонентов Yew. YBC также поставляется с поддержкой Yew Router, добавляя компоненты в стиле Bulma, которые обертывают компоненты Yew Router для чистой интеграции.
В качестве руководящего принципа 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 >
</>
}
}
} Сначала добавьте эту библиотеку в зависимости Cargo.toml .
[ dependencies ]
ybc = " * " Этот проект работает отлично, если вы просто включите CSS Bulma в свой HTML, как описано здесь. Следующая ссылка в вашем HTML-заголовке должна помочь: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"/> .
Однако, если вы хотите настроить 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.scss из файла index.html , и 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 > Теперь просто выполните trunk serve --open , и ваше приложение будет создано и открыто в вашем браузере.
Если вы не используете Trunk, вам потребуется использовать другой механизм для создания приложения Rust WASM и его ресурсов.
В настоящее время эта библиотека поддерживает только серверную часть web-sys. Поддержка stdweb в настоящее время не планируется. Если это проблема, пожалуйста, откройте проблему и опишите причину. Ваше здоровье!
