SuperAPI AI 工具集

composable-svelte-components

前端与建站

查看项目

更新于 10-15 21:47

技能介绍

用途:该技能为 Composable Svelte 应用提供 UI 组件库参考,重点覆盖 shadcn-svelte 组件及其与 Composable 架构的集成模式,用于实现设计、选择组件、样式布局以及处理导航、表单、数据展示、反馈和布局类组件。

主要能力:Composable Svelte 提供 73+ 个 shadcn-svelte 组件,统一通过 props 与状态管理接入 Composable 架构。集成模式为:props 负责配置(标签、变体、样式),$store 提供响应式状态,用户交互通过 dispatch action 处理。组件按包组织:@composable-svelte/core 提供 UI 组件(本技能范围);图形、代码与媒体、图表、地图分别属于 @composable-svelte/graphics、code、charts、maps 等专用技能与包。

组件分类:导航类含 Modal、Sheet、Drawer、Alert、Popover;表单类含 Input、Select、Checkbox、RadioGroup、Switch、Textarea、Combobox;数据展示含 Table、Card、Badge、Avatar;反馈类含 Toast、Progress、Skeleton、Spinner;布局类含 Accordion、Tabs、Collapsible。组件还覆盖键盘导航、ARIA 属性与焦点管理等无障碍模式,并使用 Tailwind CSS 类进行样式与定制。

使用方式:从 @composable-svelte/core/components 导入组件,以 props 传入配置,读取 $store 状态渲染,用户操作时 dispatch action。例如表单输入将 value 绑定到 $store,oninput 中 dispatch 变更;表格用 #each 遍历 $store 数据。自定义组件原则:应用状态不用 $state,须放在 store 中;交互 dispatch action;渲染读取 $store;派生值用 $derived;静态配置才用 props。

适用场景:为 Composable Svelte 应用搭建现代化 UI,包括覆盖层导航、表单输入、数据表格与卡片展示、加载与通知反馈、折叠与标签布局等。选择组件时可参考资料中的决策树,如全屏重要操作选 Modal、移动端底部面板选 Sheet、确认类选 Alert、单选多选项选 RadioGroup 或 Select、表格数据选 Table、加载状态选 Spinner 或 Skeleton。

限制:资料仅说明本技能为参考性质,导航等组件的实现细节指向 composable-svelte-navigation 等专用技能。图形、代码媒体、图表、地图等专用组件不在本技能范围。除上述内容外,关于定价、平台支持、运行环境或具体使用步骤的更多信息暂未提供。