Lib.rs

leptos-twelements

基于 Leptos 的 UI 组件库，基于 Tailwind Elements。

安装（适用于使用 cargo leptos 的项目）

1. 使用 nightly rust 编译器。此crate目前尚不支持 stable rust。

2. 将以下内容添加到您的 Leptos 项目的 Cargo.toml

[dependencies]
leptos-twelements = "^0.1.0"

[build-dependencies]
leptos-twelements = "^0.1.0"

[features]
ssr = [
    # ... leptos probably already has some other entries here
    "leptos-twelements/ssr",
    # ...
]

3. 将以下内容添加到您的 tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: {
    relative: true,
    files: [
      ...
      "./target/.leptos-twelements/rs/**/*.rs",
      "./target/.leptos-twelements/js/**/*.js",
    ],
  },
  plugins: [require("./target/.leptos-twelements/plugin.cjs")]
}

注意，plugin.cjs 和 js 目录目前还不存在，但我们在下一步中将添加生成这些文件的构建脚本。

4. 将以下 build.rs 添加到您的 Leptos 项目以生成这些文件

use std::path::Path;

fn main() {
    let target_dir = Path::new(&env!("CARGO_MANIFEST_DIR")).join("target");
    leptos_twelements::install_files_to(&target_dir);
}

5. 将 .setup_twelements() 调用添加到 axum 路由设置中

    use leptos_twelements::AxumRouterExt;
    let app = Router::new()
        // ...
        .setup_twelements()
        // ...

此函数调用将向您的 axum 应用添加必要的路由以提供 Tailwind Elements 所需的 JavaScript。

请注意，此代码（包括 use 语句）应通过 #[cfg)] 属性进行保护。默认的 leptos 设置应该已经正确地这样做。

6. 将 <TwElementsSetup /> 添加到您的 App 组件

use leptos_twelements::TwElementsSetup;

#[component]
pub fn App(cx: Scope) -> impl IntoView {
    // ...
    view! {
        cx,
        // ...
        <TwElementsSetup />
        // ...
    }
}