Ver código fonte

[doc]Update for v0.4.3

dufu1991 2 anos atrás
pai
commit
ec01614edb

+ 15 - 21
doc/components/tabs/api.md

@@ -5,7 +5,7 @@
 | tab        | Object  | {}     | Tab Props                     | Y    | 传入 Tab Props,作用于内部 Tab 组件。    |
 | active     | Number  | 0      | -                             | N    | 激活的选项卡索引值。                     |
 | duration   | String  | 'base' | 'fast'/'base'/'slow'/'slower' | N    | 过渡动画快慢。                           |
-| placement  | String  | 't'    | 't'/'b'/'l'/'r'               | N    | 选项卡位置,对应 Tab Props 的 duration。 |
+| position   | String  | 't'    | 't'/'b'/'l'/'r'               | N    | 选项卡位置,对应 Tab Props 的 duration。 |
 | transition | Boolean | true   | true/false                    | N    | 是否使用过渡动画。                       |
 
 ## Tabs Events
@@ -20,28 +20,22 @@
 | ---- | --------------- |
 | -    | Tabs 主体内容。 |
 
-## Tabs Events
-
-| 名称   | 说明                |
-| ------ | ------------------- |
-| active | 激活的 Tab 索引值。 |
-
 ## Tab Props
 
-| 属性              | 类型    | 默认值 | 可选值                                     | 必传 | 说明                                           |
-| ----------------- | ------- | ------ | ------------------------------------------ | ---- | ---------------------------------------------- |
-| labels            | Array   | []     | -                                          | Y    | 选项卡内容组,由 text 和 Icon Props 组成。     |
-| active            | Number  | 0      | -                                          | N    | 激活的选项卡索引值。                           |
-| lineType          | Boolean | false  | true/false                                 | N    | 是否使用线性风格。                             |
-| radius            | String  | 'base' | 'none'/'base'/'xl'/'full'                  | N    | 圆角风格。                                     |
-| mx                | String  | '4'    | '0'/'1'/'2'/'3'/'4'/'6'/'8'/'12'/'16'/'20' | N    | 左右间距。                                     |
-| duration          | String  | 'base' | 'fast'/'base'/'slow'/'slower'              | N    | 过渡动画快慢。                                 |
-| layout            | String  | 'h'    | 'h'/'v'                                    | N    | 水平或垂直布局,对应 Tabs Props 的 placement。 |
-| love              | Boolean | false  | true/false                                 | N    | 是否开启关爱版。                               |
-| injClass          | String  | ''     | -                                          | N    | Tab 外层注入 CSS。                             |
-| tabInjClass       | String  | ''     | -                                          | N    | 单项 Tab 注入 CSS。                            |
-| activeTabInjClass | String  | ''     | -                                          | N    | 激活的 Tab 注入 CSS。                          |
-| activeInjClass    | String  | ''     | -                                          | N    | 指示器注入 CSS。                               |
+| 属性              | 类型    | 默认值 | 可选值                                     | 必传 | 说明                                          |
+| ----------------- | ------- | ------ | ------------------------------------------ | ---- | --------------------------------------------- |
+| labels            | Array   | []     | -                                          | Y    | 选项卡内容组,由 text 和 Icon Props 组成。    |
+| active            | Number  | 0      | -                                          | N    | 激活的选项卡索引值。                          |
+| lineType          | Boolean | false  | true/false                                 | N    | 是否使用线性风格。                            |
+| radius            | String  | 'base' | 'none'/'base'/'xl'/'full'                  | N    | 圆角风格。                                    |
+| mx                | String  | '2'    | '0'/'1'/'2'/'3'/'4'/'6'/'8'/'12'/'16'/'20' | N    | 左右间距。                                    |
+| duration          | String  | 'base' | 'fast'/'base'/'slow'/'slower'              | N    | 过渡动画快慢。                                |
+| layout            | String  | 'h'    | 'h'/'v'                                    | N    | 水平或垂直布局,对应 Tabs Props 的 position。 |
+| love              | Boolean | false  | true/false                                 | N    | 是否开启关爱版。                              |
+| injClass          | String  | ''     | -                                          | N    | Tab 外层注入 CSS。                            |
+| tabInjClass       | String  | ''     | -                                          | N    | 单项 Tab 注入 CSS。                           |
+| activeTabInjClass | String  | ''     | -                                          | N    | 激活的 Tab 注入 CSS。                         |
+| activeInjClass    | String  | ''     | -                                          | N    | 指示器注入 CSS。                              |
 
 ## Tab Events
 

+ 15 - 21
doc/components/tabs/api_en.md

