diff --git a/src/action-bar/README.md b/src/action-bar/README.md index 73a473a82..1cf8a4e43 100644 --- a/src/action-bar/README.md +++ b/src/action-bar/README.md @@ -133,6 +133,8 @@ Use `badge` prop to show badge in icon. | ------- | -------------- | | default | Button content | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/action-bar/README.zh-CN.md b/src/action-bar/README.zh-CN.md index c1bedd44a..136cf27e7 100644 --- a/src/action-bar/README.zh-CN.md +++ b/src/action-bar/README.zh-CN.md @@ -118,8 +118,8 @@ export default { | type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` | | color | 按钮颜色，支持传入 `linear-gradient` 渐变色 | _string_ | - | | icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | -| disabled | 是否禁用按钮 | _boolean_ | `false` | - | -| loading | 是否显示为加载状态 | _boolean_ | `false` | - | +| disabled | 是否禁用按钮 | _boolean_ | `false` | +| loading | 是否显示为加载状态 | _boolean_ | `false` | | url | 点击后跳转的链接地址 | _string_ | - | | to | 点击后跳转的目标路由对象，等同于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - | | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` | @@ -137,6 +137,8 @@ export default { | ------- | ------------ | | default | 按钮显示内容 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md index a40faa2ce..31beea8f3 100644 --- a/src/action-sheet/README.md +++ b/src/action-sheet/README.md @@ -224,6 +224,8 @@ export default { | description | Custom description above the options | | cancel `v3.0.10` | Custom the content of cancel button | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md index d12ec063d..0c0d6947f 100644 --- a/src/action-sheet/README.zh-CN.md +++ b/src/action-sheet/README.zh-CN.md @@ -236,6 +236,8 @@ export default { | description | 自定义描述文案 | | cancel `v3.0.10` | 自定义取消按钮内容 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/address-edit/README.md b/src/address-edit/README.md index 86c0f7a7f..fa716b370 100644 --- a/src/address-edit/README.md +++ b/src/address-edit/README.md @@ -78,8 +78,8 @@ export default { | area-list | Area List | _object_ | - | | area-columns-placeholder | placeholder of area columns | _string[]_ | `[]` | | area-placeholder | placeholder of area input field | _string_ | `Area` | -| address-info | Address Info | _AddressInfo_ | `{}` | -| search-result | Address search result | _SearchResult[]_ | `[]` | +| address-info | Address Info | _AddressEditInfo_ | `{}` | +| search-result | Address search result | _AddressEditSearchItem[]_ | `[]` | | show-postal | Whether to show postal field | _boolean_ | `false` | | show-delete | Whether to show delete button | _boolean_ | `false` | | show-set-default | Whether to show default address switch | _boolean_ | `false` | @@ -128,7 +128,17 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Addres ### Types -Get the type definition of the AddressEdit instance through `AddressEditInstance`. +The component exports the following type definitions: + +```ts +import type { + AddressEditInfo, + AddressEditInstance, + AddressEditSearchItem, +} from 'vant'; +``` + +`AddressEditInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -139,7 +149,7 @@ const addressEditRef = ref(); addressEditRef.value?.setAddressDetail(''); ``` -### AddressInfo Data Structure +### AddressEditInfo Data Structure | key | Description | Type | | ------------- | ------------------ | --------- | @@ -153,7 +163,7 @@ addressEditRef.value?.setAddressDetail(''); | postalCode | Postal code | _string_ | | isDefault | Is default address | _boolean_ | -### SearchResult Data Structure +### AddressEditSearchItem Data Structure | key | Description | Type | | ------- | ----------- | -------- | @@ -164,6 +174,8 @@ addressEditRef.value?.setAddressDetail(''); Please refer to [Area](#/en-US/area) component. +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/address-edit/README.zh-CN.md b/src/address-edit/README.zh-CN.md index ad6e7f83b..d119a914c 100644 --- a/src/address-edit/README.zh-CN.md +++ b/src/address-edit/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -收货地址编辑组件，用于新建、更新、删除收货地址。 +地址编辑组件，用于新建、更新、删除地址信息。 ### 引入 @@ -78,8 +78,8 @@ export default { | area-list | 地区列表 | _object_ | - | | area-columns-placeholder | 地区选择列占位提示文字 | _string[]_ | `[]` | | area-placeholder | 地区输入框占位提示文字 | _string_ | `选择省 / 市 / 区` | -| address-info | 收货人信息初始值 | _AddressInfo_ | `{}` | -| search-result | 详细地址搜索结果 | _SearchResult[]_ | `[]` | +| address-info | 地址信息初始值 | _AddressEditInfo_ | `{}` | +| search-result | 详细地址搜索结果 | _AddressEditSearchItem[]_ | `[]` | | show-postal | 是否显示邮政编码 | _boolean_ | `false` | | show-delete | 是否显示删除按钮 | _boolean_ | `false` | | show-set-default | 是否显示默认地址栏 | _boolean_ | `false` | @@ -128,7 +128,17 @@ export default { ### 类型定义 -通过 `AddressEditInstance` 获取 AddressEdit 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { + AddressEditInfo, + AddressEditInstance, + AddressEditSearchItem, +} from 'vant'; +``` + +`AddressEditInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -139,14 +149,14 @@ const addressEditRef = ref(); addressEditRef.value?.setAddressDetail(''); ``` -### AddressInfo 数据格式 +### AddressEditInfo 数据格式 -注意：`AddressInfo` 仅作为初始值传入，表单最终内容可以在 save 事件中获取。 +注意：`AddressEditInfo` 仅作为初始值传入，表单最终内容可以在 save 事件中获取。 | key | 说明 | 类型 | | --- | --- | --- | -| name | 收货人姓名 | _string_ | -| tel | 收货人手机号 | _string_ | +| name | 姓名 | _string_ | +| tel | 手机号 | _string_ | | province | 省份 | _string_ | | city | 城市 | _string_ | | county | 区县 | _string_ | @@ -155,7 +165,7 @@ addressEditRef.value?.setAddressDetail(''); | postalCode | 邮政编码 | _string_ | | isDefault | 是否为默认地址 | _boolean_ | -### SearchResult 数据格式 +### AddressEditSearchItem 数据格式 | key | 说明 | 类型 | | ------- | -------- | -------- | @@ -164,7 +174,9 @@ addressEditRef.value?.setAddressDetail(''); ### 省市县列表数据格式 -请参考 [Area](#/zh-CN/area) 组件。 +请参考 [Area 省市区选择](#/zh-CN/area) 组件。 + +## 主题定制 ### 样式变量 diff --git a/src/address-list/README.md b/src/address-list/README.md index e33897fa4..a9a86f5aa 100644 --- a/src/address-list/README.md +++ b/src/address-list/README.md @@ -121,6 +121,8 @@ export default { | item-bottom | Custom content after list item | _item: Address_ | | tag `v3.0.9` | Custom tag of list item | _item: Address_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/address-list/README.zh-CN.md b/src/address-list/README.zh-CN.md index 7a1ccdca6..c57256214 100644 --- a/src/address-list/README.zh-CN.md +++ b/src/address-list/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -展示收货地址列表。 +展示地址信息列表。 ### 引入 @@ -107,9 +107,9 @@ export default { | 键名 | 说明 | 类型 | | --------- | ------------------ | ------------------ | | id | 每条地址的唯一标识 | _number \| string_ | -| name | 收货人姓名 | _string_ | -| tel | 收货人手机号 | _number \| string_ | -| address | 收货地址 | _string_ | +| name | 姓名 | _string_ | +| tel | 手机号 | _number \| string_ | +| address | 详细地址 | _string_ | | isDefault | 是否为默认地址 | _boolean_ | ### Slots @@ -121,6 +121,8 @@ export default { | item-bottom | 在列表项底部插入内容 | _item: Address_ | | tag `v3.0.9` | 自定义列表项标签内容 | _item: Address_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/area/README.md b/src/area/README.md index e3ef848a7..d0e752188 100644 --- a/src/area/README.md +++ b/src/area/README.md @@ -166,7 +166,13 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Area i ### Types -Get the type definition of the Area instance through `AreaInstance`. +The component exports the following type definitions: + +```ts +import type { AreaList, AreaInstance, AreaColumnOption } from 'vant'; +``` + +`AreaInstance` is the type of component instance: ```ts import { ref } from 'vue'; diff --git a/src/area/README.zh-CN.md b/src/area/README.zh-CN.md index 55834d506..8b5872379 100644 --- a/src/area/README.zh-CN.md +++ b/src/area/README.zh-CN.md @@ -168,7 +168,13 @@ confirm 事件返回的数据整体为一个数组，数组每一项对应一列 ### 类型定义 -通过 `AreaInstance` 获取 Area 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { AreaList, AreaInstance, AreaColumnOption } from 'vant'; +``` + +`AreaInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; diff --git a/src/badge/README.md b/src/badge/README.md index 5ce058082..7d1feba38 100644 --- a/src/badge/README.md +++ b/src/badge/README.md @@ -133,6 +133,8 @@ Use `content` slot to custom :content of badge. | default | Default slot | | content | Custom badge content | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/badge/README.zh-CN.md b/src/badge/README.zh-CN.md index 6069d735e..b2ab29a95 100644 --- a/src/badge/README.zh-CN.md +++ b/src/badge/README.zh-CN.md @@ -141,6 +141,8 @@ app.use(Badge); | default | 徽标包裹的子元素 | | content | 自定义徽标内容 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/button/README.md b/src/button/README.md index 6b0554863..94a915e6b 100644 --- a/src/button/README.md +++ b/src/button/README.md @@ -149,6 +149,8 @@ app.use(Button); | icon `v3.0.18` | Custom icon | | loading | Custom loading icon | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md index 96e262daa..4292603fa 100644 --- a/src/button/README.zh-CN.md +++ b/src/button/README.zh-CN.md @@ -172,6 +172,8 @@ app.use(Button); | icon `v3.0.18` | 自定义图标 | | loading | 自定义加载图标 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/calendar/README.md b/src/calendar/README.md index e7095e407..512439aef 100644 --- a/src/calendar/README.md +++ b/src/calendar/README.md @@ -349,7 +349,18 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Calend ### Types -Get the type definition of the Calendar instance through `CalendarInstance`. +The component exports the following type definitions: + +```ts +import type { + CalendarType, + CalendarDayItem, + CalendarDayType, + CalendarInstance, +} from 'vant'; +``` + +`CalendarInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -360,6 +371,8 @@ const calendarRef = ref(); calendarRef.value?.reset(); ``` +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md index 4087eb6d7..c32c30af2 100644 --- a/src/calendar/README.zh-CN.md +++ b/src/calendar/README.zh-CN.md @@ -355,7 +355,18 @@ export default { ### 类型定义 -通过 `CalendarInstance` 获取 Calendar 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { + CalendarType, + CalendarDayItem, + CalendarDayType, + CalendarInstance, +} from 'vant'; +``` + +`CalendarInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -366,6 +377,8 @@ const calendarRef = ref(); calendarRef.value?.reset(); ``` +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/card/README.md b/src/card/README.md index 37c1ad7bf..8e1c8b27c 100644 --- a/src/card/README.md +++ b/src/card/README.md @@ -108,6 +108,8 @@ Use slot to custom content. | tags | Custom tags | | footer | Custom footer | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/card/README.zh-CN.md b/src/card/README.zh-CN.md index ee9e97181..2fada4c1d 100644 --- a/src/card/README.zh-CN.md +++ b/src/card/README.zh-CN.md @@ -110,6 +110,8 @@ app.use(Card); | tags | 自定义描述下方标签区域 | | footer | 自定义右下角内容 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/cascader/README.md b/src/cascader/README.md index e805903f9..5134ac728 100644 --- a/src/cascader/README.md +++ b/src/cascader/README.md @@ -240,6 +240,8 @@ export default { | title | Custom title | - | | option `v3.1.4` | Custom option text | _{ option: Option, selected: boolean }_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md index dd4268b7f..92dae7b96 100644 --- a/src/cascader/README.zh-CN.md +++ b/src/cascader/README.zh-CN.md @@ -252,6 +252,8 @@ export default { | title | 自定义顶部标题 | - | | option `v3.1.4` | 自定义选项文字 | _{ option: Option, selected: boolean }_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/cell/README.md b/src/cell/README.md index 70393dba7..ec743d2df 100644 --- a/src/cell/README.md +++ b/src/cell/README.md @@ -192,6 +192,8 @@ app.use(CellGroup); | right-icon | Custom right icon | | extra | Custom extra content on the right | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md index 83c5db950..a83ffef3c 100644 --- a/src/cell/README.zh-CN.md +++ b/src/cell/README.zh-CN.md @@ -197,6 +197,8 @@ app.use(CellGroup); | right-icon | 自定义右侧图标 | | extra | 自定义单元格最右侧的额外内容 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/checkbox/README.md b/src/checkbox/README.md index 07588419b..aef4d25b3 100644 --- a/src/checkbox/README.md +++ b/src/checkbox/README.md @@ -254,7 +254,7 @@ export default { | label-disabled | Whether to disable label click | _boolean_ | `false` | | label-position | Can be set to `left` | _string_ | `right` | | icon-size | Icon size | _number \| string_ | `20px` | -| checked-color | Checked color | _string_ | `#1989fa` | - | +| checked-color | Checked color | _string_ | `#1989fa` | | bind-group | Whether to bind with CheckboxGroup | _boolean_ | `true` | ### CheckboxGroup Props @@ -266,7 +266,7 @@ export default { | max | Maximum amount of checked options | _number \| string_ | `0`(Unlimited) | | direction | Direction, can be set to `horizontal` | _string_ | `vertical` | | icon-size | Icon size of all checkboxes | _number \| string_ | `20px` | -| checked-color | Checked color of all checkboxes | _string_ | `#1989fa` | - | +| checked-color | Checked color of all checkboxes | _string_ | `#1989fa` | ### Checkbox Events @@ -329,7 +329,17 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Checkb ### Types -Get the type definition of the Checkbox instance through `CheckboxInstance` and `CheckboxGroupInstance`. +The component exports the following type definitions: + +```ts +import type { + CheckboxInstance, + CheckboxGroupInstance, + CheckboxGroupToggleAllOptions, +} from 'vant'; +``` + +`CheckboxInstance` and `CheckboxGroupInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -342,6 +352,8 @@ checkboxRef.value?.toggle(); checkboxGroupRef.value?.toggleAll(); ``` +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md index d24312702..7dbcb16da 100644 --- a/src/checkbox/README.zh-CN.md +++ b/src/checkbox/README.zh-CN.md @@ -210,7 +210,7 @@ export default { ### 搭配单元格组件使用 -此时你需要再引入 `Cell` 和 `CellGroup` 组件，并通过 `Checkbox` 实例上的 toggle 方法触发切换。 +搭配单元格组件使用时，需要再引入 `Cell` 和 `CellGroup` 组件，并通过 `Checkbox` 实例上的 toggle 方法触发切换。 ```html @@ -347,7 +347,17 @@ checkboxGroup.toggleAll({ ### 类型定义 -通过 `CheckboxInstance` 和 `CheckboxGroupInstance` 获取 Checkbox 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { + CheckboxInstance, + CheckboxGroupInstance, + CheckboxGroupToggleAllOptions, +} from 'vant'; +``` + +`CheckboxInstance` 和 `CheckboxGroupInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -360,6 +370,8 @@ checkboxRef.value?.toggle(); checkboxGroupRef.value?.toggleAll(); ``` +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/circle/README.md b/src/circle/README.md index efef5c2c2..359f2991c 100644 --- a/src/circle/README.md +++ b/src/circle/README.md @@ -167,6 +167,8 @@ export default { | ------- | ------------------- | | default | custom text content | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/circle/README.zh-CN.md b/src/circle/README.zh-CN.md index 146da496a..e0761577e 100644 --- a/src/circle/README.zh-CN.md +++ b/src/circle/README.zh-CN.md @@ -181,6 +181,8 @@ export default { | ------- | -------------- | | default | 自定义文字内容 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/collapse/README.md b/src/collapse/README.md index a9066419b..06367bf8f 100644 --- a/src/collapse/README.md +++ b/src/collapse/README.md @@ -152,7 +152,13 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Collap ### Types -Get the type definition of the CollapseItem instance through `CollapseItemInstance`. +The component exports the following type definitions: + +```ts +import type { CollapseItemInstance } from 'vant'; +``` + +`CollapseItemInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -174,6 +180,8 @@ collapseItemRef.value?.toggle(); | icon | Custom header left icon | | right-icon | Custom header right icon | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/collapse/README.zh-CN.md b/src/collapse/README.zh-CN.md index 20bc06c1e..bf498f62e 100644 --- a/src/collapse/README.zh-CN.md +++ b/src/collapse/README.zh-CN.md @@ -150,7 +150,13 @@ export default { ### 类型定义 -通过 `CollapseItemInstance` 获取 CollapseItem 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { CollapseItemInstance } from 'vant'; +``` + +`CollapseItemInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -172,6 +178,8 @@ collapseItemRef.value?.toggle(); | icon | 自定义标题栏左侧图标 | | right-icon | 自定义标题栏右侧图标 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/contact-card/README.md b/src/contact-card/README.md index b6ae5af93..69bb25cbe 100644 --- a/src/contact-card/README.md +++ b/src/contact-card/README.md @@ -90,6 +90,8 @@ export default { | ----- | --------------------------------- | ------------------- | | click | Emitted when component is clicked | _event: MouseEvent_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/contact-card/README.zh-CN.md b/src/contact-card/README.zh-CN.md index 24880bdc6..907d2a3c3 100644 --- a/src/contact-card/README.zh-CN.md +++ b/src/contact-card/README.zh-CN.md @@ -84,6 +84,8 @@ export default { | ------ | ---------- | ------------------- | | click | 点击时触发 | _event: MouseEvent_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/contact-edit/README.md b/src/contact-edit/README.md index ea5bf87d5..f12847890 100644 --- a/src/contact-edit/README.md +++ b/src/contact-edit/README.md @@ -77,6 +77,8 @@ export default { | name | Name | _string_ | | tel | Phone | _string_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/contact-edit/README.zh-CN.md b/src/contact-edit/README.zh-CN.md index 46c3a0ac0..f7a4b7067 100644 --- a/src/contact-edit/README.zh-CN.md +++ b/src/contact-edit/README.zh-CN.md @@ -77,6 +77,8 @@ export default { | name | 联系人姓名 | _string_ | | tel | 联系人手机号 | _number \| string_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/contact-list/README.md b/src/contact-list/README.md index 3fde955c9..cf45752e7 100644 --- a/src/contact-list/README.md +++ b/src/contact-list/README.md @@ -95,6 +95,8 @@ export default { | tel | Phone | _string_ | | isDefault | Is default contact | _boolean_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/contact-list/README.zh-CN.md b/src/contact-list/README.zh-CN.md index e1fe81038..4d788be96 100644 --- a/src/contact-list/README.zh-CN.md +++ b/src/contact-list/README.zh-CN.md @@ -95,6 +95,8 @@ export default { | tel | 联系人手机号 | _number \| string_ | | isDefault | 是否为默认联系人 | _boolean_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/count-down/README.md b/src/count-down/README.md index 9d7003cec..8a658d98a 100644 --- a/src/count-down/README.md +++ b/src/count-down/README.md @@ -183,7 +183,13 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get CountD ### Types -Get the type definition of the CountDown instance through `CountDownInstance`. +The component exports the following type definitions: + +```ts +import type { CountDownInstance, CountDownCurrentTime } from 'vant'; +``` + +`CountDownInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -194,6 +200,8 @@ const countDownRef = ref(); countDownRef.value?.start(); ``` +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/count-down/README.zh-CN.md b/src/count-down/README.zh-CN.md index 4ac441265..34c2f9219 100644 --- a/src/count-down/README.zh-CN.md +++ b/src/count-down/README.zh-CN.md @@ -193,7 +193,13 @@ export default { ### 类型定义 -通过 `CountDownInstance` 获取 CountDown 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { CountDownInstance, CountDownCurrentTime } from 'vant'; +``` + +`CountDownInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -204,6 +210,8 @@ const countDownRef = ref(); countDownRef.value?.start(); ``` +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/coupon-list/README.md b/src/coupon-list/README.md index ef1011299..d65322fc8 100644 --- a/src/coupon-list/README.md +++ b/src/coupon-list/README.md @@ -107,8 +107,8 @@ export default { | chosen-coupon | Index of chosen coupon | _number_ | `-1` | | coupons | Coupon list | _Coupon[]_ | `[]` | | disabled-coupons | Disabled coupon list | _Coupon[]_ | `[]` | -| enabled-title | Title of coupon list | _string_ | `Available` | - | -| disabled-title | Title of disabled coupon list | _string_ | `Unavailable` | - | +| enabled-title | Title of coupon list | _string_ | `Available` | +| disabled-title | Title of disabled coupon list | _string_ | `Unavailable` | | exchange-button-text | Exchange button text | _string_ | `Exchange` | | exchange-button-loading | Whether to show loading in exchange button | _boolean_ | `false` | | exchange-button-disabled | Whether to disable exchange button | _boolean_ | `false` | @@ -149,6 +149,8 @@ export default { | valueDesc | Value Text | _string_ | | unitDesc | Unit Text | _string_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/coupon-list/README.zh-CN.md b/src/coupon-list/README.zh-CN.md index 1bb3a6efa..03864ec8b 100644 --- a/src/coupon-list/README.zh-CN.md +++ b/src/coupon-list/README.zh-CN.md @@ -151,6 +151,8 @@ export default { | valueDesc | 折扣券优惠金额文案 | _string_ | | unitDesc | 单位文案 | _string_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md index c833711a0..451b2ec53 100644 --- a/src/datetime-picker/README.md +++ b/src/datetime-picker/README.md @@ -345,7 +345,13 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Dateti ### Types -Get the type definition of the DatetimePicker instance through `DatetimePickerInstance`. +The component exports the following type definitions: + +```ts +import type { DatetimePickerType, DatetimePickerInstance } from 'vant'; +``` + +`DatetimePickerInstance` is the type of component instance: ```ts import { ref } from 'vue'; diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md index 30fe263fd..2cadf7e81 100644 --- a/src/datetime-picker/README.zh-CN.md +++ b/src/datetime-picker/README.zh-CN.md @@ -354,7 +354,13 @@ export default { ### 类型定义 -通过 `DatetimePickerInstance` 获取 DatetimePicker 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { DatetimePickerType, DatetimePickerInstance } from 'vant'; +``` + +`DatetimePickerInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; diff --git a/src/dialog/README.md b/src/dialog/README.md index 6519e0696..3dc4b1443 100644 --- a/src/dialog/README.md +++ b/src/dialog/README.md @@ -214,6 +214,8 @@ export default { | title | Custom title | | footer `v3.0.10` | Custom footer | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/dialog/README.zh-CN.md b/src/dialog/README.zh-CN.md index ed133bf90..c3d6fe368 100644 --- a/src/dialog/README.zh-CN.md +++ b/src/dialog/README.zh-CN.md @@ -249,6 +249,8 @@ export default { | title | 自定义标题 | | footer `v3.0.10` | 自定义底部按钮区域 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/divider/README.md b/src/divider/README.md index cf36ad6b4..ee821ffd2 100644 --- a/src/divider/README.md +++ b/src/divider/README.md @@ -69,6 +69,8 @@ app.use(Divider); | ------- | ----------- | | default | content | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/divider/README.zh-CN.md b/src/divider/README.zh-CN.md index 3a756c1fc..6d9f14733 100644 --- a/src/divider/README.zh-CN.md +++ b/src/divider/README.zh-CN.md @@ -79,6 +79,8 @@ app.use(Divider); | ------- | ---- | | default | 内容 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md index 560a15842..628470965 100644 --- a/src/dropdown-menu/README.md +++ b/src/dropdown-menu/README.md @@ -193,7 +193,17 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Dropdo ### Types -Get the type definition of the DropdownItem instance through `DropdownItemInstance`. +The component exports the following type definitions: + +```ts +import type { + DropdownItemOption, + DropdownItemInstance, + DropdownMenuDirection, +} from 'vant'; +``` + +`DropdownItemInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -212,6 +222,8 @@ dropdownItemRef.value?.toggle(); | value | Value | _number \| string_ | | icon | Left icon | _string_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md index 3dd4ffe1f..bd0aaf4d1 100644 --- a/src/dropdown-menu/README.zh-CN.md +++ b/src/dropdown-menu/README.zh-CN.md @@ -197,7 +197,17 @@ export default { ### 类型定义 -通过 `DropdownItemInstance` 获取 DropdownItem 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { + DropdownItemOption, + DropdownItemInstance, + DropdownMenuDirection, +} from 'vant'; +``` + +`DropdownItemInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -216,6 +226,8 @@ dropdownItemRef.value?.toggle(); | value | 标识符 | _number \| string_ | | icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/empty/README.md b/src/empty/README.md index 4b6682c1d..62370364b 100644 --- a/src/empty/README.md +++ b/src/empty/README.md @@ -86,6 +86,8 @@ Use the image prop to display different placeholder images. | image | Custom image | | description | Custom description | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/empty/README.zh-CN.md b/src/empty/README.zh-CN.md index 334e19ccf..fc3a96aff 100644 --- a/src/empty/README.zh-CN.md +++ b/src/empty/README.zh-CN.md @@ -91,6 +91,8 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下 | image | 自定义图标 | | description | 自定义描述文字 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/field/README.md b/src/field/README.md index ab665ba3b..f86ebe837 100644 --- a/src/field/README.md +++ b/src/field/README.md @@ -309,7 +309,23 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Field ### Types -Get the type definition of the Field instance through `FieldInstance`. +The component exports the following type definitions: + +```ts +import type { + FieldType, + FieldRule, + FieldInstance, + FieldTextAlign, + FieldClearTrigger, + FieldFormatTrigger, + FieldValidateError, + FieldAutosizeConfig, + FieldValidateTrigger, +} from 'vant'; +``` + +`FieldInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -331,6 +347,8 @@ fieldRef.value?.focus(); | button | Insert button | | extra | Custom content on the right | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index 50e0966bd..476768d6b 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -328,7 +328,23 @@ export default { ### 类型定义 -通过 `FieldInstance` 获取 Field 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { + FieldType, + FieldRule, + FieldInstance, + FieldTextAlign, + FieldClearTrigger, + FieldFormatTrigger, + FieldValidateError, + FieldAutosizeConfig, + FieldValidateTrigger, +} from 'vant'; +``` + +`FieldInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -350,6 +366,8 @@ fieldRef.value?.focus(); | button | 自定义输入框尾部按钮 | | extra | 自定义输入框最右侧的额外内容 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/form/README.md b/src/form/README.md index a5c0bd6b2..8bc65f9c0 100644 --- a/src/form/README.md +++ b/src/form/README.md @@ -544,7 +544,13 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Form i ### Types -Get the type definition of the Form instance through `FormInstance`. +The component exports the following type definitions: + +```ts +import type { FormInstance } from 'vant'; +``` + +`FormInstance` is the type of component instance: ```ts import { ref } from 'vue'; diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md index a8c3e0404..2eb9aba44 100644 --- a/src/form/README.zh-CN.md +++ b/src/form/README.zh-CN.md @@ -582,7 +582,13 @@ export default { ### 类型定义 -通过 `FormInstance` 获取 Form 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { FormInstance } from 'vant'; +``` + +`FormInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; diff --git a/src/grid/README.md b/src/grid/README.md index 82a4bb481..c369572dd 100644 --- a/src/grid/README.md +++ b/src/grid/README.md @@ -142,6 +142,8 @@ app.use(GridItem); | icon | Custom icon | | text | Custom text | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/grid/README.zh-CN.md b/src/grid/README.zh-CN.md index 952396407..bd3270335 100644 --- a/src/grid/README.zh-CN.md +++ b/src/grid/README.zh-CN.md @@ -158,6 +158,8 @@ app.use(GridItem); | icon | 自定义图标 | | text | 自定义文字 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/image-preview/README.md b/src/image-preview/README.md index 93be40d3d..3d9c88306 100644 --- a/src/image-preview/README.md +++ b/src/image-preview/README.md @@ -187,7 +187,17 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get ImagePreview instance and call i ### Types -Get the type definition of the ImagePreview instance through `ImagePreviewInstance`. +The component exports the following type definitions: + +```ts +import type { + ImagePreviewOptions, + ImagePreviewInstance, + ImagePreviewScaleEventParams, +} from 'vant'; +``` + +`ImagePreviewInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -219,6 +229,8 @@ imagePreviewRef.value?.swipeTo(1); | index | Index of current image | _number_ | | scale | scale of current image | _number_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md index d8f607977..a2566dd42 100644 --- a/src/image-preview/README.zh-CN.md +++ b/src/image-preview/README.zh-CN.md @@ -222,7 +222,17 @@ export default { ### 类型定义 -通过 `ImagePreviewInstance` 获取 ImagePreview 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { + ImagePreviewOptions, + ImagePreviewInstance, + ImagePreviewScaleEventParams, +} from 'vant'; +``` + +`ImagePreviewInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -256,6 +266,8 @@ imagePreviewRef.value?.swipeTo(1); | index | 当前图片的索引值 | _number_ | | scale | 当前图片的缩放值 | _number_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/image/README.md b/src/image/README.md index f21f237c2..28a712d53 100644 --- a/src/image/README.md +++ b/src/image/README.md @@ -114,6 +114,8 @@ app.use(Lazyload); | loading | Custom loading placeholder | | error | Custom error placeholder | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/image/README.zh-CN.md b/src/image/README.zh-CN.md index d11185efb..111915699 100644 --- a/src/image/README.zh-CN.md +++ b/src/image/README.zh-CN.md @@ -142,6 +142,8 @@ app.use(Lazyload); | loading | 自定义加载中的提示内容 | | error | 自定义加载失败时的提示内容 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/index-bar/README.md b/src/index-bar/README.md index 2a4f3e83d..50f0f949b 100644 --- a/src/index-bar/README.md +++ b/src/index-bar/README.md @@ -75,7 +75,7 @@ export default { | z-index | z-index | _number \| string_ | `1` | | sticky | Whether to enable anchor sticky top | _boolean_ | `true` | | sticky-offset-top | Anchor offset top when sticky | _number_ | `0` | -| highlight-color | Index character highlight color | _string_ | `#ee0a24` | - | +| highlight-color | Index character highlight color | _string_ | `#ee0a24` | | teleport `v3.0.19` | Specifies a target element where IndexBar will be mounted | _string \| Element_ | - | ### IndexAnchor Props @@ -101,7 +101,13 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get IndexB ### Types -Get the type definition of the IndexBar instance through `IndexBarInstance`. +The component exports the following type definitions: + +```ts +import type { IndexBarInstance } from 'vant'; +``` + +`IndexBarInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -118,6 +124,8 @@ indexBarRef.value?.scrollTo('B'); | ------- | ------------------------------------- | | default | Anchor content, show index by default | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/index-bar/README.zh-CN.md b/src/index-bar/README.zh-CN.md index afe4b923f..21dd16735 100644 --- a/src/index-bar/README.zh-CN.md +++ b/src/index-bar/README.zh-CN.md @@ -105,7 +105,13 @@ export default { ### 类型定义 -通过 `IndexBarInstance` 获取 IndexBar 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { IndexBarInstance } from 'vant'; +``` + +`IndexBarInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -122,6 +128,8 @@ indexBarRef.value?.scrollTo('B'); | ------- | -------------------------------- | | default | 锚点位置显示内容，默认为索引字符 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/list/README.md b/src/list/README.md index b57045e94..fb787d253 100644 --- a/src/list/README.md +++ b/src/list/README.md @@ -193,7 +193,13 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get List i ### Types -Get the type definition of the List instance through `ListInstance`. +The component exports the following type definitions: + +```ts +import type { ListInstance, ListDirection } from 'vant'; +``` + +`ListInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -213,6 +219,8 @@ listRef.value?.check(); | finished | Custom finished tips | | error | Custom error tips | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/list/README.zh-CN.md b/src/list/README.zh-CN.md index 6834a8ad8..bc38efc99 100644 --- a/src/list/README.zh-CN.md +++ b/src/list/README.zh-CN.md @@ -208,7 +208,13 @@ export default { ### 类型定义 -通过 `ListInstance` 获取 List 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { ListInstance, ListDirection } from 'vant'; +``` + +`ListInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -228,6 +234,8 @@ listRef.value?.check(); | finished | 自定义加载完成后的提示文案 | | error | 自定义加载失败后的提示文案 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/loading/README.md b/src/loading/README.md index f66337eff..3dbfd244d 100644 --- a/src/loading/README.md +++ b/src/loading/README.md @@ -85,6 +85,8 @@ use `color` or `text-color` to change text color. | ------- | ------------ | | default | Loading text | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/loading/README.zh-CN.md b/src/loading/README.zh-CN.md index d6740afd7..d01f3b44b 100644 --- a/src/loading/README.zh-CN.md +++ b/src/loading/README.zh-CN.md @@ -95,6 +95,8 @@ app.use(Loading); | ------- | -------- | | default | 加载文案 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/nav-bar/README.md b/src/nav-bar/README.md index 9185b2bec..ee33eac01 100644 --- a/src/nav-bar/README.md +++ b/src/nav-bar/README.md @@ -87,6 +87,8 @@ export default { | click-left | Emitted when the left button is clicked | _event: MouseEvent_ | | click-right | Emitted when the right button is clicked | _event: MouseEvent_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/nav-bar/README.zh-CN.md b/src/nav-bar/README.zh-CN.md index 32a9a31a5..804e55a80 100644 --- a/src/nav-bar/README.zh-CN.md +++ b/src/nav-bar/README.zh-CN.md @@ -89,6 +89,8 @@ export default { | click-left | 点击左侧按钮时触发 | _event: MouseEvent_ | | click-right | 点击右侧按钮时触发 | _event: MouseEvent_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md index 4a3211be3..6368d4cb7 100644 --- a/src/notice-bar/README.md +++ b/src/notice-bar/README.md @@ -90,14 +90,14 @@ app.use(NoticeBar); | Attribute | Description | Type | Default | | --- | --- | --- | --- | | mode | Mode, can be set to `closeable` `link` | _string_ | `''` | -| text | Notice text content | _string_ | `''` | - | +| text | Notice text content | _string_ | `''` | | color | Text color | _string_ | `#f60` | | background | Background color | _string_ | `#fff7cc` | | left-icon | Left Icon | _string_ | - | | delay | Animation delay (s) | _number \| string_ | `1` | | speed | Scroll speed (px/s) | _number \| string_ | `60` | | scrollable | Whether to scroll content | _boolean_ | - | -| wrapable | Whether to enable text wrap | _boolean_ | `false` | - | +| wrapable | Whether to enable text wrap | _boolean_ | `false` | ### Events @@ -117,7 +117,13 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Notice ### Types -Get the type definition of the NoticeBar instance through `NoticeBarInstance`. +The component exports the following type definitions: + +```ts +import type { NoticeBarMode, NoticeBarInstance } from 'vant'; +``` + +`NoticeBarInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -136,6 +142,8 @@ noticeBarRef.value?.reset(); | left-icon | Custom left icon | | right-icon | Custom right icon | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/notice-bar/README.zh-CN.md b/src/notice-bar/README.zh-CN.md index bea040df9..fce81eb31 100644 --- a/src/notice-bar/README.zh-CN.md +++ b/src/notice-bar/README.zh-CN.md @@ -138,7 +138,13 @@ app.use(NoticeBar); ### 类型定义 -通过 `NoticeBarInstance` 获取 NoticeBar 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { NoticeBarMode, NoticeBarInstance } from 'vant'; +``` + +`NoticeBarInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -157,6 +163,8 @@ noticeBarRef.value?.reset(); | left-icon | 自定义左侧图标 | | right-icon | 自定义右侧图标 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/notify/README.md b/src/notify/README.md index 44714e567..3b314f58d 100644 --- a/src/notify/README.md +++ b/src/notify/README.md @@ -110,7 +110,7 @@ export default { | type | Can be set to `primary` `success` `warning` | _string_ | `danger` | | message | Message | _string_ | - | | duration | Duration(ms), won't disappear if value is 0 | _number \| string_ | `3000` | -| color | Message color | _string_ | `white` | | +| color | Message color | _string_ | `white` | | background | Background color | _string_ | - | | className | Custom className | _string \| Array \| object_ | - | | lockScroll `v3.0.7` | Whether to lock background scroll | _boolean_ | `false` | @@ -118,6 +118,8 @@ export default { | onOpened | Callback function after opened | _() => void_ | - | | onClose | Callback function after close | _() => void_ | - | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/notify/README.zh-CN.md b/src/notify/README.zh-CN.md index e0365823d..1d4c3b777 100644 --- a/src/notify/README.zh-CN.md +++ b/src/notify/README.zh-CN.md @@ -151,6 +151,8 @@ export default { | onOpened | 完全展示后的回调函数 | _() => void_ | - | | onClose | 关闭时的回调函数 | _() => void_ | - | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md index 74188c658..f0a8b24db 100644 --- a/src/number-keyboard/README.md +++ b/src/number-keyboard/README.md @@ -204,6 +204,8 @@ export default { | extra-key | Custom extra key content | | title-left | Custom title left content | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md index 5ba7a258f..930e2958e 100644 --- a/src/number-keyboard/README.zh-CN.md +++ b/src/number-keyboard/README.zh-CN.md @@ -211,6 +211,8 @@ export default { | extra-key | 自定义左下角按键内容 | | title-left | 自定义标题栏左侧内容 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/overlay/README.md b/src/overlay/README.md index f1b453cf8..7f4953672 100644 --- a/src/overlay/README.md +++ b/src/overlay/README.md @@ -86,6 +86,8 @@ export default { | ------- | ------------ | | default | Default slot | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/overlay/README.zh-CN.md b/src/overlay/README.zh-CN.md index 3fcd643f7..219c0813c 100644 --- a/src/overlay/README.zh-CN.md +++ b/src/overlay/README.zh-CN.md @@ -88,6 +88,8 @@ export default { | ------- | ---------------------------------- | | default | 默认插槽，用于在遮罩层上方嵌入内容 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/pagination/README.md b/src/pagination/README.md index cd4628434..16c6380da 100644 --- a/src/pagination/README.md +++ b/src/pagination/README.md @@ -96,6 +96,8 @@ export default { | prev-text | Custom prev text | `-` | | next-text | Custom next text | `-` | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/pagination/README.zh-CN.md b/src/pagination/README.zh-CN.md index c4f42fbb8..3218441e1 100644 --- a/src/pagination/README.zh-CN.md +++ b/src/pagination/README.zh-CN.md @@ -104,6 +104,8 @@ export default { | prev-text | 自定义上一页按钮文字 | `-` | | next-text | 自定义下一页按钮文字 | `-` | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/password-input/README.md b/src/password-input/README.md index 8fb3ab9ad..b52330368 100644 --- a/src/password-input/README.md +++ b/src/password-input/README.md @@ -148,6 +148,8 @@ export default { | ----- | ----------------------------- | --------- | | focus | Emitted when input is focused | - | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/password-input/README.zh-CN.md b/src/password-input/README.zh-CN.md index 85e6e7f81..98931cdab 100644 --- a/src/password-input/README.zh-CN.md +++ b/src/password-input/README.zh-CN.md @@ -158,6 +158,8 @@ export default { | ------ | ---------------- | -------- | | focus | 输入框聚焦时触发 | - | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/picker/README.md b/src/picker/README.md index 4b04b1809..3237b291c 100644 --- a/src/picker/README.md +++ b/src/picker/README.md @@ -381,7 +381,21 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Picker ### Types -Get the type definition of the Picker instance through `PickerInstance`. +The component exports the following type definitions: + +```ts +import type { + PickerColumn, + PickerOption, + PickerInstance, + PickerFieldNames, + PickerObjectColumn, + PickerObjectOption, + PickerToolbarPosition, +} from 'vant'; +``` + +`PickerInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -392,6 +406,8 @@ const pickerRef = ref(); pickerRef.value?.confirm(); ``` +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md index 4a248031c..07652c62e 100644 --- a/src/picker/README.zh-CN.md +++ b/src/picker/README.zh-CN.md @@ -406,7 +406,21 @@ export default { ### 类型定义 -通过 `PickerInstance` 获取 Picker 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { + PickerColumn, + PickerOption, + PickerInstance, + PickerFieldNames, + PickerObjectColumn, + PickerObjectOption, + PickerToolbarPosition, +} from 'vant'; +``` + +`PickerInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -417,6 +431,8 @@ const pickerRef = ref(); pickerRef.value?.confirm(); ``` +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/popover/README.md b/src/popover/README.md index 2b073cf3b..59a166802 100644 --- a/src/popover/README.md +++ b/src/popover/README.md @@ -254,6 +254,8 @@ export default { | default | Custom content | | reference | Reference Element | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md index 676ceafbf..8f3b1287e 100644 --- a/src/popover/README.zh-CN.md +++ b/src/popover/README.zh-CN.md @@ -266,6 +266,8 @@ export default { | default | 自定义菜单内容 | | reference | 触发 Popover 显示的元素内容 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/popup/README.md b/src/popup/README.md index 66e5625fa..ba53a76cf 100644 --- a/src/popup/README.md +++ b/src/popup/README.md @@ -146,6 +146,8 @@ Use `teleport` prop to specify mount location. | default | Content of Popup | | overlay-content `v3.0.18` | Content of Popup overlay | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md index 00c86a660..356974863 100644 --- a/src/popup/README.zh-CN.md +++ b/src/popup/README.zh-CN.md @@ -152,6 +152,8 @@ export default { | default | 弹窗内容 | | overlay-content `v3.0.18` | 遮罩层的内容 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/progress/README.md b/src/progress/README.md index 142fb2866..37c109b23 100644 --- a/src/progress/README.md +++ b/src/progress/README.md @@ -71,7 +71,13 @@ Use `pivot-text` to custom text，use `color` to custom bar color. ### Types -Get the type definition of the Progress instance through `ProgressInstance`. +The component exports the following type definitions: + +```ts +import type { ProgressInstance } from 'vant'; +``` + +`ProgressInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -82,6 +88,8 @@ const progressRef = ref(); progressRef.value?.resize(); ``` +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/progress/README.zh-CN.md b/src/progress/README.zh-CN.md index 6379aad96..f78170b2c 100644 --- a/src/progress/README.zh-CN.md +++ b/src/progress/README.zh-CN.md @@ -75,7 +75,13 @@ app.use(Progress); ### 类型定义 -通过 `ProgressInstance` 获取 Progress 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { ProgressInstance } from 'vant'; +``` + +`ProgressInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -86,6 +92,8 @@ const progressRef = ref(); progressRef.value?.resize(); ``` +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/pull-refresh/README.md b/src/pull-refresh/README.md index a24aa2e1a..a0260c516 100644 --- a/src/pull-refresh/README.md +++ b/src/pull-refresh/README.md @@ -135,6 +135,8 @@ Use slots to custom tips. | loading | Content of head when at loading | { distance } | | success | Content of head when succeed | - | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/pull-refresh/README.zh-CN.md b/src/pull-refresh/README.zh-CN.md index a65766c7d..0705372ef 100644 --- a/src/pull-refresh/README.zh-CN.md +++ b/src/pull-refresh/README.zh-CN.md @@ -138,6 +138,8 @@ export default { | loading | 加载过程中顶部内容 | { distance: 当前下拉距离 } | | success | 刷新成功提示内容 | - | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/radio/README.md b/src/radio/README.md index 09b0a3587..bb229f0a1 100644 --- a/src/radio/README.md +++ b/src/radio/README.md @@ -168,7 +168,7 @@ export default { | label-disabled | Whether to disable label click | _boolean_ | `false` | | label-position | Can be set to `left` | _string_ | `right` | | icon-size | Icon size | _number \| string_ | `20px` | -| checked-color | Checked color | _string_ | `#1989fa` | - | +| checked-color | Checked color | _string_ | `#1989fa` | ### RadioGroup Props @@ -178,7 +178,7 @@ export default { | disabled | Disable all radios | _boolean_ | `false` | | direction | Direction, can be set to `horizontal` | _string_ | `vertical` | | icon-size | Icon size of all radios | _number \| string_ | `20px` | -| checked-color | Checked color of all radios | _string_ | `#1989fa` | - | +| checked-color | Checked color of all radios | _string_ | `#1989fa` | ### Radio Events @@ -199,6 +199,8 @@ export default { | default | Custom label | - | | icon | Custom icon | _{ checked: boolean, disabled: boolean }_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/radio/README.zh-CN.md b/src/radio/README.zh-CN.md index 38ea5c5fe..b95a59b98 100644 --- a/src/radio/README.zh-CN.md +++ b/src/radio/README.zh-CN.md @@ -149,9 +149,9 @@ export default { ``` -### 与 Cell 组件一起使用 +### 搭配单元格组件使用 -此时你需要再引入 `Cell` 和 `CellGroup` 组件。 +搭配单元格组件使用时，需要再引入 `Cell` 和 `CellGroup` 组件。 ```html @@ -213,6 +213,8 @@ export default { | default | 自定义文本 | - | | icon | 自定义图标 | _{ checked: boolean, disabled: boolean }_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/radio/demo/index.vue b/src/radio/demo/index.vue index 6813814d7..69f8185ed 100644 --- a/src/radio/demo/index.vue +++ b/src/radio/demo/index.vue @@ -7,7 +7,7 @@ const t = useTranslate({ radio: '单选框', text1: '未选中禁用', text2: '选中且禁用', - withCell: '与 Cell 组件一起使用', + withCell: '搭配单元格组件使用', horizontal: '水平排列', customIcon: '自定义图标', customColor: '自定义颜色', diff --git a/src/rate/README.md b/src/rate/README.md index 6ed638bec..cd55e0464 100644 --- a/src/rate/README.md +++ b/src/rate/README.md @@ -154,6 +154,8 @@ export default { | ------ | ------------------------- | ------------ | | change | Emitted when rate changed | current rate | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/rate/README.zh-CN.md b/src/rate/README.zh-CN.md index 22d50373d..0ea3669e8 100644 --- a/src/rate/README.zh-CN.md +++ b/src/rate/README.zh-CN.md @@ -172,6 +172,8 @@ export default { | ------ | ------------------------ | -------- | | change | 当前分值变化时触发的事件 | 当前分值 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/search/README.md b/src/search/README.md index 24c5c016c..a5de22b44 100644 --- a/src/search/README.md +++ b/src/search/README.md @@ -163,7 +163,13 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Search ### Types -Get the type definition of the Search instance through `SearchInstance`. +The component exports the following type definitions: + +```ts +import type { SearchShape, SearchInstance } from 'vant'; +``` + +`SearchInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -184,6 +190,8 @@ searchRef.value?.focus(); | left-icon | Custom left icon | | right-icon | Custom right icon | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/search/README.zh-CN.md b/src/search/README.zh-CN.md index c90eadf85..24bb948d2 100644 --- a/src/search/README.zh-CN.md +++ b/src/search/README.zh-CN.md @@ -175,7 +175,13 @@ export default { ### 类型定义 -通过 `SearchInstance` 获取 Search 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { SearchShape, SearchInstance } from 'vant'; +``` + +`SearchInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -196,6 +202,8 @@ searchRef.value?.focus(); | left-icon | 自定义左侧图标（搜索框内） | | right-icon | 自定义右侧图标（搜索框内） | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/share-sheet/README.md b/src/share-sheet/README.md index 064e2d3fa..c4dc75543 100644 --- a/src/share-sheet/README.md +++ b/src/share-sheet/README.md @@ -214,6 +214,8 @@ export default { | description | Custom description | | cancel `v3.0.10` | Custom the content of cancel button | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/share-sheet/README.zh-CN.md b/src/share-sheet/README.zh-CN.md index c4f7253d4..20cdddff0 100644 --- a/src/share-sheet/README.zh-CN.md +++ b/src/share-sheet/README.zh-CN.md @@ -228,6 +228,8 @@ export default { | description | 自定义描述文字 | | cancel `v3.0.10` | 自定义取消按钮内容 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/sidebar/README.md b/src/sidebar/README.md index 4c5475e4f..fde37d936 100644 --- a/src/sidebar/README.md +++ b/src/sidebar/README.md @@ -124,6 +124,8 @@ export default { | ----- | ----------------- | | title | Custom item title | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/sidebar/README.zh-CN.md b/src/sidebar/README.zh-CN.md index 5051c581d..e7a5a656b 100644 --- a/src/sidebar/README.zh-CN.md +++ b/src/sidebar/README.zh-CN.md @@ -132,6 +132,8 @@ export default { | ----- | ----------- | | title | 自定义标题 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/skeleton/README.md b/src/skeleton/README.md index 21661ef15..c7dd33b82 100644 --- a/src/skeleton/README.md +++ b/src/skeleton/README.md @@ -73,6 +73,8 @@ export default { | avatar-size | Size of avatar placeholder | _number \| string_ | `32px` | | avatar-shape | Shape of avatar placeholder，can be set to `square` | _string_ | `round` | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/skeleton/README.zh-CN.md b/src/skeleton/README.zh-CN.md index ca19f0ddd..6e0a3b9f8 100644 --- a/src/skeleton/README.zh-CN.md +++ b/src/skeleton/README.zh-CN.md @@ -79,6 +79,8 @@ export default { | avatar-size | 头像占位图大小 | _number \| string_ | `32px` | | avatar-shape | 头像占位图形状，可选值为 `square` | _string_ | `round` | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/slider/README.md b/src/slider/README.md index c8016d7d1..7049b0289 100644 --- a/src/slider/README.md +++ b/src/slider/README.md @@ -181,6 +181,8 @@ export default { | left-button `v3.1.3` | Custom left button in range mode | _{ value: number }_ | | right-button `v3.1.3` | Custom right button in range mode | _{ value: number }_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/slider/README.zh-CN.md b/src/slider/README.zh-CN.md index 8bf2c489e..2a8cb981d 100644 --- a/src/slider/README.zh-CN.md +++ b/src/slider/README.zh-CN.md @@ -183,6 +183,8 @@ export default { | left-button `v3.1.3` | 自定义左侧滑块按钮（双滑块模式下） | _{ value: number }_ | | right-button `v3.1.3` | 自定义右侧滑块按钮 （双滑块模式下） | _{ value: number }_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/stepper/README.md b/src/stepper/README.md index 8a5c0ee86..3037cf80a 100644 --- a/src/stepper/README.md +++ b/src/stepper/README.md @@ -157,6 +157,8 @@ export default { | focus | Emitted when the input is focused | _event: Event_ | | blur | Emitted when the input is blurred | _event: Event_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/stepper/README.zh-CN.md b/src/stepper/README.zh-CN.md index 3bd58fa54..446fee9f8 100644 --- a/src/stepper/README.zh-CN.md +++ b/src/stepper/README.zh-CN.md @@ -177,6 +177,8 @@ export default { | focus | 输入框聚焦时触发 | _event: Event_ | | blur | 输入框失焦时触发 | _event: Event_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/steps/README.md b/src/steps/README.md index e075d9859..d894d9a29 100644 --- a/src/steps/README.md +++ b/src/steps/README.md @@ -89,10 +89,10 @@ export default { ### Step Slots | Name | Description | -| -------------------- | -------------------- | +| -------------------- | -------------------- | -------- | --- | | active-icon | Custom active icon | | inactive-icon | Custom inactive icon | -| finish-icon `v3.0.7` | Custom finish icon | _string_ | - | +| finish-icon `v3.0.7` | Custom finish icon | _string_ | - | ### Steps Events @@ -100,6 +100,8 @@ export default { | --- | --- | --- | | click-step | Emitted when a step's title or icon is clicked | _index: number_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/steps/README.zh-CN.md b/src/steps/README.zh-CN.md index 0ebe29586..c5fded781 100644 --- a/src/steps/README.zh-CN.md +++ b/src/steps/README.zh-CN.md @@ -95,7 +95,7 @@ export default { ### Step Slots | 名称 | 说明 | -| --- | --- | +| --- | --- | --- | --- | | active-icon | 自定义激活状态图标 | | inactive-icon | 自定义未激活状态图标 | | finish-icon `v3.0.7` | 自定义已完成步骤对应的底部图标，优先级高于 `inactive-icon` | _string_ | - | @@ -106,6 +106,8 @@ export default { | ---------- | -------------------------- | --------------- | | click-step | 点击步骤的标题或图标时触发 | _index: number_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/sticky/README.md b/src/sticky/README.md index 9901b105b..47e4df18c 100644 --- a/src/sticky/README.md +++ b/src/sticky/README.md @@ -80,6 +80,8 @@ export default { | change `v3.0.10` | Emitted when sticky status changed | _isFixed: boolean_ | | scroll | Emitted when scrolling | _{ scrollTop: number, isFixed: boolean }_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/sticky/README.zh-CN.md b/src/sticky/README.zh-CN.md index 59a6e5851..d8d4ea545 100644 --- a/src/sticky/README.zh-CN.md +++ b/src/sticky/README.zh-CN.md @@ -88,6 +88,8 @@ export default { | change `v3.0.10` | 当吸顶状态改变时触发 | _isFixed: boolean_ | | scroll | 滚动时触发 | _{ scrollTop: number, isFixed: boolean }_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/submit-bar/README.md b/src/submit-bar/README.md index b7501da2b..6c1e61ece 100644 --- a/src/submit-bar/README.md +++ b/src/submit-bar/README.md @@ -122,6 +122,8 @@ export default { | top | Custom top content | | tip | Custom tips | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/submit-bar/README.zh-CN.md b/src/submit-bar/README.zh-CN.md index f317d64fb..108230b81 100644 --- a/src/submit-bar/README.zh-CN.md +++ b/src/submit-bar/README.zh-CN.md @@ -129,6 +129,8 @@ export default { | top | 自定义订单栏上方内容 | | tip | 提示文案中的额外内容 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/swipe-cell/README.md b/src/swipe-cell/README.md index 623dabf95..df6d0d840 100644 --- a/src/swipe-cell/README.md +++ b/src/swipe-cell/README.md @@ -148,7 +148,13 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get SwipeC ### Types -Get the type definition of the SwipeCell instance through `SwipeCellInstance`. +The component exports the following type definitions: + +```ts +import type { SwipeCellSide, SwipeCellPosition, SwipeCellInstance } from 'vant'; +``` + +`SwipeCellInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -159,6 +165,8 @@ const swipeCellRef = ref(); swipeCellRef.value?.close(); ``` +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/swipe-cell/README.zh-CN.md b/src/swipe-cell/README.zh-CN.md index f9bbe9a0c..f8fe11f12 100644 --- a/src/swipe-cell/README.zh-CN.md +++ b/src/swipe-cell/README.zh-CN.md @@ -157,7 +157,13 @@ beforeClose 的第一个参数为对象，对象中包含以下属性： ### 类型定义 -通过 `SwipeCellInstance` 获取 SwipeCell 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { SwipeCellSide, SwipeCellPosition, SwipeCellInstance } from 'vant'; +``` + +`SwipeCellInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -168,6 +174,8 @@ const swipeCellRef = ref(); swipeCellRef.value?.close(); ``` +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/swipe/README.md b/src/swipe/README.md index 91d3d2611..d102c8909 100644 --- a/src/swipe/README.md +++ b/src/swipe/README.md @@ -181,7 +181,13 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Swipe ### Types -Get the type definition of the Swipe instance through `SwipeInstance`. +The component exports the following type definitions: + +```ts +import type { SwipeInstance, SwipeToOptions } from 'vant'; +``` + +`SwipeInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -205,6 +211,8 @@ swipeRef.value?.next(); | default | Content | - | | indicator `v3.0.16` | Custom indicator | _{ active: number }_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md index 08971a175..3cbe7c13e 100644 --- a/src/swipe/README.zh-CN.md +++ b/src/swipe/README.zh-CN.md @@ -189,7 +189,13 @@ export default { ### 类型定义 -通过 `SwipeInstance` 获取 Swipe 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { SwipeInstance, SwipeToOptions } from 'vant'; +``` + +`SwipeInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -213,6 +219,8 @@ swipeRef.value?.next(); | default | 轮播内容 | - | | indicator `v3.0.16` | 自定义指示器 | _{ active: number }_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/switch/README.md b/src/switch/README.md index d21b3f534..725f0dea7 100644 --- a/src/switch/README.md +++ b/src/switch/README.md @@ -121,6 +121,8 @@ export default { | change | Emitted when check status changed | _value: any_ | | click | Emitted when component is clicked | _event: MouseEvent_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/switch/README.zh-CN.md b/src/switch/README.zh-CN.md index d2ca24abf..d42d1ff9d 100644 --- a/src/switch/README.zh-CN.md +++ b/src/switch/README.zh-CN.md @@ -133,6 +133,8 @@ export default { | change | 开关状态切换时触发 | _value: any_ | | click | 点击时触发 | _event: MouseEvent_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/tab/README.md b/src/tab/README.md index c9da56caf..0b58edebe 100644 --- a/src/tab/README.md +++ b/src/tab/README.md @@ -283,7 +283,13 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Tabs i ### Types -Get the type definition of the Tabs instance through `TabsInstance`. +The component exports the following type definitions: + +```ts +import type { TabsType, TabsInstance } from 'vant'; +``` + +`TabsInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -309,6 +315,8 @@ tabsRef.value?.scrollTo(0); | default | Content of tab | | title | Custom tab title | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md index dc50cf0b3..71e00bc9d 100644 --- a/src/tab/README.zh-CN.md +++ b/src/tab/README.zh-CN.md @@ -294,7 +294,13 @@ export default { ### 类型定义 -通过 `TabsInstance` 获取 Tabs 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { TabsType, TabsInstance } from 'vant'; +``` + +`TabsInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -320,6 +326,8 @@ tabsRef.value?.scrollTo(0); | default | 标签页内容 | | title | 自定义标题 | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/tabbar/README.md b/src/tabbar/README.md index 7156f42ef..2ebf7403e 100644 --- a/src/tabbar/README.md +++ b/src/tabbar/README.md @@ -200,6 +200,8 @@ export default { | ---- | ----------- | ----------------- | | icon | Custom icon | _active: boolean_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md index 2a6d3d4b2..cd4ec3d6d 100644 --- a/src/tabbar/README.zh-CN.md +++ b/src/tabbar/README.zh-CN.md @@ -212,6 +212,8 @@ export default { | ---- | ---------- | ----------------- | | icon | 自定义图标 | _active: boolean_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/tag/README.md b/src/tag/README.md index e1092e8b1..8e5456088 100644 --- a/src/tag/README.md +++ b/src/tag/README.md @@ -116,6 +116,8 @@ export default { | click | Emitted when component is clicked | _event: MouseEvent_ | | close | Emitted when close icon is clicked | _event: MouseEvent_ | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/tag/README.zh-CN.md b/src/tag/README.zh-CN.md index 57a6027a0..9ffcf6322 100644 --- a/src/tag/README.zh-CN.md +++ b/src/tag/README.zh-CN.md @@ -130,6 +130,8 @@ export default { | click | 点击时触发 | _event: MouseEvent_ | | close | 关闭标签时触发 | _event: MouseEvent_ | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/toast/README.md b/src/toast/README.md index 0721f602b..05d940833 100644 --- a/src/toast/README.md +++ b/src/toast/README.md @@ -175,6 +175,8 @@ Toast.resetDefaultOptions('loading'); | transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` | | teleport | Specifies a target element where Toast will be mounted | _string \| Element_ | `body` | +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/toast/README.zh-CN.md b/src/toast/README.zh-CN.md index 1cc32b0b3..0ac8d73dc 100644 --- a/src/toast/README.zh-CN.md +++ b/src/toast/README.zh-CN.md @@ -168,7 +168,7 @@ Toast.resetDefaultOptions('loading'); | --- | --- | --- | --- | | type | 提示类型，可选值为 `loading` `success`
`fail` `html` | _string_ | `text` | | position | 位置，可选值为 `top` `bottom` | _string_ | `middle` | -| message | 文本内容，支持通过`\n`换行 | _string_ | `''` | - | +| message | 文本内容，支持通过`\n`换行 | _string_ | `''` | | icon | 自定义图标，支持传入[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | | iconSize | 图标大小，如 `20px` `2em`，默认单位为 `px` | _number \| string_ | `36px` | | iconPrefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | @@ -186,6 +186,8 @@ Toast.resetDefaultOptions('loading'); | transition | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的`name`属性 | _string_ | `van-fade` | | teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | `body` | +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/tree-select/README.md b/src/tree-select/README.md index 3edef4df5..82c5f1f7f 100644 --- a/src/tree-select/README.md +++ b/src/tree-select/README.md @@ -228,6 +228,8 @@ In every tree object, `text` property defines `id` stands for the unique key whi ]; ``` +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/tree-select/README.zh-CN.md b/src/tree-select/README.zh-CN.md index 2c06483b3..7a0f5e6b4 100644 --- a/src/tree-select/README.zh-CN.md +++ b/src/tree-select/README.zh-CN.md @@ -234,6 +234,8 @@ export default { ]; ``` +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/uploader/README.md b/src/uploader/README.md index 14a47cc98..9ffa28a3e 100644 --- a/src/uploader/README.md +++ b/src/uploader/README.md @@ -359,7 +359,17 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Upload ### Types -Get the type definition of the Uploader instance through `UploaderInstance`. +The component exports the following type definitions: + +```ts +import type { + UploaderInstance, + UploaderResultType, + UploaderFileListItem, +} from 'vant'; +``` + +`UploaderInstance` is the type of component instance: ```ts import { ref } from 'vue'; @@ -370,6 +380,8 @@ const uploaderRef = ref(); uploaderRef.value?.chooseFile(); ``` +## Theming + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index db75dfa4b..b16166284 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -384,7 +384,17 @@ before-read、after-read、before-delete 执行时会传递以下回调参数： ### 类型定义 -通过 `UploaderInstance` 获取 Uploader 实例的类型定义（从 3.2.0 版本开始支持）。 +组件导出以下类型定义： + +```ts +import type { + UploaderInstance, + UploaderResultType, + UploaderFileListItem, +} from 'vant'; +``` + +`UploaderInstance` 是组件实例的类型，用法如下： ```ts import { ref } from 'vue'; @@ -395,6 +405,8 @@ const uploaderRef = ref(); uploaderRef.value?.chooseFile(); ``` +## 主题定制 + ### 样式变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。