Lib.rs

使用方法

本项目假定您已经有一个使用 Yew 框架 的现有网页应用程序。

在常规 yew 依赖项旁边添加依赖项

[dependencies]
yew = "0.21"
yew-bootstrap = "*"

要使用表单回调函数，应添加以下依赖项

[dependencies]
wasm-bindgen = "0.2.*"
web-sys = { version = "0.3.*", features = ["HtmlTextAreaElement", "HtmlSelectElement"] }

然后在应用程序的开头，包含 include_cdn() 或 include_inline() 函数以加载所需的 CSS。一些组件需要加载 Bootstrap JavaScript 库 - 对于这些组件，您可以使用 include_cdn_js() 函数。建议将此放置在 html!{} 宏的底部，如下所示

    fn view(&self, _ctx: &Context<Self>) -> Html {
        html! {
            <>
                {include_cdn()}
                <Button style={Color::Primary}>{"Primary"}</Button>
                {include_cdn_js()}
            </>
        }
    }

查看 main.rs 以获取每个实现组件的示例用法。

版本约定

本项目使用 语义化版本控制。

覆盖率

核心内容

• 容器 (component::Container)
• 网格 (component::Row，component::Column)
• 显示标题 (component::Display)
• 引导 (component::Lead)
• 块引用
• 图像/图
• 表格
• 表单（component::form::FormControl）

组件

• 手风琴（component::Accordion）
• 警告（component::Alert）
• 徽章（component::Badge）
• 面包屑
• 按钮（component::Button）
• 按钮组（component::ButtonGroup）
• 卡片（component::Card，component::CardGroup）
• 轮播
• 关闭按钮
• 折叠
• 下拉菜单
• 列表组（component::ListGroup，component::ListGroupItem）
• 模态框（component::Modal）
• 导航栏（component::NavBar，component::NavItem，component::NavDropdown，component::NavDropdownItem）
• 导航 & 标签页
• 抽屉式菜单
• 分页
• 占位符
• 弹出框
• 进度条（component::Progress，component::ProgressBar）
• 滚动监听
• 旋转器（component::Spinner）
• 通知
• 工具提示

辅助工具

• 清除浮动
• 彩色链接（component::Link）
• 堆叠
• 拉伸（component::Link with stretched={true}>）
• 文本截断
• 垂直/水平线/规则（component::Line）

示例

提供了几个示例

• examples/basics：组件
• examples/forms：表单字段

运行示例

cd examples/<directory>
trunk --serve