@@ -5,7 +5,7 @@
 | tab        | Object  | {}      | Tab Props                     | Yes      | Pass in the Tab Props, which applies to the internal Tab component. |
 | active     | Number  | 0       | -                             | No       | Index value of the active Tab.                                      |
 | duration   | String  | 'base'  | 'fast'/'base'/'slow'/'slower' | No       | Transition animation speed.                                         |
-| placement  | String  | 't'     | 't'/'b'/'l'/'r'               | No       | Tab position corresponds to duration in Tab Props.                  |
+| position   | String  | 't'     | 't'/'b'/'l'/'r'               | No       | Tab position corresponds to duration in Tab Props.                  |
 | transition | Boolean | true    | true/false                    | No       | Whether to use transition animations.                               |
 
 ## Tabs Events
@@ -20,28 +20,22 @@
 | ---- | --------------------- |
 | -    | Main content of Tabs. |
 
-## Tabs Events
-
-| Name   | Description                    |
-| ------ | ------------------------------ |
-| active | Index value of the active Tab. |
-
 ## Tab Props
 
-| Prop Name         | Type    | Default | Options                                    | Required | Description                                                              |
-| ----------------- | ------- | ------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------ |
-| labels            | Array   | []      | -                                          | Yes      | An array of tab content, consisting of text and Icon Props.              |
-| active            | Number  | 0       | -                                          | No       | Index value of the active Tab.                                           |
-| lineType          | Boolean | false   | true/false                                 | No       | Whether to use linear style.                                             |
-| radius            | String  | 'base'  | 'none'/'base'/'xl'/'full'                  | No       | Corner style.                                                            |
-| mx                | String  | '4'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'/'12'/'16'/'20' | No       | Horizontal margin.                                                       |
-| duration          | String  | 'base'  | 'fast'/'base'/'slow'/'slower'              | No       | Transition animation speed.                                              |
-| layout            | String  | 'h'     | 'h'/'v'                                    | No       | Horizontal or vertical layout, corresponding to placement in Tabs Props. |
-| love              | Boolean | false   | true/false                                 | No       | Whether to enable Love Edition.                                          |
-| injClass          | String  | ''      | -                                          | No       | Inject CSS to wrap the Tabs.                                             |
-| tabInjClass       | String  | ''      | -                                          | No       | Inject CSS for individual Tabs.                                          |
-| activeTabInjClass | String  | ''      | -                                          | No       | Inject CSS for active Tab.                                               |
-| activeInjClass    | String  | ''      | -                                          | No       | Inject CSS for indicator.                                                |
+| Prop Name         | Type    | Default | Options                                    | Required | Description                                                             |
+| ----------------- | ------- | ------- | ------------------------------------------ | -------- | ----------------------------------------------------------------------- |
+| labels            | Array   | []      | -                                          | Yes      | An array of tab content, consisting of text and Icon Props.             |
+| active            | Number  | 0       | -                                          | No       | Index value of the active Tab.                                          |
+| lineType          | Boolean | false   | true/false                                 | No       | Whether to use linear style.                                            |
+| radius            | String  | 'base'  | 'none'/'base'/'xl'/'full'                  | No       | Corner style.                                                           |
+| mx                | String  | '2'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'/'12'/'16'/'20' | No       | Horizontal margin.                                                      |
+| duration          | String  | 'base'  | 'fast'/'base'/'slow'/'slower'              | No       | Transition animation speed.                                             |
+| layout            | String  | 'h'     | 'h'/'v'                                    | No       | Horizontal or vertical layout, corresponding to position in Tabs Props. |
+| love              | Boolean | false   | true/false                                 | No       | Whether to enable Love Edition.                                         |
+| injClass          | String  | ''      | -                                          | No       | Inject CSS to wrap the Tabs.                                            |
+| tabInjClass       | String  | ''      | -                                          | No       | Inject CSS for individual Tabs.                                         |
+| activeTabInjClass | String  | ''      | -                                          | No       | Inject CSS for active Tab.                                              |
+| activeInjClass    | String  | ''      | -                                          | No       | Inject CSS for indicator.                                               |
 
 ## Tab Events
 

+ 3 - 3
doc/components/tabs/guide.md

@@ -6,15 +6,15 @@ Tabs 组件内部使用了 Tab 组件,而 Tabs Props 中的 tab 全部透传
 
 ### 插槽
 
