9 个版本 (破坏性更改)

0.7.3	2022年3月20日
0.7.2	2022年1月9日
0.6.0	2021年12月22日
0.5.0	2021年12月20日
0.1.0	2021年4月19日

#591 in GUI

每月109次下载

MIT/Apache

64KB
358 行

yew-layout

· · · ·

这个crate为你提供了一个基于Yew 框架的布局组件，这些组件用于构建你的视图。查看API文档

注意： yew-layout 目前还不是生产就绪的，但适用于侧项目和内部工具。

可用的布局

Row：一个水平对齐其子元素的布局。
Column：一个垂直对齐其子元素的布局。

特性

合理的默认值：所有布局都有合理的默认属性值，这些值适用于大多数用例。
丰富的属性：所有布局都有丰富的属性，可以通过多种方式调整以适应不同的用例。
一致的属性：布局几乎具有相同的属性，因此如果您决定从 Row 切换到 Column，只需这样做，属性将按相同的方式工作，其行为将更改以匹配当前布局类型！。
由 Flexbox 驱动： Row 和 Column 在幕后使用 Flexbox，幸运的是没有黑魔法。

目标

此crate的目标是为您提供用于布局视图的布局类型，仅此而已。

快速示例

use css_style::{color, unit::px, Background, Border};
use yew::prelude::*;
use yew_layout::{
    Align, AlignRows, Column, CrossAlign, Gap, Length, Margin, Overflow, Padding, Row,
};

#[function_component(App)]
pub fn app() -> Html {
    let border = Border::from(color::named::DARKORCHID).width(px(2)).dashed();
    html! {
        <Column align={ Align::Center }
                cross_align={ CrossAlign::Center }
                gap={ Gap::from(px(8)) }
                width={ Length::from(px(350)) }
                length={ Length::from(px(550)) }
                border={ Border::default().radius(px(8)) }
                background={ Background::from(color::named::SILVER) } >
            <Row align={ Align::Center }
                 align_rows={ AlignRows::Center }
                 wrap=true
                 min_width={ Length::from(px(220)) }
                 gap={ Gap::from(px(12)) }
                 padding={ Padding::default().y(px(12)) }
                 margin={ Margin::default().x(px(20)) }
                 border={ border.clone().top_left(px(8)).top_right(px(8)) }>
                {
                    (0..=11)
                        .into_iter()
                        .map(|i| html!{
                            <div key={i} style={ "background: dodgerblue; height: 40px; width: 40px;" }></div>
                        }).collect::<Html>()
                }
            </Row>
            <Column border={ border.bottom_left(px(8)).bottom_right(px(8)) }
                    overflow={ Overflow::hidden().y_auto_scroll() }
                    padding={ Padding::default().x(px(10)) }>
                <h1>{ "Sub-column with scroll bar" }</h1>
                <p>{ "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Donec hendrerit tempor tellus.  Donec pretium posuere tellus.  Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  Nulla posuere.  Donec vitae dolor.  Nullam tristique diam non turpis.  Cras placerat accumsan nulla.  Nullam rutrum.  Nam vestibulum accumsan nisl." }</p>
            </Column>
        </Column>
    }
}

这将看起来像：示例截图

依赖项

~14MB
~259K SLoC