split-yew

此库为 Split.js 库 添加了 Yew 组件包装器。类似于 react-split 组件。

此库不包括 split-grid 组件。

split-yew 已与 split.js 版本 1.6.5 进行过测试

用法

首先，将 split.js 模块包含在您的 index.html 文件的头标签中，如下所示

<script type="importmap">
    {
        "imports": {
            "split.js": "https://unpkg.com/[email protected]/dist/split.es.js"
        }
    }
</script>

确保其类型为 importmap，并且导入名为 split.js。同时，确保您选择 ES 模块版本，而不是 CommonJS 版本。值得注意的是，split.js 不包含 ES 模块脚本的压缩版本，因此如果您需要，您将不得不自己打包它。之后，该库应无问题地工作。

与它的 React 对应物类似，您只需要将您想要在可调整大小的分割视图中显示的组件包围起来。

html! {
    <Split>
        <Component />
        // ...
        <Component />
    </Split>
}

CSS

split.js 不包含任何样式，并且此组件也不会改变这一点。为了使分割可见，您应该使用显示布局样式来编辑分割根元素的样式。我个人推荐使用 flex 布局。要使边框可见，您应使用 .gutter、.gutter-horizontal 和 .gutter-vertical CSS 类来编辑其样式。

split-yew 的实际使用示例是 yew-playground 的前端。分割样式在 应用程序的源代码 中设置，并且它的 CSS 样式表 展示了如何样式化边框。

有关样式更多信息，请查看split.js的文档。

文档

您可以使用props自定义split。为了保持与react-split组件的兼容性，因此您还可以参考它的参考以及Split.js的文档，API有一些细微的变化。

所有props

附加详情

class prop

Split组件包括一个class prop，您可以用来指定包裹所有内部组件的div的类。这有助于设置split的样式，尤其是在使用像TailwindCSS这样的工具时。

min_size和max_size prop

这两个prop最初接受两种不同类型的值，可以是单个数字，指定所有组件的最小/最大大小，或者是一个数字数组，指定每个组件的单独的最小/最大大小。

在Rust中，split-yew有四个不同的props来模拟这种行为

• min_size/max_size：其中您可以指定一个值应用于所有组件。
• min_sizes/max_sizes：其中您可以指定一个值数组，每个值对应一个组件。

虽然您可以同时指定一个min_size和一个min_sizes，但向量变体会始终具有优先级，如下面的示例所示

html! {
    <Split min_size={500.0} min_sizes={vec![100.0, 200.0]}>
        <ComponentA />
        <ComponentB />
    </Split>
}

在这个例子中，两个组件将具有100和200的最小大小，而min_size={500.0}将被忽略。

函数props

属性 gutter、element_style、gutter_style、on_drag、on_drag_start 和 on_drag_end 应该接受一个函数或闭包。不幸的是，我无法用 yew::Callback 或 wasm_bindgen::Closure 类型来表示它们。目前我能做的最好的事是使用 js_sys::Function 类型，这仍然可以作为属性传递，也可以传递给 split.js 库本身。

这使得传递这些属性有些不方便，因为 js_sys::Function 类型不包含任何有关函数参数或返回类型的类型信息，然而所有这些信息已经在 split.js 的官方文档中提供，因此如果你需要实现这些函数之一，请参考该文档。

对于实现本身，你可以简单地实现一个 wasm_bindgen::Closure 并将其转换为 js_sys::Function。以下示例展示了如何为 gutter 属性创建这样的函数。

let my_gutter: js_sys::Function = Closure::<dyn Fn(js_sys::BigInt, String, web_sys::Element) -> web_sys::Element>::new(
        |index, direction, pair_element| {
            // Do something with the arugments and return a value of type web_sys::Element
        },
    )
    .into_js_value()
    .into()

如示例所示，my_gutter 的最终类型将是 js_sys::Function。虽然我没有太多将函数从 Rust 传递到 JavaScript 的经验，但我发现的一个问题是，在数字方面，我无法使用普通的 Rust 原始类型，而应使用 js_sys::BigInt。

许可协议

本项目遵循 MIT 许可协议。