关于 svar-svelte
SVAR Svelte 是一组面向 Svelte 的 UI 组件包,供构建界面的开发者使用。技能文件按包索引组件文档,并提供主题与本地化说明。
主要功能
- 01涵盖表格、甘特图、菜单等组件包
- 02按组件包路由到独立文档
- 03提供主题包装与 CSS 变量说明
- 04提供语言环境配置指南
适用场景
- 01为 Svelte 界面选择对应组件包
- 02查找组件导入和公开类型
- 03为组件层级配置主题
- 04扩展语言包中的文案与格式
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ svar-widgets/ skills --skill svar-svelte安装后在 Claude Code 中输入/svar-svelte确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
comments/index.mdcore/avatar.mdbutton.mdcalendar.mdcheckbox.mdcolorboard.mdcolorpicker.mdcolorselect.mdcombo.mdcounter.mddatepicker.mddaterangepicker.mddropdown.mdfield.mdfullscreen.mdglobals.mdicon.mdindex.mdlocale.mdmodal.mdmodalarea.mdmonth.mdmulticombo.mdpager.mdpopup.mdportal.mdradio.mdrangecalendar.mdrichselect.mdsegmented.md详细介绍
SVAR Svelte 以一系列 @svar-ui/svelte-* 包的形式提供。本文件用于跳转到各个包的入口文件;每个子文件都是独立的,包含组件的导入语句、公共类型、样式钩子和使用示例。
打开与所用包对应的文件。如果下方路由表中没有列出所需组件,请默认使用 core/index.md
组件路由
| 文件 | 包 | 组件 |
|---|---|---|
core/index.md | @svar-ui/svelte-core | 按钮、输入框、选择器、日历、下拉菜单、弹出层、模态框、主题、本地化(40 多个小部件) |
menu/index.md | @svar-ui/svelte-menu | Menu、MenuBar、DropDownMenu、ContextMenu、ActionMenu |
toolbar/index.md | @svar-ui/svelte-toolbar | Toolbar |
layout/index.md | @svar-ui/svelte-layout | Layout、Cell、Panel |
grid/index.md | @svar-ui/svelte-grid | Grid、HeaderMenu、Tooltip、ContextMenu、Toolbar |
editor/index.md | @svar-ui/svelte-editor | Editor |
filter/index.md | @svar-ui/svelte-filter | FilterBuilder、FilterEditor、FilterBar、FilterQuery |
gantt/index.md | @svar-ui/svelte-gantt | Gantt、Toolbar、ContextMenu、Editor、Tooltip、HeaderMenu |
tasklist/index.md | @svar-ui/svelte-tasklist | Tasklist |
comments/index.md | @svar-ui/svelte-comments | Comments |
filemanager/index.md | @svar-ui/svelte-filemanager | Filemanager |
常用技巧
以下内容适用于所有 @svar-ui/svelte-* 包:
themes.md- 主题包装器、CSS 变量、css属性约定、类钩子locales.md- 本地化上下文、内置语言包、扩展词条和格式
为确保正确应用样式,小部件层级结构需要放在主题组件中 某些小部件(grid、gantt、filemanager 等)会导出自己的主题组件,这些组件会委托给 core 主题并添加自身的变量
评论
支持 Markdown