-Tabs Props 的 transition 默认为 true,此时 Tabs 主体内容切换带有过渡效果。而当 transition 为 false,或者 placement 为 'l' 或 'r' 时,Tabs 主体内容将不会有过渡效果,可以通过 Svelte 提供的插槽传值,`let:`指令将当前激活的 Tab 索引值 active 暴露给插槽内部,再结合 TabContent 的 show 控制主体内容的显示与隐藏。通过暴露出的 active,你还可以自由使用其他方式控制主体区域内容的过渡效果。示例中展示了一种方式,请结合具体业务尝试其他切换效果。
+Tabs Props 的 transition 默认为 true,此时 Tabs 主体内容切换带有过渡效果。而当 transition 为 false,或者 position 为 'l' 或 'r' 时,Tabs 主体内容将不会有过渡效果,可以通过 Svelte 提供的插槽传值,`let:`指令将当前激活的 Tab 索引值 active 暴露给插槽内部,再结合 TabContent 的 show 控制主体内容的显示与隐藏。通过暴露出的 active,你还可以自由使用其他方式控制主体区域内容的过渡效果。示例中展示了一种方式,请结合具体业务尝试其他切换效果。
 
 Svelte 插槽传值可参考 [Svelte Slot](https://svelte.dev/docs#template-syntax-slot-slot-key-value)。
 
 ### 选项卡位置
 
-Tabs 通过 placement(t:上、b:下、l:左、r:右)决定选项卡位置,而此参数又决定了其中 Tab 的布局方式 layout(h:水平、v:垂直)。
+Tabs 通过 position(t:上、b:下、l:左、r:右)决定选项卡位置,而此参数又决定了其中 Tab 的布局方式 layout(h:水平、v:垂直)。
 
-<hr>
+---
 
 ## Tab
 

+ 4 - 4
doc/components/tabs/guide_en.md

@@ -6,16 +6,16 @@ The Tabs component internally uses the Tab component, and all tab props in the T
 
 ### Slots
 
-When the `transition` property in the Tabs props is set to `true` (which is the default value), a transition effect is added when switching between Tabs. However, when `transition` is set to false, or when `placement` is set to 'l' or 'r', there will be no transition effect on the Tab contents. In this case, the Svelte slot feature can be used to expose the active Tab index value to the internal contents of the slot using the `let:` directive. You can use TabContent's `show` property to control whether the main content area is displayed or hidden.
+When the `transition` property in the Tabs props is set to `true` (which is the default value), a transition effect is added when switching between Tabs. However, when `transition` is set to false, or when `position` is set to 'l' or 'r', there will be no transition effect on the Tab contents. In this case, the Svelte slot feature can be used to expose the active Tab index value to the internal contents of the slot using the `let:` directive. You can use TabContent's `show` property to control whether the main content area is displayed or hidden.
 By using the active index value exposed through the slot, you can also freely control the transition effects of the main content area in other ways. The example below shows one way to do this, but you can try other transition effects based on your specific business requirements.
 
 For more information on how to use Svelte slots, see [Svelte Slot](https://svelte.dev/docs#template-syntax-slot-slot-key-value).
 
-### Tab placement
+### Tab position
 
-The `placement` property of Tabs determines the position of the Tabs (t: top, b: bottom, l: left, r: right), which affects the layout style of the `Tab` component. Horizontal and vertical layout styles are available, depending on the value of the `layout` property.
+The `position` property of Tabs determines the position of the Tabs (t: top, b: bottom, l: left, r: right), which affects the layout style of the `Tab` component. Horizontal and vertical layout styles are available, depending on the value of the `layout` property.
 
-<hr>
+---
 
 ## Tab
 

+ 7 - 0
doc/components/tabs/version.md

@@ -0,0 +1,7 @@
+## 0.4.3
+
+- [!tag|O|0|]Tabs Props 的 `placement` 改为 `position`。
+- [!tag|O|0|]Tab 的 `mx` 默认值由 '4' 改为 '2'。
+- [!tag|B|3|]修复 [Issues](https://github.com/any-tdf/stdf/issues/17)。[!issue|Zz-ZzzZ|]
+
+<font size=1>2023-12-11</font>

+ 5 - 0
doc/components/tabs/version_en.md

@@ -0,0 +1,5 @@
+## 0.4.3
+
+- [!tag|O|0|]Tabs Props `placement` changed to `position`.
+- [!tag|O|0|]Tab `mx` default value changed from '4' to '2'.
+- [!tag|B|3|]Fix [Issues](https://github.com/any-tdf/stdf/issues/17). [!issue|Zz-ZzzZ|]

+ 4 - 0
doc/guide/changelog.md

@@ -1,3 +1,7 @@
+## 0.4.3
+
+- 修改 Tabs 组件,详见 [Tabs](https://stdf.design/#/components?nav=tabs&tab=4)。
+
 ## 0.4.2
 
 - 组件源码的 Props 按照 JSDoc 规范增加类型注释,使用组件时将获得更好的 IDE 提示。可开启 checkJs 检测或使用 TypeScript 做类型检测。

+ 4 - 0
doc/guide/changelog_en.md

@@ -1,3 +1,7 @@
+## 0.4.3
+
+- Modify the Tabs component, please see [Tabs](https://stdf.design/#/components?nav=tabs&tab=4).
+
 ## 0.4.2
 
 - Component source code Props adds type annotation according to JSDoc specification, and you will get better IDE prompts when using the component. You can turn on checkJs detection or use TypeScript for type detection.

+ 1 - 1
doc/guide/contribution.md

@@ -84,7 +84,7 @@ bun dev
 - 克隆你的仓库至本地。
 - 修改组件源码并在 Demo 中验证通过。
 - 「可选」补充此次修改的中英文档中,文档位于 `doc/components` 目录下。根据具体修改内容可能需要修改 api、FAQ、guide、version 等文档。对 version 的修改请增加 tag,具体参考 [STDF Version tag](https://github.com/any-tdf/stdf/blob/main/doc/components/button/version.md?plain=1)。
-- 到仓库根目录,执行 `bun i` 或 `pnpm i` 或 `npm i` 安装依赖。
+- 到仓库根目录,执行 `pnpm i` 或 `npm i` 或 `bun i` 安装依赖。
 - 利用编辑器格式化你修改过的代码,或者执行 `pnpm run format` 或 `npm run format` 命令行格式化代码。
 - 执行 `pnpm run lint` 或 `npm run lint` 检查代码格式。
 - 提交修改内容至你的仓库,然后提 Pull Request 到主仓库。

+ 1 - 1
doc/guide/contribution_en.md

@@ -82,7 +82,7 @@ If you are submitting a Pull Request on GitHub for the first time, you can read
 - Clone your repository to your local machine.
 - Modify the component source code and verify it in the Demo.
 - 「Optional」Supplement the Chinese and English documentation for this modification, which is located in the `doc/components` directory. Depending on the specific modification content, you may need to modify the api, FAQ, guide, version, and other documents. For modifications to version, please add tags. Please refer to the [STDF Version tag](https://github.com/any-tdf/stdf/blob/main/doc/components/button/version.md?plain=1) for specific details.
-- Go to the root directory of the repository and execute `bun i` or `pnpm i` or `npm i` to install dependencies.
+- Go to the root directory of the repository and execute `pnpm i` or `npm i` or `bun i` to install dependencies.
 - Use your editor to format the modified code or execute `pnpm run format` or `npm run format` in the command line to format the code.
 - Execute `pnpm run lint` or `npm run lint` to check the code formatting.
 - Commit the modified content to your repository and then submit a Pull Request to the main repository.

+ 2 - 2
doc/guide/quickStart.md

@@ -29,7 +29,7 @@ bun i stdf -D
 
 ### 使用 create-stdf
 
-可以尝试使用 [create-stdf](https://www.npmjs.com/package/create-stdf) 快速创建工程。(beta 版本)
+可以尝试使用 [create-stdf](https://www.npmjs.com/package/create-stdf) 快速创建工程。
 
 ```bash
 pnpm create stdf
@@ -53,7 +53,7 @@ npm create vite@latest
 
 按照提示操作创建工程。
 
-参考 [Tailwind CSS 文档](https://tailwindcss.com/docs/guides/vite) 配置 Tailwind CSS。
+参考 [Tailwind CSS 文档](https://tailwindcss.com/docs/guides/vite#svelte) 配置 Tailwind CSS。
 
 1. 安装 Tailwind CSS 和其他依赖,然后生成 `tailwind.config.js` 和 `postcss.config.js` 文件。
 

+ 2 - 2
doc/guide/quickStart_en.md

@@ -29,7 +29,7 @@ bun i stdf -D
 
 ### Use create-stdf
 
-You can try using [create-stdf](https://www.npmjs.com/package/create-stdf) to quickly create a project. (beta version)
+You can try using [create-stdf](https://www.npmjs.com/package/create-stdf) to quickly create a project.
 
 ```bash
 pnpm create stdf
@@ -53,7 +53,7 @@ npm create vite@latest
 
 Follow the prompts to create a project.
 
-Configuration Tailwind CSS. See [Tailwind CSS documentation](https://tailwindcss.com/docs/guides/vite)。
+Configuration Tailwind CSS. See [Tailwind CSS documentation](https://tailwindcss.com/docs/guides/vite#svelte)。
 
 1. Install Tailwind CSS and other dependencies, then generate tailwind.config.js and postcss.config.js files.