@silkrun / ui
用于Silkrun应用的React组件和主题CSS。
安装
npm install @silkrun/ui react react-dom
需要React 18。
使用
在应用的入口点导入一次样式表，然后从各自的路径导入每个组件：
import '@silkrun/ui/styles.css'
import { Button } from '@silkrun/ui/button'
import { Dialog } from '@silkrun/ui/dialog'
export function App() {
return <Button>Save</Button>
}
没有根 @silkrun/ui 导入。每个组件路径将你的bundle保存为你使用的组件。
样式表是预编译的，所以你的应用不需要Tailwind设置。字体是通过相对URL捆绑和引用的，所以任何处理CSS的捆绑器 url() （Vite, webpack, Next.js）为你复制它们。
明暗模式
集 data-theme 在 <html>：
<html data-theme="dark">
组件读取属性，并且没有自己的主题道具。没有它，光的主题适用。
组件
accordion， account-menu， action-bar， action-sheet， alert， app-card， app-header， app-icon-status， avatar， badge， bottom-dock， breadcrumb， button， calendar， card， checkbox， checkbox-group， chip， code， command-dialog， context-menu， copy-field， corner-cluster， date-picker， descriptions， dialog， divider， dot， dropdown-menu， dynamic-island， empty-state， event-block， fab， field， file-drop， form， grid， heading， hover-actions， hover-card， icon， icon-button， image， image-grid， input， launchpad， lazy-load， list， markdown-text， media-viewer， message-row， messages， overlay， page-header， pagination， pane， pane-header， picker， popconfirm， popover， progress， radio-group， rich-text-input， row， row-group， scroll-area， search-trigger， segmented， select， settings-navigation， sheet， sidebar-app-identity， sidebar-nav， sidebar-screen， sidebar-shell， sidebar-user， skeleton， slider， smart-list， spinner， splitter， stack， stage-progress， surface， switch， tab-bar， table， tabs， tags-input， text， text-diff， textarea， time-picker， toaster， tool-use， tooltip， topbar-ghost， ui-provider， use-roving-focus， workspace-stage
每个名称都是它的导入路径： @silkrun/ui/<name> (或 @silkrun/ui/components/<name>）。 select 也有 @silkrun/ui/components/select/native-select, @silkrun/ui/lib/cn 是类名帮助器。
rich-text-input 需要Lexical包，它是可选的peers: install lexical 和 @lexical/* 列表中列出的包 peerDependencies 如果你使用它。
许可证
麻省理工学院。捆绑字体有自己的许可证：Noto Sans （Apache 2.0）和Roboto （SIL开放字体许可证1.1） theme/fonts/.