Browse Source

[doc]Update for stdf@0.5.0

dufu1991 2 years ago
parent
commit
eda8d67a2a
40 changed files with 154 additions and 58 deletions
  1. 2 0
      doc/components/avatar/guide.md
  2. 2 0
      doc/components/avatar/guide_en.md
  3. 2 0
      doc/components/cell/guide.md
  4. 2 0
      doc/components/cell/guide_en.md
  5. 2 0
      doc/components/checkbox/guide.md
  6. 2 0
      doc/components/checkbox/guide_en.md
  7. 1 29
      doc/components/icon/guide.md
  8. 1 29
      doc/components/icon/guide_en.md
  9. 2 0
      doc/components/input/guide.md
  10. 2 0
      doc/components/input/guide_en.md
  11. 2 0
      doc/components/navBar/guide.md
  12. 2 0
      doc/components/navBar/guide_en.md
  13. 2 0
      doc/components/noticeBar/guide.md
  14. 2 0
      doc/components/noticeBar/guide_en.md
  15. 2 0
      doc/components/numKeyboard/guide.md
  16. 2 0
      doc/components/numKeyboard/guide_en.md
  17. 2 0
      doc/components/pagination/guide.md
  18. 2 0
      doc/components/pagination/guide_en.md
  19. 2 0
      doc/components/radio/guide.md
  20. 2 0
      doc/components/radio/guide_en.md
  21. 2 0
      doc/components/rate/guide.md
  22. 2 0
      doc/components/rate/guide_en.md
  23. 2 0
      doc/components/skeleton/guide.md
  24. 2 0
      doc/components/skeleton/guide_en.md
  25. 0 0
      doc/components/stepper/FAQ.md
  26. 0 0
      doc/components/stepper/FAQ_en.md
  27. 28 0
      doc/components/stepper/api.md
  28. 28 0
      doc/components/stepper/api_en.md
  29. 17 0
      doc/components/stepper/guide.md
  30. 17 0
      doc/components/stepper/guide_en.md
  31. 0 0
      doc/components/stepper/version.md
  32. 0 0
      doc/components/stepper/version_en.md
  33. 2 0
      doc/components/toast/guide.md
  34. 2 0
      doc/components/toast/guide_en.md
  35. 4 0
      doc/guide/changelog.md
  36. 4 0
      doc/guide/changelog_en.md
  37. 1 0
      doc/guide/future.md
  38. 1 0
      doc/guide/future_en.md
  39. 2 0
      doc/guide/icon.md
  40. 2 0
      doc/guide/icon_en.md

+ 2 - 0
doc/components/avatar/guide.md

