SuperAPI AI 工具集

kiso

前端与建站

查看项目

更新于 10-16 06:15

技能介绍

用途:Kiso 是面向 Rails 的 UI 组件库,基于 ERB partials、Tailwind CSS、class_variants 和 tailwind_merge 构建,灵感来自 shadcn/ui 与 Nuxt UI,适配 Rails + Hotwire,用于创建界面、定制主题、构建表单和组合组件。

安装:在 Gemfile 中加入 gem "kiso",执行 bundle install,然后运行 bin/rails generate kiso:install。

渲染:使用 kui() 辅助方法渲染组件,例如 kui(:badge, color: :success, variant: :soft) { "Active" },卡片等组件支持嵌套子组件写法。

颜色与变体:提供 primary、secondary、success、info、warning、error、neutral 七种语义颜色,可通过主题 CSS 变量配置。同时接受 color 和 variant 的组件使用复合变体,变体包括 solid、outline、soft、subtle。

主题:组件使用语义化 Tailwind 工具类(如 bg-primary、text-foreground、bg-muted),解析为 CSS 变量,暗色模式自动切换,组件不使用 dark: 前缀。可在应用 CSS 中通过 @theme inline 覆盖品牌色。

定制:全局覆盖可在初始化文件中使用 Kiso.configure,覆盖哈希支持 base:、variants:、compound_variants:、defaults:,在启动时应用一次。单实例覆盖可传 css_classes:,冲突类由 tailwind_merge 自动解决。层级为:主题默认 < 全局配置 < 单实例 css_classes:。

图标:使用 kiso-icons 进行服务端内联 SVG 渲染,内置 Lucide(约 1500 个图标)。可用 kiso_icon 渲染,通过 bin/kiso-icons pin 添加更多图标库,也可在 Kiso.configure 中全局覆盖组件默认图标。

参考文档:按需加载 references/components.md、references/theming.md、references/icons.md,不要一次性全部加载。

限制:资料未提供收费、价格、平台支持范围及具体效果等信息。