components.html-data.json

{
  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/refs/heads/main/docs/customData.schema.json",
  "version": 1.1,
  "tags": [
    {
      "name": "s-button",
      "description": "**按钮 Button**\n\n基础按钮，适用于简单的点击操作。\n\n```html\n<s-button>button</s-button>\n```\n\n> 如果你只需要一个拥有触摸反馈的容器，那么 [Ripple](https://soberjs.com/component/ripple) 组件可能更适合。\n\n**属性:**\n\n- `type`: 按钮样式\n- `disabled` (`boolean`): 是否禁用\n\n**插槽:**\n\n- `start`: 开始\n- `end`: 结束",
      "attributes": [
        {
          "name": "type",
          "description": "按钮样式。\n\n可选值为:\n- `filled`\n- `elevated`\n- `filled-tonal`\n- `outlined`\n- `text`",
          "values": [
            {
              "name": "filled",
              "description": "默认值。带有较明显背景色的按钮"
            },
            {
              "name": "elevated",
              "description": "带有阴影的按钮"
            },
            {
              "name": "filled-tonal",
              "description": "带有背景色的按钮"
            },
            {
              "name": "outlined",
              "description": "带有边框的按钮"
            },
            {
              "name": "text",
              "description": "只包含文字的按钮，没有其他样式"
            }
          ]
        },
        {
          "name": "disabled",
          "description": "是否禁用",
          "valueSet": "boolean"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/button"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/button.ts"
        }
      ]
    },
    {
      "name": "s-icon",
      "description": "**图标 Icon**\n\n图标。\n\n我们推荐你使用 `svg` 作为图标，`icon` 组件作为 `svg` 的容器使用。\n\n```html\n<s-icon>\n  <svg viewBox=\"...\">...</svg>\n</s-icon>\n```\n\n为了方便使用和出于体积考虑，`icon` 自带了一些常用的图标，你可以使用 `type` 指定图标\n\n```html\n<s-icon type=\"home\"></s-icon>\n```\n\n你可以在图标库中获取 SVG 图标，或者使用阿里巴巴矢量图标库。\n\n**属性:**\n\n- `type`: 图标名称",
      "attributes": [
        {
          "name": "type",
          "description": "图标名称。",
          "values": [
            {
              "name": "none",
              "description": "不使用内置图标"
            },
            { "name": "home" },
            { "name": "search" },
            { "name": "menu" },
            { "name": "arrow_back" },
            { "name": "arrow_forward" },
            { "name": "arrow_upward" },
            { "name": "arrow_downward" },
            { "name": "arrow_drop_up" },
            { "name": "arrow_drop_down" },
            { "name": "arrow_drop_left" },
            { "name": "arrow_drop_right" },
            { "name": "more_vert" },
            { "name": "more_horiz" },
            { "name": "close" },
            { "name": "chevron_up" },
            { "name": "chevron_down" },
            { "name": "chevron_left" },
            { "name": "chevron_right" },
            { "name": "light_mode" },
            { "name": "dark_mode" },
            { "name": "star" },
            { "name": "favorite" }
          ]
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/icon"
        },
        {
          "name": "图标库",
          "url": "https://soberjs.com/resource/icon"
        },
        {
          "name": "阿里巴巴矢量图标库",
          "url": "https://www.iconfont.cn/"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/icon.ts"
        }
      ]
    },
    {
      "name": "s-icon-button",
      "description": "**图标按钮 Icon Button**\n\n```html\n<s-icon-button>\n  <s-icon type=\"search\"></s-icon>\n</s-icon-button>\n```\n\n**属性:**\n\n- `type`: 按钮样式\n- `disabled` (`boolean`): 是否禁用",
      "attributes": [
        {
          "name": "type",
          "description": "按钮样式。\n\n可选值为:\n- `text`\n- `filled`\n- `elevated`\n- `filled-tonal`\n- `outlined`",
          "values": [
            {
              "name": "text",
              "description": "默认值。只包含文字的按钮，没有其他样式"
            },
            {
              "name": "filled",
              "description": "带有较明显背景色的按钮"
            },
            {
              "name": "elevated",
              "description": "带有阴影的按钮"
            },
            {
              "name": "filled-tonal",
              "description": "带有背景色的按钮"
            },
            {
              "name": "outlined",
              "description": "带有边框的按钮"
            }
          ]
        },
        {
          "name": "disabled",
          "description": "是否禁用",
          "valueSet": "boolean"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/icon-button"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/icon-button.ts"
        }
      ]
    },
    {
      "name": "s-fab",
      "description": "**浮动操作按钮 Floating Action Button**\n\n```html\n<s-fab>\n  <s-icon type=\"add\"></s-icon>\n</s-fab>\n```\n\n设置 `extended` 来开启扩展浮动按钮。\n\n**属性:**\n\n- `size`: 按钮大小\n- `extended` (`boolean`): 是否为扩展按钮\n\n**插槽:**\n\n- `start`: 开始\n- `end`: 结束",
      "attributes": [
        {
          "name": "size",
          "description": "按钮大小。\n\n可选值为:\n- `medium`\n- `small`",
          "values": [
            {
              "name": "medium",
              "description": "默认值。中等大小"
            },
            {
              "name": "small",
              "description": "大小较小"
            }
          ]
        },
        {
          "name": "extended",
          "description": "是否为扩展按钮",
          "valueSet": "boolean"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/FAB"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/FAB.ts"
        }
      ]
    },
    {
      "name": "s-segmented-button",
      "description": "**分组按钮 Segmented Button**\n\n```html\n<s-segmented-button>\n  <s-segmented-button-item selected=\"true\">\n    <s-icon slot=\"start\" type=\"search\"></s-icon>\n    item1\n  </s-segmented-button-item>\n  <s-segmented-button-item disabled=\"true\">\n    item2\n    <s-icon slot=\"end\" type=\"close\"></s-icon>\n  </s-segmented-button-item>\n</s-segmented-button>\n```\n\n**属性:**\n\n- `options` _[只读]_ (`SegmentedButtonItem[]`): 子项目\n- `selectedIndex` _[只读]_ (`number`): 当前选中下标\n\n**事件:**\n- `change`: 选中变化后触发\n\n**插槽:**\n\n- `start`: 开始（不会触发选中）\n- `end`: 结束（不会触发选中）",
      "attributes": [
        {
          "name": "onchange",
          "description": "选中变化后触发"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/segmented-button"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/segmented-button.ts"
        }
      ]
    },
    {
      "name": "s-segmented-button-item",
      "description": "**分组按钮项目 Segmented Button Item**\n\n作为 `s-segmented-item` 的子项使用。\n\n**属性:**\n\n- `selected` (`boolean`): 是否选中。\n- `disabled` (`boolean`): 是否禁用\n- `selectable` (`boolean`): 是否启用选中",
      "attributes": [
        {
          "name": "selected",
          "description": "是否选中",
          "valueSet": "boolean"
        },
        {
          "name": "disabled",
          "description": "是否禁用",
          "valueSet": "boolean"
        },
        {
          "name": "selectable",
          "description": "是否启用选中",
          "valueSet": "boolean"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/segmented-button"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/segmented-button.ts"
        }
      ]
    },
    {
      "name": "s-ripple",
      "description": "**波纹 Ripple**\n\n波纹是一个容器，它本身没有任何样式，波纹的颜色继承文本颜色，并带有一定的不透明度。\n\n```html\n<s-ripple style=\"padding: 16px 48px\">test</s-ripple>\n```\n\n如果你希望单独修改波纹颜色，那你应当使用 CSS 变量。\n\n设置 `attached` 来启用依附模式，它依附在容器中呈现，事件从容器上触发，某些情况下可能有妙用。\n\n由于使用定位确定位置，所以容器的 `position` 必须设置为 `relative`、`absolute`、`sticky`、`fixed` 其中之一。\n\n**属性:**\n\n- `centered` (`boolean`): 波纹是否居中\n- `attached` (`boolean`): 是否设置为依附模式\n- `rippled` _[只读]_ (`boolean`): 在波纹触发时，容器将被设置该属性\n\n**CSS 变量:**\n\n- `--ripple-color`: 波纹颜色\n- `--ripple-opacity`: 波纹颜色不透明度",
      "attributes": [
        {
          "name": "centered",
          "description": "波纹是否居中",
          "valueSet": "boolean"
        },
        {
          "name": "attached",
          "description": "是否设置为依附模式",
          "valueSet": "boolean"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/ripple"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/ripple.ts"
        }
      ]
    },
    {
      "name": "s-checkbox",
      "description": "**复选框 Checkbox**\n\n```html\n<s-checkbox>已阅读用户协议</s-checkbox>\n<s-checkbox checked=\"true\"></s-checkbox>\n<s-checkbox indeterminate=\"true\"></s-checkbox>\n```\n\n设置 disabled 来禁用复选框。\n\n使用`color`自定义颜色。\n\n**属性:**\n\n- `checked` (`boolean`): 是否选中\n- `disabled` (`boolean`): 是否禁用\n- `indeterminate` (`boolean`): 是否未知\n\n**事件:**\n- `change`: 选中变化后触发",
      "attributes": [
        {
          "name": "checked",
          "description": "是否选中",
          "valueSet": "boolean"
        },
        {
          "name": "disabled",
          "description": "是否禁用",
          "valueSet": "boolean"
        },
        {
          "name": "indeterminate",
          "description": "是否未知",
          "valueSet": "boolean"
        },
        {
          "name": "onchange",
          "description": "选中变化后触发"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/checkbox"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/checkbox.ts"
        }
      ]
    },
    {
      "name": "s-radio-button",
      "description": "**单选按钮 Radio Button**\n\n单选按钮需要设置一个唯一的 `name` 作为分组才能执行单选。\n\n```html\n<s-radio-button name=\"group\">男</s-radio-button>\n<s-radio-button name=\"group\">女</s-radio-button>\n<s-radio-button name=\"group\" disabled=\"true\">未知</s-radio-button>\n```\n\n设置 `disabled` 来禁用复选框。\n\n使用`color`自定义颜色。\n\n**属性:**\n\n- `name` (`string`): 名称\n- `checked` (`boolean`): 是否选中\n- `disabled` (`boolean`): 是否禁用\n\n**事件:**\n- `change`: 选中变化后触发",
      "attributes": [
        {
          "name": "name",
          "description": "名称"
        },
        {
          "name": "checked",
          "description": "是否选中",
          "valueSet": "boolean"
        },
        {
          "name": "disabled",
          "description": "是否禁用",
          "valueSet": "boolean"
        },
        {
          "name": "onchange",
          "description": "选中变化后触发"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/radio-button"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/radio-button.ts"
        }
      ]
    },
    {
      "name": "s-slider",
      "description": "**滑块 Slider**\n\n```html\n<s-slider></s-slider>\n```\n\n设置 `labeled` 开启文本标签。\n\n设置 `disabled` 来禁用滑块。\n\n使用`color`自定义颜色。\n\n**属性:**\n\n- `labeled` (`boolean`): 是否启用文本标签\n- `disabled` (`boolean`): 是否禁用\n- `max` (`number`): 最大值\n- `min` (`number`): 最小值\n- `step` (`number`): 步进值\n- `value` (`number`): 当前值\n\n**事件:**\n- `change`: 值变化后触发",
      "attributes": [
        {
          "name": "labeled",
          "description": "是否启用文本标签",
          "valueSet": "boolean"
        },
        {
          "name": "disabled",
          "description": "是否禁用",
          "valueSet": "boolean"
        },
        {
          "name": "max",
          "description": "最大值"
        },
        {
          "name": "min",
          "description": "最小值"
        },
        {
          "name": "step",
          "description": "步进值"
        },
        {
          "name": "value",
          "description": "当前值"
        },
        {
          "name": "onchange",
          "description": "值变化后触发"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/slider"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/slider.ts"
        }
      ]
    },
    {
      "name": "s-linear-progress",
      "description": "**线性进度 Linear Progress**\n\n```html\n<s-linear-progress value=\"50\"></s-linear-progress>\n```\n\n设置 `indeterminate` 来启用未知进度。\n```html\n<s-linear-progress indeterminate=\"true\"></s-linear-progress>\n```\n\n设置 `animated` 来启用变更过渡动画。\n\n使用`color`自定义颜色。\n\n**属性:**\n\n- `indeterminate` (`boolean`): 是否未知\n- `animated` (`boolean`): 是否启用变更时过渡动画\n- `max` (`number`): 最大值\n- `value` (`number`): 当前值",
      "attributes": [
        {
          "name": "indeterminate",
          "description": "是否未知",
          "valueSet": "boolean"
        },
        {
          "name": "animated",
          "description": "是否启用变更时过渡动画",
          "valueSet": "boolean"
        },
        {
          "name": "max",
          "description": "最大值"
        },
        {
          "name": "value",
          "description": "当前值"
        },
        {
          "name": "onchange",
          "description": "选中变化后触发"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/linear-progress"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/linear-progress.ts"
        }
      ]
    },
    {
      "name": "s-circular-progress",
      "description": "**圆形进度 Circular Progress**\n\n```html\n<s-circular-progress value=\"50\"></s-circular-progress>\n```\n\n设置 `indeterminate` 来启用未知进度。\n```html\n<s-circular-progress indeterminate=\"true\"></s-circular-progress>\n```\n\n设置 `animated` 来启用变更过渡动画。\n\n使用`color`自定义颜色。\n\n**属性:**\n\n- `indeterminate` (`boolean`): 是否未知\n- `animated` (`boolean`): 是否启用变更时过渡动画\n- `max` (`number`): 最大值\n- `value` (`number`): 当前值",
      "attributes": [
        {
          "name": "indeterminate",
          "description": "是否未知",
          "valueSet": "boolean"
        },
        {
          "name": "animated",
          "description": "是否启用变更时过渡动画",
          "valueSet": "boolean"
        },
        {
          "name": "max",
          "description": "最大值"
        },
        {
          "name": "value",
          "description": "当前值"
        },
        {
          "name": "onchange",
          "description": "选中变化后触发"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/circular-progress"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/circular-progress.ts"
        }
      ]
    },
    {
      "name": "s-switch",
      "description": "**开关 Switch**\n\n```html\n<s-switch></s-switch>\n<s-switch checked=\"true\"></s-switch>\n```\n\n设置 `disabled` 来禁用开关。\n\n使用`color`自定义颜色。\n\n**属性:**\n\n- `checked` (`boolean`): 是否选中\n- `disabled` (`boolean`): 是否禁用\n\n**事件:**\n- `change`: 选中变化后触发",
      "attributes": [
        {
          "name": "checked",
          "description": "是否选中",
          "valueSet": "boolean"
        },
        {
          "name": "disabled",
          "description": "是否禁用",
          "valueSet": "boolean"
        },
        {
          "name": "onchange",
          "description": "选中变化后触发"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/switch"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/switch.ts"
        }
      ]
    },
    {
      "name": "s-text-field",
      "description": "**文本框 Text Field**\n\n`Text Field` 是一个容器组件，可以在内部放置 `input` 和 `textarea` 元素。推荐使用 `label` 属性来替代 `placeholder`，从而在表单交互中提升可访问性。\n\n```html\n<s-text-field>\n  <input type=\"text\" placeholder=\"请输入名称\">\n  <s-icon slot=\"end\" type=\"favorite\"></s-icon>\n</s-text-field>\n\n<s-text-field label=\"请输入名称\">\n  <input type=\"text\">\n  <s-icon-button slot=\"end\">\n    <s-icon slot=\"end\" type=\"star\"></s-icon>\n  </s-icon-button>\n</s-text-field>\n```\n\n在使用 `textarea` 时，组件高度将会自适应，你可以通过设置 `min-height` 和 `max-height` 来定义文本框的最小和最大高度。\n\n```html\n<s-text-field label=\"请输入名称\">\n  <textarea style=\"min-height: 112px\"></textarea>\n</s-text-field>\n```\n\n`Text Field` 支持 `display: grid` 样式，从而作为块元素占满一行。\n\n由于组件内部封装性较高，样式自定义变得复杂，因此开放了一些 CSS 变量来允许你自定义样式。\n\n**属性:**\n\n- `label` (`string`): 标签文本，用于替代 `placeholder`。\n- `value` (`string`): 文本框中的初始值。\n- `placeholder` (`string`): 用于显示在文本框中的占位符文本。\n\n**插槽:**\n\n- `start`: 插槽用于放置在文本框开始位置的内容（如图标或按钮）。\n- `end`: 插槽用于放置在文本框结束位置的内容（如图标或按钮）。\n\n**CSS 变量:**\n\n- `--text-field-border-radius`: 文本框的圆角，默认值为 `4px`。\n- `--text-field-border-width`: 文本框的边框宽度，默认值为 `1px`。\n- `--text-field-border-color`: 文本框的边框颜色，默认值为 `var(--s-color-outline, #777680)`。\n- `--text-field-padding`: 文本框的内边距，默认值为 `16px`。\n\n**示例:**\n\n```html\n<s-text-field label=\"请输入名称\">\n  <input type=\"text\">\n  <s-icon slot=\"end\" type=\"search\"></s-icon>\n</s-text-field>\n```\n\n你可以在 `<s-text-field>` 组件中加入 `input`、`textarea` 或其他表单元素，并结合 `slot` 插槽在文本框内放置额外内容（如图标或按钮）。",
      "attributes": [
        {
          "name": "label",
          "description": "标签文本，用于替代 `placeholder` 来描述文本框内容。"
        },
        {
          "name": "value",
          "description": "文本框中的初始值。"
        },
        {
          "name": "placeholder",
          "description": "用于显示在文本框中的占位符文本。"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/text-field"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/text-field.ts"
        }
      ]
    },
    {
      "name": "s-rate",
      "description": "**评分 Rate**\n\n```html\n<s-rate></s-rate>\n```\n\n设置 `readOnly` 启用只读模式。\n\n使用 `track` 和 `indicator` 插槽来自定义图标，你可以使用 svg 或者 icon 组件。\n\n```html\n<s-rate>\n  <s-icon slot=\"track\" type=\"favorite\"></s-icon>\n  <s-icon slot=\"indicator\" type=\"favorite\"></s-icon>\n</s-rate>\n```\n\n> 如果你希望自定义大小，那么请使用 `font-size` 来设置，该组件需要保持宽高比例，单独设置 width 和 height 可能会导致变形。\n\n**属性:**\n\n- `readOnly` (`boolean`): 是否启用只读模式\n- `max` (`number`): 最大值\n- `min` (`number`): 最小值\n- `step` (`number`): 步进值\n- `value` (`number`): 当前值\n\n**事件:**\n- `change`: 值变化后触发\n- `input`: 值变化时触发\n\n**插槽:**\n- `track`: 未选中\n- `indicator`: 已选中",
      "attributes": [
        {
          "name": "readOnly",
          "description": "是否启用只读模式",
          "valueSet": "boolean"
        },
        {
          "name": "max",
          "description": "最大值"
        },
        {
          "name": "min",
          "description": "最小值"
        },
        {
          "name": "step",
          "description": "步进值"
        },
        {
          "name": "value",
          "description": "当前值"
        },
        {
          "name": "onchange",
          "description": "值变化后触发"
        },
        {
          "name": "oninput",
          "description": "值变化时触发"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/rate"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/rate.ts"
        }
      ]
    },
    {
      "name": "s-picker",
      "description": "**选择框 Picker**\n\n通常用于单选数据，它的目标是替代 `select` 元素。`s-picker` 组件可以通过定义多个 `s-picker-item` 选项来进行选择，支持标签文本、默认值设置以及自定义触发器。\n\n```html\n<s-picker label=\"选择地区\">\n  <s-picker-item value=\"gui yang\">贵阳</s-picker-item>\n  <s-picker-item value=\"bei jing\">北京</s-picker-item>\n  <s-picker-item value=\"shang hai\">上海</s-picker-item>\n  <s-picker-item value=\"shen zhen\">深圳</s-picker-item>\n  <s-picker-item value=\"cheng du\">成都</s-picker-item>\n  <s-picker-item value=\"wu han\">武汉</s-picker-item>\n  <s-picker-item value=\"nan chang\">南昌</s-picker-item>\n  <s-picker-item value=\"hang zhou\">杭州</s-picker-item>\n</s-picker>\n```\n\n你可以在 `s-picker-item` 上设置 `value` 来定义选项的值，并使用 `s-picker` 的 `value` 属性来设置默认选中的值。\n\n**属性:**\n\n- `label` (`string`): 标签文本，用于显示在选择框的触发按钮上。\n- `value` (`string`): 当前选中值，设置为选项 `s-picker-item` 中的 `value` 属性值。\n- `options` _[只读]_ (`PickerItem[]`): 子项目数组，默认为 `[]`。\n- `selectedIndex` (`number`): 当前选中下标，默认为 `-1`。\n- `show()` (`Function`): 显示选择框。\n- `dismiss()` (`Function`): 隐藏选择框。\n- `toggle()` (`Function`): 切换选择框的显示和隐藏状态。\n\n**事件:**\n\n- `change`: 选中值变化后触发。\n\n**插槽:**\n\n- `trigger`: 自定义触发器插槽。\n\n**CSS 变量:**\n\n- `--picker-border-radius`: 圆角，默认值为 `4px`。\n- `--picker-border-width`: 边框宽度，默认值为 `1px`。\n- `--picker-border-color`: 边框颜色，默认值为 `var(--s-color-outline, #777680)`。\n- `--picker-padding`: 内边距，默认值为 `16px`。\n- `--picker-height`: 高度，默认值为 `48px`。",
      "attributes": [
        {
          "name": "label",
          "description": "设置选择框的标签文本，用于显示在选择框触发按钮上。",
          "type": "string"
        },
        {
          "name": "value",
          "description": "设置选中的值，对应子项 `s-picker-item` 的 `value` 属性。",
          "type": "string",
          "defaultValue": ""
        },
        {
          "name": "selectedIndex",
          "description": "当前选中下标。",
          "type": "number",
          "defaultValue": "-1"
        }
      ],
      "methods": [
        {
          "name": "show",
          "description": "显示选择框。"
        },
        {
          "name": "dismiss",
          "description": "隐藏选择框。"
        },
        {
          "name": "toggle",
          "description": "切换选择框的显示与隐藏状态。"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/picker"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/picker.ts"
        }
      ]
    },
    {
      "name": "s-picker-item",
      "description": "**选择框项目 Picker Item**\n\n作为 `s-picker` 组件的子组件使用，用于定义每个选择项。每个 `s-picker-item` 需要设置 `value` 属性来代表其选中值。\n\n**属性:**\n\n- `value` (`string`): 项目的值，用于标识该项被选中时的返回值。\n- `selected` (`boolean`): 是否选中该项，默认为 `false`。\n\n**插槽:**\n- `start`: 项目内容开始位置的插槽\n- `end`: 项目内容结束位置的插槽",
      "attributes": [
        {
          "name": "value",
          "description": "项目的值，用于标识该项被选中时的返回值。"
        },
        {
          "name": "selected",
          "description": "是否选中该项，默认为 `false`。",
          "valueSet": "boolean"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/picker"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/picker.ts"
        }
      ]
    },
    {
      "name": "s-divider",
      "description": "**分割线 Divider**\n\n```html\n<s-divider></s-divider>\n```",
      "attributes": [],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/divider"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/divider.ts"
        }
      ]
    },
    {
      "name": "s-page",
      "description": "**页面 Page**\n\n建议作为页面根容器的组件，它拥有全局的 CSS 变量，用于控制所有后代组件的样式。\n\n```html\n<s-page></s-page>\n```\n\n设置 `theme` 来使用其他主题。\n\n**属性:**\n\n- `theme`: 主题",
      "attributes": [
        {
          "name": "theme",
          "description": "主题，可选值为 `light`, `dark`, `auto`。",
          "values": [
            {
              "name": "light",
              "description": "亮色主题（默认）"
            },
            {
              "name": "dark",
              "description": "暗色主题"
            },
            {
              "name": "auto",
              "description": "跟随系统"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/page"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/page.ts"
        }
      ]
    },
    {
      "name": "s-drawer",
      "description": "**抽屉 Drawer**\n\n当窗口宽度小于 1200px 时，抽屉会切换为折叠模式。通常适用于移动端，以便于腾出更多空间。\n\n```html\n<s-drawer>\n  <div slot=\"start\">Start</div>\n  <div>Main</div>\n  <div slot=\"end\">End</div>\n</s-drawer>\n```\n\n**属性:**\n\n- `mode` _[只读]_: 模式\n\n**插槽:**\n- `start`: 开始插槽\n- `end`: 结束插槽",
      "attributes": [],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/drawer"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/drawer.ts"
        }
      ]
    },
    {
      "name": "s-scroll-view",
      "description": "**滚动 Scroll View**\n\n滚动为容器提供了滚动条样式，出于触屏设备优化，滚动条样式仅在支持鼠标的设备上有效。\n\n```html\n<s-scroll-view>\n  <div style=\"height: 1080px;width: 2200px\"></div>\n</s-scroll-view>\n```",
      "attributes": [],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/scroll-view"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/scroll-view.ts"
        }
      ]
    },
    {
      "name": "s-card",
      "description": "**卡片 Card**\n\n用于显示内容的卡片组件，支持多种样式，可以作为容器使用。\n\n```html\n<s-card>\n  <div slot=\"image\"></div>\n  <div slot=\"headline\">Headline</div>\n  <div slot=\"subhead\">Subhead</div>\n  <div slot=\"text\">Cards are often used for grid lists, which provide click effects</div>\n  <s-button slot=\"action\" type=\"filled-tonal\">Action</s-button>\n  <s-button slot=\"action\">Action</s-button>\n</s-card>\n\n<s-card clickable=\"true\">\n  <div slot=\"image\"></div>\n  <div slot=\"headline\">Headline</div>\n  <div slot=\"subhead\">Subhead</div>\n  <div slot=\"text\">Cards are often used for grid lists, which provide click effects</div>\n  <s-button slot=\"action\" type=\"filled-tonal\">Action</s-button>\n  <s-button slot=\"action\">Action</s-button>\n</s-card>\n\n<s-card style=\"display: block; padding: 24px\">\n  Card\n</s-card>\n```\n\n**属性:**\n\n- `type` (`elevated`, `filled`, `outlined`): 卡片样式，默认为 `elevated`\n- `clickable` (`boolean`): 是否启用可点击，默认为 `false`\n- `selectable` (`boolean`): 是否启用选中，默认为 `false`\n\n**插槽:**\n- `image`: 图片\n- `headline`: 标题\n- `subhead`: 副标题\n- `text`: 卡片文本\n- `action`: 操作按钮\n\n**CSS 变量:**\n\n- `--border-radius`: 边框半径\n- `--border-width`: 边框宽度\n- `--border-color`: 边框颜色\n- `--padding`: 内边距",
      "attributes": [
        {
          "name": "type",
          "description": "卡片样式，可选值为 `elevated`, `filled`, `outlined`。",
          "values": [
            {
              "name": "elevated",
              "description": "带有阴影的卡片"
            },
            {
              "name": "filled",
              "description": "带有背景色的卡片"
            },
            {
              "name": "outlined",
              "description": "带有边框的卡片"
            }
          ]
        },
        {
          "name": "clickable",
          "description": "是否启用可点击",
          "valueSet": "boolean"
        },
        {
          "name": "selectable",
          "description": "是否启用选中",
          "valueSet": "boolean"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/card"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/card.ts"
        }
      ]
    },
    {
      "name": "s-search",
      "description": "**搜索栏 Search**\n\n搜索组件支持不同尺寸和插槽。可以使用图标按钮、设置不同的尺寸以及自定义下拉插槽。\n\n```html\n<s-search>\n  <s-icon-button slot=\"start\">\n    <s-icon type=\"search\"></s-icon>\n  </s-icon-button>\n  <input type=\"text\" placeholder=\"搜索关键字\">\n  <s-icon-button slot=\"end\">\n    <s-icon type=\"close\"></s-icon>\n  </s-icon-button>\n</s-search>\n\n<s-search>\n  <s-icon type=\"search\" slot=\"start\"></s-icon>\n  <input type=\"text\" placeholder=\"搜索关键字\">\n  <s-icon type=\"close\" slot=\"end\"></s-icon>\n  <div slot=\"dropdown\" style=\"height: 128px\">\n    hello\n  </div>\n</s-search>\n```\n\n**属性:**\n\n- `size` (`string`): 按钮大小，可选值为 `medium`, `small`, `large`，默认值为 `medium`。\n\n**插槽:**\n- `start`: 开始插槽\n- `end`: 结束插槽\n- `dropdown`: 下拉插槽",
      "attributes": [
        {
          "name": "size",
          "description": "按钮大小，可选值为 `medium`, `small`, `large`，默认值为 `medium`。",
          "values": [
            {
              "name": "medium",
              "description": "默认值。中等大小"
            },
            {
              "name": "small",
              "description": "大小较小"
            },
            {
              "name": "large",
              "description": "大小较大"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/search"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/search.ts"
        }
      ]
    },
    {
      "name": "s-carousel",
      "description": "**轮播图 Carousel**\n\n轮播组件用于展示一组内容，并可以自动轮播。可以通过设置持续时长来自定义每张幻灯片显示的时间。\n\n```html\n<s-carousel>\n  <div style=\"background: #936d6d\"></div>\n  <div style=\"background: #6d936f\"></div>\n  <div style=\"background: #856d93\"></div>\n</s-carousel>\n```\n\n**属性:**\n\n- `duration` (`number`): 每张幻灯片显示的持续时长，单位为毫秒，默认值为 `4000`。\n\n**插槽:**\n- 无特定插槽。",
      "attributes": [
        {
          "name": "duration",
          "description": "每张幻灯片显示的持续时长，单位为毫秒，默认值为 `4000`。"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/carousel"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/carousel.ts"
        }
      ]
    },
    {
      "name": "s-tab",
      "description": "**选项卡 Tab**\n\n选项卡组件用于在同一个区域内切换不同的内容。支持徽章、左右对齐以及固定模式。\n\n```html\n<s-tab>\n  <s-tab-item>\n    <div slot=\"text\">Item 1</div>\n  </s-tab-item>\n  <s-tab-item selected=\"true\">\n    <div slot=\"text\">Item 2</div>\n  </s-tab-item>\n  <s-tab-item>\n    <div slot=\"text\">Item 3</div>\n  </s-tab-item>\n</s-tab>\n```\n\n**属性:**\n\n- `mode` (`string`): 设置固定模式，使 item 均分占据宽度，不再支持滚动。\n\n**事件:**\n- `change`: 选中变化后触发。",
      "attributes": [
        {
          "name": "mode",
          "description": "设置固定模式，使 item 均分占据宽度，不再支持滚动。",
          "values": [
            {
              "name": "scrollable",
              "description": "可滚动模式"
            },
            {
              "name": "fixed",
              "description": "固定模式"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/tab"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/tab.ts"
        }
      ]
    },
    {
      "name": "s-tab-item",
      "description": "**选项卡项目 Tab Item**\n\n选项卡项组件，作为 `s-tab` 组件的子组件。\n\n**属性:**\n\n- `selected` (`boolean`): 是否选中，默认值为 `false`。\n\n**插槽:**\n- `icon`: 图标\n- `text`: 文本\n- `badge`: 徽章",
      "attributes": [
        {
          "name": "selected",
          "description": "是否选中，默认值为 `false`。",
          "valueSet": "boolean"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/tab-item"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/tab.ts"
        }
      ]
    },
    {
      "name": "s-navigation",
      "description": "**导航栏 Navigation**\n\n导航组件用于在应用中进行页面切换或执行其他操作。支持图标、文本、徽章插槽，以及导轨模式。\n\n```html\n<s-navigation>\n  <s-navigation-item selected=\"true\">\n    <s-icon type=\"add\" slot=\"icon\"></s-icon>\n    <div slot=\"text\">Item 1</div>\n    <s-badge slot=\"badge\"></s-badge>\n  </s-navigation-item>\n  <s-navigation-item>\n    <s-icon type=\"search\" slot=\"icon\"></s-icon>\n    <div slot=\"text\">Item 2</div>\n  </s-navigation-item>\n  <s-navigation-item>\n    <s-icon type=\"dark_mode\" slot=\"icon\"></s-icon>\n    <div slot=\"text\">Item 3</div>\n    <s-badge slot=\"badge\">99</s-badge>\n  </s-navigation-item>\n</s-navigation>\n\n<s-navigation mode=\"rail\">\n  <s-navigation-item selected=\"true\">\n    <s-icon type=\"add\" slot=\"icon\"></s-icon>\n    <div slot=\"text\">Item 1</div>\n  </s-navigation-item>\n  <s-navigation-item>\n    <s-icon type=\"search\" slot=\"icon\"></s-icon>\n    <div slot=\"text\">Item 2</div>\n  </s-navigation-item>\n  <s-navigation-item>\n    <s-icon type=\"dark_mode\" slot=\"icon\"></s-icon>\n    <div slot=\"text\">Item 3</div>\n  </s-navigation-item>\n</s-navigation>\n```\n\n**属性:**\n\n- `mode` (`string`): 设置导轨模式，支持 `bottom` 和 `rail`。\n- `value` (`string`): 选中值，默认值为 `null`。\n- `options` _[只读]_ (`Item[]`): 子项目数组，默认值为 `[]`。\n- `selectedIndex` _[只读]_ (`number`): 当前选中下标，默认值为 `-1`。\n\n**事件:**\n\n- `change`: 选中变化后触发。\n\n**插槽:**\n\n- `start`: 开始插槽\n- `end`: 结束插槽",
      "attributes": [
        {
          "name": "mode",
          "description": "设置导轨模式。",
          "values": [
            {
              "name": "bottom",
              "description": "底栏模式"
            },
            {
              "name": "rail",
              "description": "导轨模式"
            }
          ]
        },
        {
          "name": "value",
          "description": "选中值"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/navigation"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/navigation.ts"
        }
      ]
    },
    {
      "name": "s-navigation-item",
      "description": "**导航栏子项 Navigation Item**\n\n导航项组件，作为 `s-navigation` 组件的子组件。\n\n**属性:**\n\n- `selected` (`boolean`): 是否选中，默认值为 `false`。\n- `value` (`string`): 选中项的值。\n\n**插槽:**\n\n- `icon`: 图标\n- `text`: 文本\n- `badge`: 徽章\n\n**事件:**\n\n- `click`: 点击后触发。",
      "attributes": [
        {
          "name": "selected",
          "description": "是否选中，默认值为 `false`。",
          "valueSet": "boolean"
        },
        {
          "name": "value",
          "description": "选中项的值。",
          "valueSet": "string"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/navigation"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/navigation-item.ts"
        }
      ]
    },
    {
      "name": "s-appbar",
      "description": "**应用栏 Appbar**\n\nAppbar 的表现更像一个容器，它没有事件和行为。\n\n在屏幕宽度小于 **840px** 时，它的高度会变为 **56px**。\n\n支持导航、标题和操作按钮的插槽。\n\n你可以嵌套该组件，内部的 Appbar 会居中并且设置一个最大宽度，默认为 **1280px**。\n\n```html\n<s-appbar>\n  <!--左侧菜单按钮-->\n  <s-icon-button slot=\"navigation\">\n    <s-icon type=\"menu\"></s-icon>\n  </s-icon-button>\n  <!--标题-->\n  <div slot=\"headline\"> Title </div>\n  <!--右侧操作按钮-->\n  <s-icon-button slot=\"action\">\n    <s-icon type=\"search\"></s-icon>\n  </s-icon-button>\n</s-appbar>\n```\n\n**插槽:**\n- `navigation`: 导航\n- `headline`: 标题\n- `action`: 操作",
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/appbar"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/appbar.ts"
        }
      ]
    },
    {
      "name": "s-dialog",
      "description": "**对话框 Dialog**\n\nDialog 对话框组件用于显示重要信息或提示。\n\n```html\n<s-dialog>\n  <s-button slot=\"trigger\"> dialog </s-button>\n  <div slot=\"headline\"> Title </div>\n  <div slot=\"text\">问人生、头白京国，算来何事消得。不如罨画清溪上，蓑笠扁舟一只。人不识，且笑煮、鲈鱼趁著莼丝碧。无端酸鼻，向岐路消魂，征轮驿骑，断雁西风急。英雄辈，事业东西南北。临风因甚泣。酬知有愿频挥手，零雨凄其此日。休太息，须信道、诸公衮衮皆虚掷。年来踪迹。有多少雄心，几翻恶梦，泪点霜华织。</div>\n  <s-button slot=\"action\" type=\"text\">取消</s-button>\n  <s-button slot=\"action\" type=\"text\">确定</s-button>\n</s-dialog>\n```\n\n**属性:**\n\n- `size` (`string`): 对话框尺寸，可选值为 `basic` (普通), `full` (全屏)\n\n**事件:**\n\n- `show`: 对话框开始显示时触发\n- `showed`: 对话框显示后触发（动画结束）\n- `dismiss`: 对话框开始隐藏时触发\n- `dismissed`: 对话框隐藏后触发（动画结束）\n\n**插槽:**\n- `trigger`: 触发器\n- `headline`: 标题\n- `text`: 文本内容\n- `action`: 操作按钮",
      "attributes": [
        {
          "name": "size",
          "description": "对话框尺寸，可选值为 `basic` (普通), `full` (全屏)",
          "values": [
            {
              "name": "basic",
              "description": "普通"
            },
            {
              "name": "full",
              "description": "全屏"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/dialog"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/dialog.ts"
        }
      ]
    },
    {
      "name": "s-popup",
      "description": "**弹出框 Popup**\n\nPopup 弹出框组件用于展示临时内容或提示信息。支持通过不同方式触发，并且可以设置默认位置。\n\n```html\n<s-popup>\n  <s-button slot=\"trigger\"> popup </s-button>\n  <div style=\"min-height: 280px\">\n    弹出框\n  </div>\n</s-popup>\n\n<s-popup showalign=\"right\">\n  <s-button slot=\"trigger\"> popup </s-button>\n  <div style=\"min-height: 280px\">\n    弹出框\n  </div>\n</s-popup>\n```\n\n**属性:**\n\n- `showAlign` (`string`): 设置弹出框的默认位置，可选值为 `center`, `left`, `right`。\n\n**插槽:**\n- `trigger`: 触发器",
      "attributes": [
        {
          "name": "showAlign",
          "description": "设置弹出框的默认位置，可选值为 `center`, `left`, `right`",
          "values": [
            {
              "name": "center",
              "description": "居中"
            },
            {
              "name": "left",
              "description": "居左"
            },
            {
              "name": "right",
              "description": "居右"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/popup"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/popup.ts"
        }
      ]
    },
    {
      "name": "s-popup-menu",
      "description": "**弹出式菜单 Popup Menu**\n\nPopupMenu 弹出菜单组件用于在指定元素位置显示菜单项。支持动态调用和子菜单的复杂布局。\n\n```html\n<s-popup-menu>\n  <s-button slot=\"trigger\">菜单</s-button>\n  <s-popup-menu-item>选项1</s-popup-menu-item>\n  <s-popup-menu-item>选项2</s-popup-menu-item>\n  <s-popup-menu-item>选项3</s-popup-menu-item>\n  <s-popup-menu-item>选项4</s-popup-menu-item>\n  <s-popup-menu-item>选项5</s-popup-menu-item>\n</s-popup-menu>\n\n<!--调用按钮-->\n<s-button onclick=\"document.querySelector('#menu').show(this)\"> 动态调用 </s-button>\n<!--菜单-->\n<s-popup-menu id=\"menu\">\n  <s-popup-menu-item>选项1</s-popup-menu-item>\n  <s-popup-menu-item>选项2</s-popup-menu-item>\n  <s-popup-menu-item>选项3</s-popup-menu-item>\n  <s-popup-menu-item>选项4</s-popup-menu-item>\n  <s-popup-menu-item>选项5</s-popup-menu-item>\n</s-popup-menu>\n```\n\n**属性:**\n\n- `group` (`string`): 分组，值为 `start` 或 `end`\n- `show()` _[只读]_ (`Function`): 显示对话框\n- `dismiss()` _[只读]_ (`Function`): 隐藏对话框\n- `toggle()` _[只读]_ (`Function`): 切换抽屉\n\n**插槽:**\n- `trigger`: 触发器",
      "attributes": [
        {
          "name": "group",
          "description": "分组，值为 `start` 或 `end`",
          "values": [
            {
              "name": "start",
              "description": "开始"
            },
            {
              "name": "end",
              "description": "结束"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/popup-menu"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/popup-menu.ts"
        }
      ]
    },
    {
      "name": "s-popup-menu-item",
      "description": "**弹出式菜单子项 Popup Menu Item**\n\n作为 Popup Menu 的子项使用。\n\n**插槽:**\n\n- `start`: 开始\n- `end`: 结束",
      "attributes": [],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/popup-menu"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/popup-menu.ts"
        }
      ]
    },
    {
      "name": "s-bottom-sheet",
      "description": "**底部面板 Bottom Sheet**\n\nBottom Sheet 组件用于在页面底部显示额外内容，通常作为其他组件的插槽使用。\n\n```html\n<s-bottom-sheet>\n  <s-button slot=\"trigger\"> Bottom Sheet </s-button>\n  <div style=\"padding: 24px\">...</div>\n</s-bottom-sheet>\n```\n\n**插槽:**\n- `trigger`: 触发器",
      "attributes": [],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/bottom-sheet"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/bottom-sheet.ts"
        }
      ]
    },
    {
      "name": "s-snackbar",
      "description": "**提示框 Snackbar**\n\nSnackbar 提示框组件用于显示临时消息。支持通过触发器显示和关闭，并且可以配置动作按钮。\n\n```html\n<s-snackbar>\n  <s-button slot=\"trigger\"> Snackbar </s-button>\n  Snackbar Message\n  <s-button type=\"text\" slot=\"action\"> 关闭 </s-button>\n</s-snackbar>\n```\n\n**属性:**\n\n- `type`: 样式\n- `action` (`string`): 操作按钮文本\n\n**事件:**\n\n- `show`: 提示框显示时触发\n- `showed`: 提示框显示后触发（动画结束）\n- `dismiss`: 提示框开始隐藏时触发\n- `dismissed`: 提示框隐藏后触发（动画结束）\n\n**插槽:**\n- `trigger`: 触发器",
      "attributes": [
        {
          "name": "type",
          "description": "样式，值为 `basic` 或 `error`",
          "values": [
            {
              "name": "basic",
              "description": "普通类型"
            },
            {
              "name": "error",
              "description": "错误类型"
            }
          ]
        },
        {
          "name": "action",
          "description": "操作按钮文本"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/snackbar"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/snackbar.ts"
        }
      ]
    },
    {
      "name": "s-tooltip",
      "description": "**工具提示 Tooltip**\n\nTooltip 提示信息组件用于在支持鼠标的设备上通过鼠标悬停触发提示信息，在触屏设备上通过长按触发。\n\n```html\n<s-tooltip>\n  <s-button slot=\"trigger\">Tooltip</s-button>\n  提示信息\n</s-tooltip>\n```\n\n工具提示支持自定义布局，例如放置图片，但请注意，无论你放置什么布局，都无法触发任何事件。\n\n**插槽:**\n- `trigger`: 触发器",
      "attributes": [],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/tooltip"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/tooltip.ts"
        }
      ]
    },
    {
      "name": "s-badge",
      "description": "**徽章 Badge**\n\nBadge 徽章组件用于显示数字或状态标识，通常用于其他组件的插槽中。\n\n```html\n<s-badge></s-badge>\n<s-badge>26</s-badge>\n```",
      "attributes": [],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/badge"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/badge.ts"
        }
      ]
    },
    {
      "name": "s-chip",
      "description": "**纸片 Chip**\n\nChip 组件用于显示标签或可交互的元素。\n\n```html\n<s-chip>Chip1</s-chip>\n<s-chip type=\"filled-tonal\">Chip2</s-chip>\n<s-chip type=\"elevated\">\n  Chip3\n  <!--操作按钮-->\n  <s-icon-button slot=\"action\">\n    <s-icon type=\"close\"></s-icon>\n  </s-icon-button>\n</s-chip>\n```\n\n**属性:**\n\n- `type` (`string`): 纸片样式，可选值为 `outlined`, `elevated`, `filled-tonal`\n- `selectable` (`boolean`): 是否启用选中，默认值为 `false`\n\n**插槽:**\n- `start`: 开始\n- `end`: 结束\n- `action`: 操作",
      "attributes": [
        {
          "name": "type",
          "description": "纸片样式，可选值为 `outlined`, `elevated`, `filled-tonal`，默认值为 `outlined`",
          "values": [
            {
              "name": "outlined",
              "description": "带有边框的纸片"
            },
            {
              "name": "elevated",
              "description": "带有阴影的纸片"
            },
            {
              "name": "filled-tonal",
              "description": "带有背景色的纸片"
            }
          ]
        },
        {
          "name": "selectable",
          "description": "是否启用选中，默认值为 `false`",
          "valueSet": "boolean"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/chip"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/chip.ts"
        }
      ]
    },
    {
      "name": "s-table",
      "description": "**表格 Table**\n\nTable 表格组件用于显示结构化的数据。\n\n```html\n<s-table>\n  <s-thead>\n    <s-tr>\n      <s-th>title1</s-th>\n      <s-th>title2</s-th>\n      <s-th>title3</s-th>\n      <s-th>title4</s-th>\n      <s-th>title5</s-th>\n    </s-tr>\n  </s-thead>\n  <s-tbody>\n    <s-tr>\n      <s-td>item1</s-td>\n      <s-td>item2</s-td>\n      <s-td>item3</s-td>\n      <s-td>item4</s-td>\n      <s-td>item5</s-td>\n    </s-tr>\n    </s-tbody>\n</s-table>\n```\n\n**插槽:**\n- `thead`: 表头\n- `tbody`: 表身\n- `tr`: 表格行\n- `th`: 表格头\n- `td`: 表格数据",
      "attributes": [],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/table"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/table.ts"
        }
      ]
    },
    {
      "name": "s-field",
      "description": "**字段框 Field**\n\n这是一个容器组件，通常用于提供表单输入框的样式包装。它支持多个 CSS 变量和自定义槽位，特别适用于移动端界面。\n\n```html\n<s-field>\n  <div slot=\"label\">请输入</div>\n  <div slot=\"view\">View content here</div>\n</s-field>\n```\n\n**属性:**\n\n- `focused` (`boolean`): 是否聚焦，默认值为 `false`\n- `labelFixed` (`boolean`): 固定Label，默认值为 `true`\n\n**插槽:**\n- `label`: Label 区域\n- `view`: 主视图区域\n\n**CSS 变量:**\n\n- `--field-border-radius`: 圆角 (默认: 4px)\n- `--field-border-width`: 边框宽度 (默认: `1px`)\n- `--field-border-color`: 边框颜色 (默认: `var(--s-color-outline, #777680)`)\n- `--field-padding`: 内边距 (默认: `16px`)\n- `--field-focused-border-width`: 聚焦时的边框宽度 (默认: `2px`)",
      "attributes": [
        {
          "name": "focused",
          "description": "是否聚焦",
          "valueSet": "boolean"
        },
        {
          "name": "labelFixed",
          "description": "是否固定标签",
          "valueSet": "boolean"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/field"
        }
      ]
    },
    {
      "name": "s-menu",
      "description": "**菜单 Menu**\n\n这是一个菜单容器组件，通常用于定义导航栏或侧边栏。支持多个 CSS 变量和自定义插槽，适用于桌面端和移动端界面。\n\n```html\n<s-menu>\n  <div slot=\"label\">控制台</div>\n  <s-menu-item checked=\"true\">\n    <s-icon slot=\"start\" type=\"home\"></s-icon>\n    首页\n  </s-menu-item>\n  <s-menu-item>\n    <s-icon slot=\"start\" type=\"search\"></s-icon>\n    用户\n    <s-icon slot=\"end\" type=\"arrow_drop_right\"></s-icon>\n  </s-menu-item>\n  <s-menu-item>\n    <s-icon slot=\"start\" type=\"light_mode\"></s-icon>\n    管理资源\n  </s-menu-item>\n  <s-menu-item>\n    <s-icon slot=\"start\" type=\"dark_mode\"></s-icon>\n    模式切换\n  </s-menu-item>\n</s-menu>\n```\n\n**插槽:**\n- `label`: 用于放置菜单标签的区域\n\n**CSS 变量:**\n\n- `--menu-bg-color`: 菜单背景色 (默认: `#1e1e1e`)\n- `--menu-item-color`: 菜单项文字颜色 (默认: `#ffffff`)\n- `--menu-item-hover-bg-color`: 菜单项悬停背景色 (默认: `#333`)\n- `--menu-icon-size`: 图标大小 (默认: `24px`)\n",
      "attributes": [
        {
          "name": "checked",
          "description": "是否选中菜单项",
          "valueSet": "boolean"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/menu"
        }
      ]
    },
    {
      "name": "s-menu-item",
      "description": "**菜单子项 Menu Item**\n\n作为 Menu 的子项使用。\n\n**属性:**\n\n- `selected` (`boolean`): 菜单项是否选中，默认值为 `false`\n\n**插槽:**\n\n- `start`: 开始位置（用于放置图标）\n- `end`: 结束位置（用于放置图标）",
      "attributes": [
        {
          "name": "selected",
          "description": "是否选中菜单项，默认值为 `false`",
          "valueSet": "boolean"
        }
      ],
      "references": [
        {
          "name": "文档",
          "url": "https://soberjs.com/component/popup-menu"
        },
        {
          "name": "源代码",
          "url": "https://github.com/apprat/sober/blob/main/src/popup-menu.ts"
        }
      ]
    }
  ],
  "valueSets": [
    {
      "name": "boolean",
      "values": [
        {
          "name": "true"
        },
        {
          "name": "false"
        }
      ]
    }
  ]
}