@@ -1,3 +1,5 @@
+> Avatar 使用了图标 ri-user-3-line 和 ri-user-add-line,请确保项目的 symbol.svg 文件中包含这些图标。详细信息请参考 [STDF-指南-图标](https://stdf.design/#/guide/icon)。
+
 ## 内容说明
 
 image 可以传入图片的相对路径或绝对路径,组件内部将其转换为 img 标签的 src 属性;alt 传入文字将直接显示;icon 传入 Icon Props 将使用 Icon 组件渲染头像框内容,请参考 Icon API;若 image、alt、icon 都不传,Avatar 组件会默认使用 Icon 组件显示一个用户图标。

+ 2 - 0
doc/components/avatar/guide_en.md

@@ -1,3 +1,5 @@
+> Avatar uses the icons ri-user-3-line and ri-user-add-line, please ensure that the symbol.svg file in your project includes these icons. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+
 ## Description
 
 The `Avatar` component can receive a relative or absolute path for `image`, which will be converted to the `src` attribute of the `img` tag inside the component. If `alt` is passed in, it will be displayed as text. If `icon` is passed in as `Icon Props`, the `Icon` component will be used to render the contents of the avatar. If none of `image`, `alt`, and `icon` are passed in, the `Avatar` component will default to using the `Icon` component to display a user icon.

+ 2 - 0
doc/components/cell/guide.md

@@ -1,3 +1,5 @@
+> Cell 使用了图标 ri-arrow-right-s-line,请确保项目的 symbol.svg 文件中包含此图标。详细信息请参考 [STDF-指南-图标](https://stdf.design/#/guide/icon)。
+
 ## 说明
 
 组件库开发中满足自定义与上手简单始终是不可兼得的。

+ 2 - 0
doc/components/cell/guide_en.md

@@ -1,3 +1,5 @@
+> Cell uses the icon ri-arrow-right-s-line, please ensure that the symbol.svg file in your project includes this icon. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+
 ## Description
 
 It is always difficult to balance customization and ease of use in component library development.

+ 2 - 0
doc/components/checkbox/guide.md

@@ -1,3 +1,5 @@
+> Checkbox 使用了图标 ri-checkbox-fill 和 ri-checkbox-line,请确保项目的 symbol.svg 文件中包含这些图标。详细信息请参考 [STDF-指南-图标](https://stdf.design/#/guide/icon)。
+
 ## 说明
 
 由于移动端横向显示内容有限,CheckboxGroup 默认为纵向布局,横向布局建议只用作简单使用。当选项较多、内容较长或显示内容较多时建议使用纵向布局,当 Checkbox 被点击时,CheckboxGroup 通过 change 事件,可以获取到当前所有选定 Checkbox 的 name 组成的数组。

+ 2 - 0
doc/components/checkbox/guide_en.md

@@ -1,3 +1,5 @@
+> Checkbox uses the icons ri-checkbox-fill and ri-checkbox-line, please ensure that the symbol.svg file in your project includes these icons. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+
 ## Description
 
 Due to limited space for horizontal display on mobile devices, CheckboxGroup is set to vertical layout by default. Horizontal layout should only be used for simple usage. When there are many options, long content, or much display content, vertical layout is recommended. When a checkbox is clicked, CheckboxGroup can obtain an array of names of all currently selected checkboxes through the change event.

+ 1 - 29
doc/components/icon/guide.md

@@ -20,35 +20,7 @@ STDF 部分组件内使用的图标源自 [Remix Icon 图标库](https://remixic
 
 **如果使用这些组件,请确保项目的 symbol.svg 中包含了对应图标。**
 
-具体使用如下:
-
-| 图标名称                      | 所属组件         |
-| ----------------------------- | ---------------- |
-| ri-user-3-line                | Avatar           |
-| ri-user-add-line              | Avatars          |
-| ri-arrow-right-s-line         | Cell / NoticeBar |
-| ri-checkbox-fill              | Checkbox         |
-| ri-checkbox-line              | Checkbox         |
-| ri-close-circle-fill          | Input            |
-| ri-arrow-left-s-line          | NavBar           |
-| ri-volume-down-line           | NoticeBar        |
-| ri-close-line                 | NoticeBar        |
-| ri-delete-back-2-line         | NumKeyboard      |
-| ri-skip-down-line             | NumKeyboard      |
-| ri-more-line                  | Pagination       |
-| ri-more-fill                  | Pagination       |
-| ri-radio-button-line          | Radio            |
-| ri-checkbox-blank-circle-line | Radio            |
-| ri-star-fill                  | Rate             |
-| ri-image-2-fill               | Skeleton         |
-| ri-movie-2-fill               | Skeleton         |
-| ri-code-box-fill              | Skeleton         |
-| ri-qr-code-fill               | Skeleton         |
-| ri-barcode-fill               | Skeleton         |
-| ri-checkbox-circle-line       | Toast            |
-| ri-close-circle-line          | Toast            |
-| ri-error-warning-line         | Toast            |
-| ri-information-line           | Toast            |
+具体请参考 [STDF-指南-图标](https://stdf.design/#/guide/icon)。
 
 可到 `node_modules/stdf/assets/svg_base/` 查看这些图标的 SVG 源文件。
 

+ 1 - 29
doc/components/icon/guide_en.md

@@ -20,35 +20,7 @@ Some of the icons used in STDF components are sourced from [Remix Icon Library](
 
 **If you are using these components, please make sure that the `symbol.svg` file in your project includes the corresponding icons.**
 
-Here are the icons and their corresponding components:
-
-| Icon Name                     | Component        |
-| ----------------------------- | ---------------- |
-| ri-user-3-line                | Avatar           |
-| ri-user-add-line              | Avatars          |
-| ri-arrow-right-s-line         | Cell / NoticeBar |
-| ri-checkbox-fill              | Checkbox         |
-| ri-checkbox-line              | Checkbox         |
-| ri-close-circle-fill          | Input            |
-| ri-arrow-left-s-line          | NavBar           |
-| ri-volume-down-line           | NoticeBar        |
-| ri-close-line                 | NoticeBar        |
-| ri-delete-back-2-line         | NumKeyboard      |
-| ri-skip-down-line             | NumKeyboard      |
-| ri-more-line                  | Pagination       |
-| ri-more-fill                  | Pagination       |
-| ri-radio-button-line          | Radio            |
-| ri-checkbox-blank-circle-line | Radio            |
-| ri-star-fill                  | Rate             |
-| ri-image-2-fill               | Skeleton         |
-| ri-movie-2-fill               | Skeleton         |
-| ri-code-box-fill              | Skeleton         |
-| ri-qr-code-fill               | Skeleton         |
-| ri-barcode-fill               | Skeleton         |
-| ri-checkbox-circle-line       | Toast            |
-| ri-close-circle-line          | Toast            |
-| ri-error-warning-line         | Toast            |
-| ri-information-line           | Toast            |
+Please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon) for details.
 
 You can find the SVG source files for these icons in `node_modules/stdf/assets/svg_base/`.
 

+ 2 - 0
doc/components/input/guide.md

@@ -1,3 +1,5 @@
+> Input 使用了图标 ri-close-circle-fill ,请确保项目的 symbol.svg 文件中包含此图标。详细信息请参考 [STDF-指南-图标](https://stdf.design/#/guide/icon)。
+
 ## title 与 placeholder
 
 如果传入了 title 而未传入 placeholder,Input 组件内部使用”请输入+title“作为默认 placeholder,**title 和 placeholder 请至少传入一项**。

+ 2 - 0
doc/components/input/guide_en.md

@@ -1,3 +1,5 @@
+> Input uses the icon ri-close-circle-fill, please ensure that the symbol.svg file in your project includes this icon. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+
 ## title and placeholder
 
 If the title is passed in but the placeholder is not, the Input component will use "Please enter + title" as the default placeholder. Both title and placeholder should be passed in at least one.

+ 2 - 0
doc/components/navBar/guide.md

@@ -1,3 +1,5 @@
+> NavBar 使用了图标 ri-arrow-left-s-line,请确保项目的 symbol.svg 文件中包含这些图标。详细信息请参考 [STDF-指南-图标](https://stdf.design/#/guide/icon)。
+
 ## 说明
 
 移动端的 NavBar 一般用于页面顶部显示当前页面与路由跳转操作。STDF 的 NavBar 由左中右三个部分组成,且每个部分都支持插槽渲染,而最外层元素的 Class 支持 injClass(class 注入)。

+ 2 - 0
doc/components/navBar/guide_en.md

@@ -1,3 +1,5 @@
+> NavBar uses the icon ri-arrow-left-s-line, please ensure that the symbol.svg file in your project includes this icon. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+
 ## Explanation
 
 On mobile devices, the NavBar is generally used to display the current page and to perform routing operations at the top of the page. STDF's NavBar consists of three parts: left, center, and right, and each part supports slot rendering. The class of the outermost element also supports injClass (class injection).

+ 2 - 0
doc/components/noticeBar/guide.md

@@ -1,3 +1,5 @@
+> NoticeBar 使用了图标 ri-volume-down-line 和 ri-close-line,请确保项目的 symbol.svg 文件中包含这些图标。详细信息请参考 [STDF-指南-图标](https://stdf.design/#/guide/icon)。
+
 ## 说明
 
 当横向放置时,不论内容有几条,只要所有内容加上内容之间的间隔长度之和超过容器宽度,NoticeBar 将会自动横向滚动,否则不滚动。

+ 2 - 0
doc/components/noticeBar/guide_en.md

@@ -1,3 +1,5 @@
+> NoticeBar uses the icons ri-volume-down-line and ri-close-line, please ensure that the symbol.svg file in your project includes these icons. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+
 ## Description
 
 When placed horizontally, NoticeBar will automatically scroll horizontally if the total length of the content plus the spacing between each content exceeds the width of the container, otherwise it will not scroll.

+ 2 - 0
doc/components/numKeyboard/guide.md

@@ -1,3 +1,5 @@
+> NumKeyboard 使用了图标 ri-delete-back-2-line 和 ri-skip-down-line,请确保项目的 symbol.svg 文件中包含这些图标。详细信息请参考 [STDF-指南-图标](https://stdf.design/#/guide/icon)。
+
 ## 说明
 
 NumKeyboard 组件是一个虚拟的数字键盘,一般用于输入整数或小数。内部使用了网格布局,布局方式只有 3\*4 或 4\*4 两种,当不显示完成按键时,就只有 3 列,否则就是 4 列。

+ 2 - 0
doc/components/numKeyboard/guide_en.md

@@ -1,3 +1,5 @@
+> NumKeyboard uses the icons ri-delete-back-2-line and ri-skip-down-line, please ensure that the symbol.svg file in your project includes these icons. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+
 ## Description
 
 The NumKeyboard component is a virtual numeric keyboard used for inputting integers or decimals. It uses a grid layout, with two layout options: 3\*4 or 4\*4. If the completion key is not displayed, there will only be 3 columns; otherwise, there will be 4 columns.

+ 2 - 0
doc/components/pagination/guide.md

@@ -1,3 +1,5 @@
+> Pagination 使用了图标 ri-more-line 和 ri-more-fill,请确保项目的 symbol.svg 文件中包含这些图标。详细信息请参考 [STDF-指南-图标](https://stdf.design/#/guide/icon)。
+
 ## 设计思路
 
 私以为,分页不应该是上滑加载下一页,这种交互会让用户无心理预期而产生不适,所以 STDF 的分页组件交互默认满足以下几个条件:

+ 2 - 0
doc/components/pagination/guide_en.md

@@ -1,3 +1,5 @@
+> Pagination uses the icons ri-more-line and ri-more-fill, please ensure that the symbol.svg file in your project includes these icons. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+
 ## Design Concept
 
 In my opinion, pagination should not be based on scrolling up to load the next page. This interaction can cause user uncomfortable as there is no psychological expectation. Therefore, the STDF pagination component meet the following conditions by default:

+ 2 - 0
doc/components/radio/guide.md

@@ -1,3 +1,5 @@
+> Radio 使用了图标 ri-radio-button-line 和 ri-checkbox-blank-circle-line,请确保项目的 symbol.svg 文件中包含这些图标。详细信息请参考 [STDF-指南-图标](https://stdf.design/#/guide/icon)。
+
 ## 说明
 
 由于移动端横向显示内容有限,RadioGroup 默认为纵向布局,横向布局建议只用作简单使用。当选项较多、内容较长或显示内容较多时建议使用纵向布局,

+ 2 - 0
doc/components/radio/guide_en.md

@@ -1,3 +1,5 @@
+> Radio uses the icons ri-radio-button-line and ri-checkbox-blank-circle-line, please ensure that the symbol.svg file in your project includes these icons. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+
 ## Explanation
 
 Due to limited horizontal space on mobile devices, RadioGroup defaults to vertical layout. Horizontal layout is recommended only for simple use cases. When there are many options, long content, or a lot of information to display, a vertical layout is recommended.

+ 2 - 0
doc/components/rate/guide.md

@@ -1,3 +1,5 @@
+> Rate 使用了图标 ri-star-fill,请确保项目的 symbol.svg 文件中包含这些图标。详细信息请参考 [STDF-指南-图标](https://stdf.design/#/guide/icon)。
+
 ## value 与 total 注意事项
 
 1. 传入的 value 不允许大于 total;

+ 2 - 0
doc/components/rate/guide_en.md

@@ -1,3 +1,5 @@
+> Rate uses the icon ri-star-fill, please ensure that the symbol.svg file in your project includes this icon. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+
 ## Notes on value and total
 
 1. The passed-in value cannot be greater than the total;

+ 2 - 0
doc/components/skeleton/guide.md

@@ -1,3 +1,5 @@
+> Skeleton 使用了图标 ri-image-fill、ri-movie-2-fill、ri-code-box-fill、ri-qr-code-fill、ri-barcode-fill,请确保项目的 symbol.svg 文件中包含这些图标。详细信息请参考 [STDF-指南-图标](https://stdf.design/#/guide/icon)。
+
 ## 说明
 
 1. Skeleton 组件并不是必需组件,但它能优化页面加载过程中的视觉效果,进而有效地提升用户体验。

+ 2 - 0
doc/components/skeleton/guide_en.md

@@ -1,3 +1,5 @@
+> Skeleton uses the icon ri-image-fill, ri-movie-2-fill, ri-code-box-fill,ri-qr-code-fill, ri-barcode-fill, please ensure that the symbol.svg file in your project includes these icons. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+
 ## Explanation
 
 1. The Skeleton component is not a mandatory component, but it can optimize the visual effect during the page loading process, thereby effectively improving the user experience.

+ 0 - 0
doc/components/stepper/FAQ.md


+ 0 - 0
doc/components/stepper/FAQ_en.md


+ 28 - 0
doc/components/stepper/api.md

@@ -0,0 +1,28 @@
+## Stepper Props
+
+| 属性            | 类型    | 默认值 | 可选值                    | 必传 | 说明                               |
+| --------------- | ------- | ------ | ------------------------- | ---- | ---------------------------------- |
+| value           | Number  | 10     | -                         | N    | 当前值。                           |
+| min             | Number  | 0      | -                         | N    | 最小值。                           |
+| max             | Number  | 100    | -                         | N    | 最大值。                           |
+| step            | Number  | 1      | -                         | N    | 步长。                             |
+| vertical        | Boolean | false  | -                         | N    | 是否纵向。                         |
+| numberHighlight | Boolean | false  | -                         | N    | 是否强调数字区域。                 |
+| theme           | Boolean | true   | -                         | N    | 强调区域是否是主题色。             |
+| radius          | String  | 'base' | 'none'/'base'/'xl'/'full' | N    | 圆角风格。                         |
+| decimal         | Number  | 0      | -                         | N    | 对内部显示数字保留小数位数。       |
+| async           | Boolean | false  | -                         | N    | 是否异步状态。                     |
+| asyncLoading    | Boolean | false  | -                         | N    | 异步状态时,是否显示内部 Loading。 |
+| loading         | Object  | {}     | 参考 Loading Props        | N    | 异步状态时,Loading 参数。         |
+| padding         | Boolean | true   | -                         | N    | 外部有无 padding。                 |
+| injClassOut     | String  | ''     | Class                     | N    | 外部注入的类。                     |
+| injClassBtn     | String  | ''     | Class                     | N    | 按钮区域注入的类。                 |
+| injClassNum     | String  | ''     | Class                     | N    | 数字区域注入的类。                 |
+
+## Stepper Events
+
+| 名称     | 参数                                     | 描述             |
+| -------- | ---------------------------------------- | ---------------- |
+| change   | event:事件对象,其中 value 表示当前值。 | 当前值。         |
+| decrease | -                                        | 点击减少时触发。 |
+| increase | -                                        | 点击增加时触发。 |

+ 28 - 0
doc/components/stepper/api_en.md

@@ -0,0 +1,28 @@
+## Stepper Props
+
+| Prop Name       | Type    | Default | Optional Values           | Required | Description                                         |
+| --------------- | ------- | ------- | ------------------------- | -------- | --------------------------------------------------- |
+| value           | Number  | 10      | -                         | N        | Current value.                                      |
+| min             | Number  | 0       | -                         | N        | Minimum value.                                      |
+| max             | Number  | 100     | -                         | N        | Maximum value.                                      |
+| step            | Number  | 1       | -                         | N        | Step.                                               |
+| vertical        | Boolean | false   | -                         | N        | Whether to be vertical.                             |
+| numberHighlight | Boolean | false   | -                         | N        | Whether to highlight the number area.               |
+| theme           | Boolean | true    | -                         | N        | Whether the highlighted area is the theme color.    |
+| radius          | String  | 'base'  | 'none'/'base'/'xl'/'full' | N        | Corner style.                                       |
+| decimal         | Number  | 0       | -                         | N        | Number of decimal places for internal display.      |
+| async           | Boolean | false   | -                         | N        | Whether to be asynchronous.                         |
+| asyncLoading    | Boolean | false   | -                         | N        | Whether to show internal Loading when asynchronous. |
+| loading         | Object  | {}      | 参考 Loading Props        | N        | Loading parameters when asynchronous.               |
+| padding         | Boolean | true    | -                         | N        | Whether there is padding outside.                   |
+| injClassOut     | String  | ''      | Class                     | N        | Class for outside.                                  |
+| injClassBtn     | String  | ''      | Class                     | N        | Class for button area.                              |
+| injClassNum     | String  | ''      | Class                     | N        | Class for number area.                              |
+
+## Stepper Events
+
+| Name     | Parameters                                             | Description                          |
+| -------- | ------------------------------------------------------ | ------------------------------------ |
+| change   | event:event object, where value is the current value. | Current value.                       |
+| decrease | -                                                      | Triggered when clicking to decrease. |
+| increase | -                                                      | Triggered when clicking to increase. |

+ 17 - 0
doc/components/stepper/guide.md

@@ -0,0 +1,17 @@
+> Stepper 使用了图标 ri-subtract-line、ri-add-line,请确保项目的 symbol.svg 文件中包含这些图标。详细信息请参考 [STDF-指南-图标](https://stdf.design/#/guide/icon)。
+
+## 使用场景
+
+Stepper 组件一般用于需要对数据进行逐步增减操作的场景,比如商品数量选择、积分加减、进度条等,如果数据量调整较大,建议使用 NumKeyboard 或 Input 组件。
+
+## 异步状态
+
+Stepper 组件支持异步状态,一般用于与服务端交互过程中更加合理地显示 Stepper 的值。通过设置 async 属性开启,此时可通过 asyncLoading 属性设置内部是否显示 Loading 状态,当然也可以自由设置 Loading 的显示位置和方式,请参考示例。
+
+异步状态时为防止用户误触,增减按钮将会自动禁用,直到异步状态结束。
+
+## CSS 注入
+
+通过 injClass 参数可以分别向组件的外部、增减按钮、数字区域注入 CSS 名称(不仅限于 Tailwind CSS),这将使组件样式有更多自定义可能性,示例中通过注入实现了自定义不同位置的样式。
+
+若注入的 class 没生效,请在注入的 class 名称前添加“!” ,可参考 [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier)。

+ 17 - 0
doc/components/stepper/guide_en.md

@@ -0,0 +1,17 @@
+> Stepper uses the icon ri-subtract-line、ri-add-line, please ensure that the symbol.svg file in your project includes these icons. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+
+## Usage scenarios
+
+The Stepper component is generally used in scenarios where data needs to be incrementally increased or decreased, such as selecting the quantity of goods, adding or subtracting points, progress bars, etc. If there are significant adjustments to the data volume, it is recommended to use the NumKeyboard or Input components.
+
+## Async State
+
+The Stepper component supports asynchronous state, generally used to display the Stepper's value more reasonably during interactions with the server. It can be enabled by setting the async property. At this time, you can use the asyncLoading property to set whether to display the Loading state internally. Of course, you can also freely set the display position and method of Loading. Please refer to the example.
+
+To prevent accidental user touches during the asynchronous state, the increase and decrease buttons will be automatically disabled until the asynchronous state ends.
+
+## CSS Injection
+
+The injClass parameter allows you to inject CSS class names (not limited to Tailwind CSS) into different parts of the component: the outer container, the increase/decrease buttons, and the number area. This provides more possibilities for customizing the component's style. In the example, custom styles for different positions are implemented through injection.
+
+If the injected class doesn't take effect, try adding "!" before the class name. You can refer to [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier) for more information.

+ 0 - 0
doc/components/stepper/version.md


+ 0 - 0
doc/components/stepper/version_en.md


+ 2 - 0
doc/components/toast/guide.md

@@ -1,3 +1,5 @@
+> Toast 使用了图标 ri-checkbox-circle-line、ri-close-circle-line、ri-error-warning-line、ri-information-line,请确保项目的 symbol.svg 文件中包含这些图标。详细信息请参考 [STDF-指南-图标](https://stdf.design/#/guide/icon)。
+
 ## 显示位置
 
 提示默认显示在屏幕中央,也可以通过 `position` 属性设置显示位置,当 position 为 `top` 或 `bottom` 时,可以通过 `py` 属性设置距离顶部或底部的距离。

+ 2 - 0
doc/components/toast/guide_en.md

@@ -1,3 +1,5 @@
+> Toast uses the icon ri-checkbox-circle-line、ri-close-circle-line、ri-error-warning-line、ri-information-line, please ensure that the symbol.svg file in your project includes these icons. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+
 ## Display position
 
 The toast is displayed in the center of the screen by default, but you can set its position by using the `position` property. When `position` is set to `top` or `bottom`, you can use the `py` property to set the distance from the top or bottom.

+ 4 - 0
doc/guide/changelog.md

@@ -1,3 +1,7 @@
+## 0.5.0 <font size=1>2024-09-09</font>
+
+- 新增 Stepper 组件,详见 [Stepper](https://stdf.design/#/components?nav=stepper&tab=0)。
+
 ## 0.4.7 <font size=1>2024-08-12</font>
 
 - 修复 Pagination 组件,详见 [Pagination](https://stdf.design/#/components?nav=pagination&tab=4)。

+ 4 - 0
doc/guide/changelog_en.md

@@ -1,3 +1,7 @@
+## 0.5.0 <font size=1>2024-09-09</font>
+
+- Added Stepper component, please see [Stepper](https://stdf.design/#/components?nav=stepper&tab=0).
+
 ## 0.4.7 <font size=1>2024-08-12</font>
 
 - Fixed Pagination component, please see [Pagination](https://stdf.design/#/components?nav=pagination&tab=4).

+ 1 - 0
doc/guide/future.md

@@ -7,6 +7,7 @@
 - [x] 开发一款模板脚手架,支持按照配置初始使用 STDF 的工程,初步考虑支持 Vite、SvelteKit。
 - [x] 新增 NumKeyboard-数字键盘组件,一般用于输入数字。
 - [x] 新增 Pagination-分页组件。
+- [x] 新增 Stepper-步进器组件。
 
 ---
 

+ 1 - 0
doc/guide/future_en.md

@@ -7,6 +7,7 @@
 - [x] Develop a template scaffold that supports initializing STDF projects according to configuration. Initial support for Vite and SvelteKit.
 - [x] Add NumKeyboard component, which is generally used for entering numbers.
 - [x] Added Pagination component.
+- [x] Added Stepper component.
 
 ---
 

+ 2 - 0
doc/guide/icon.md

@@ -45,6 +45,8 @@ STDF 部分组件内使用的图标源自 [Remix Icon 图标库](https://remixic
 | ri-code-box-fill              | Skeleton         |
 | ri-qr-code-fill               | Skeleton         |
 | ri-barcode-fill               | Skeleton         |
+| ri-add-line                   | Stepper          |
+| ri-subtract-line              | Stepper          |
 | ri-checkbox-circle-line       | Toast            |
 | ri-close-circle-line          | Toast            |
 | ri-error-warning-line         | Toast            |

+ 2 - 0
doc/guide/icon_en.md

@@ -45,6 +45,8 @@ Here are the icons and their corresponding components:
 | ri-code-box-fill              | Skeleton         |
 | ri-qr-code-fill               | Skeleton         |
 | ri-barcode-fill               | Skeleton         |
+| ri-add-line                   | Stepper          |
+| ri-subtract-line              | Stepper          |
 | ri-checkbox-circle-line       | Toast            |
 | ri-close-circle-line          | Toast            |
 | ri-error-warning-line         | Toast            |