mcpField
S
svar-svelte

svar-svelte

github.com/svar-widgets设计与 UI269 次安装25 周前更新
代码仓库

关于 svar-svelte

SVAR Svelte 是一组面向 Svelte 的 UI 组件包,供构建界面的开发者使用。技能文件按包索引组件文档,并提供主题与本地化说明。

主要功能

  1. 01涵盖表格、甘特图、菜单等组件包
  2. 02按组件包路由到独立文档
  3. 03提供主题包装与 CSS 变量说明
  4. 04提供语言环境配置指南

适用场景

  1. 01为 Svelte 界面选择对应组件包
  2. 02查找组件导入和公开类型
  3. 03为组件层级配置主题
  4. 04扩展语言包中的文案与格式

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/svar-widgets/skills --skill svar-svelte

安装后在 Claude Code 中输入/svar-svelte确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

comments/
index.md
core/
avatar.md
button.md
calendar.md
checkbox.md
colorboard.md
colorpicker.md
colorselect.md
combo.md
counter.md
datepicker.md
daterangepicker.md
dropdown.md
field.md
fullscreen.md
globals.md
icon.md
index.md
locale.md
modal.md
modalarea.md
month.md
multicombo.md
pager.md
popup.md
portal.md
radio.md
rangecalendar.md
richselect.md
segmented.md

详细介绍

SVAR Svelte 以一系列 @svar-ui/svelte-* 包的形式提供。本文件用于跳转到各个包的入口文件;每个子文件都是独立的,包含组件的导入语句、公共类型、样式钩子和使用示例。

打开与所用包对应的文件。如果下方路由表中没有列出所需组件,请默认使用 core/index.md

组件路由

文件包组件
core/index.md@svar-ui/svelte-core按钮、输入框、选择器、日历、下拉菜单、弹出层、模态框、主题、本地化(40 多个小部件)
menu/index.md@svar-ui/svelte-menuMenu、MenuBar、DropDownMenu、ContextMenu、ActionMenu
toolbar/index.md@svar-ui/svelte-toolbarToolbar
layout/index.md@svar-ui/svelte-layoutLayout、Cell、Panel
grid/index.md@svar-ui/svelte-gridGrid、HeaderMenu、Tooltip、ContextMenu、Toolbar
editor/index.md@svar-ui/svelte-editorEditor
filter/index.md@svar-ui/svelte-filterFilterBuilder、FilterEditor、FilterBar、FilterQuery
gantt/index.md@svar-ui/svelte-ganttGantt、Toolbar、ContextMenu、Editor、Tooltip、HeaderMenu
tasklist/index.md@svar-ui/svelte-tasklistTasklist
comments/index.md@svar-ui/svelte-commentsComments
filemanager/index.md@svar-ui/svelte-filemanagerFilemanager

常用技巧

以下内容适用于所有 @svar-ui/svelte-* 包:

  • themes.md - 主题包装器、CSS 变量、css 属性约定、类钩子
  • locales.md - 本地化上下文、内置语言包、扩展词条和格式

为确保正确应用样式,小部件层级结构需要放在主题组件中 某些小部件(grid、gantt、filemanager 等)会导出自己的主题组件,这些组件会委托给 core 主题并添加自身的变量

评论

支持 Markdown