From 9fa21a8da0308cdc7749d62109441400cc7a4179 Mon Sep 17 00:00:00 2001 From: twinkleli <310227663@qq.com> Date: Tue, 29 Aug 2023 11:51:05 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(rate):=20rate=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=BA=93=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E5=89=8D=E7=BC=80iconPrefix,=E9=80=82=E9=85=8D?= =?UTF-8?q?=E7=AC=AC=E4=B8=89=E6=96=B9=E5=9B=BE=E6=A0=87=E5=BA=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit rate组件库支持自定义图标前缀iconPrefix,适配第三方图标库 fix #2327 --- package.json | 2 +- src/rate/README.en-US.md | 63 +++++++++++--------- src/rate/README.md | 67 ++++++++++++---------- src/rate/_example/custom-prefix/index.js | 13 +++++ src/rate/_example/custom-prefix/index.json | 6 ++ src/rate/_example/custom-prefix/index.wxml | 4 ++ src/rate/_example/custom-prefix/index.wxss | 22 +++++++ src/rate/_example/iconfont.wxss | 31 ++++++++++ src/rate/_example/rate.json | 1 + src/rate/_example/rate.less | 1 + src/rate/_example/rate.wxml | 3 + src/rate/props.ts | 5 ++ src/rate/rate.wxml | 1 + src/rate/type.ts | 8 +++ 14 files changed, 168 insertions(+), 59 deletions(-) create mode 100644 src/rate/_example/custom-prefix/index.js create mode 100644 src/rate/_example/custom-prefix/index.json create mode 100644 src/rate/_example/custom-prefix/index.wxml create mode 100644 src/rate/_example/custom-prefix/index.wxss create mode 100644 src/rate/_example/iconfont.wxss diff --git a/package.json b/package.json index c8fc7ce38..5a4819d33 100644 --- a/package.json +++ b/package.json @@ -125,4 +125,4 @@ "dependencies": { "dayjs": "^1.10.7" } -} \ No newline at end of file +} diff --git a/src/rate/README.en-US.md b/src/rate/README.en-US.md index 98e4d73a7..996e14a41 100644 --- a/src/rate/README.en-US.md +++ b/src/rate/README.en-US.md @@ -1,39 +1,48 @@ + :: BASE_DOC :: ## API ### Rate Props -name | type | default | description | required --- | -- | -- | -- | -- -allow-half | Boolean | false | \- | N -color | String / Array | '#ED7B2F' | `0.30.0`。Typescript：`string \| Array` | N -count | Number | 5 | \- | N -disabled | Boolean | - | \- | N -external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N -gap | String / Number | 8 | \- | N -icon | String / Array | - | Typescript：`string \| string[]` | N -show-text | Boolean | false | \- | N -size | String | 24px | \- | N -texts | Array | [] | Typescript：`Array` | N -value | Number | 0 | \- | N -default-value | Number | undefined | uncontrolled property | N -variant | String | outline | options：outline/filled | N +| name | type | default | description | required | +| ---------------- | --------------- | --------- | ----------------------------------------------- | -------- | +| allow-half | Boolean | false | \- | N | +| color | String / Array | '#ED7B2F' | `0.30.0`。Typescript：`string \| Array` | N | +| count | Number | 5 | \- | N | +| disabled | Boolean | - | \- | N | +| external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N | +| gap | String / Number | 8 | \- | N | +| icon | String / Array | - | Typescript：`string \| string[]` | N | +| show-text | Boolean | false | \- | N | +| size | String | 24px | \- | N | +| texts | Array | [] | Typescript：`Array` | N | +| value | Number | 0 | \- | N | +| default-value | Number | undefined | uncontrolled property | N | +| iconPrefix | String | undefined | icon prefix | N | +| variant | String | outline | options：outline/filled | N | ### Rate Events -name | params | description --- | -- | -- -change | `(value: number)` | \- +| name | params | description | +| ------ | ----------------- | ----------- | +| change | `(value: number)` | \- | ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. -Name | Default Value | Description --- | -- | -- ---td-rate-icon-scale | 1.33 | - ---td-rate-selected-color | @warning-color | - ---td-rate-text-active-color | @font-gray-1 | - ---td-rate-text-active-font-weight | 600 | - ---td-rate-text-color | @font-gray-4 | - ---td-rate-text-font-size | @font-size-m | - ---td-rate-unselected-color | @bg-color-secondarycomponent | - +| Name | Default Value | Description | +| --------------------------------- | ---------------------------- | ----------- | +| --td-rate-icon-scale | 1.33 | - | +| --td-rate-selected-color | @warning-color | - | +| --td-rate-text-active-color | @font-gray-1 | - | +| --td-rate-text-active-font-weight | 600 | - | +| --td-rate-text-color | @font-gray-4 | - | +| --td-rate-text-font-size | @font-size-m | - | +| --td-rate-unselected-color | @bg-color-secondarycomponent | - | diff --git a/src/rate/README.md b/src/rate/README.md index 6dc55a693..5bc3c50ef 100644 --- a/src/rate/README.md +++ b/src/rate/README.md @@ -58,46 +58,51 @@ isComponent: true {{ special }} +自定义图片前缀 + +{{iconPrefix}} + ## API ### Rate Props -名称 | 类型 | 默认值 | 说明 | 必传 --- | -- | -- | -- | -- -allow-half | Boolean | false | 是否允许半选 | N -color | String / Array | '#ED7B2F' | `0.30.0`。评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array` | N -count | Number | 5 | 评分的数量 | N -disabled | Boolean | - | 是否禁用评分 | N -gap | Number | 8 | 评分图标的间距 | N -icon | String / Array | - | `0.30.0`。自定义评分图标，[选中图标，未选中图标]。TS 类型：`string \| string[]` | N -show-text | Boolean | false | 是否显示对应的辅助文字 | N -size | String | 24px | 评分图标的大小 | N -texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array` | N -value | Number | 0 | 选择评分的值 | N -default-value | Number | undefined | 选择评分的值。非受控属性 | N -variant | String | outline | 废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled | N +| 名称 | 类型 | 默认值 | 说明 | 必传 | +| ------------- | -------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | +| allow-half | Boolean | false | 是否允许半选 | N | +| color | String / Array | '#ED7B2F' | `0.30.0`。评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array` | N | +| count | Number | 5 | 评分的数量 | N | +| disabled | Boolean | - | 是否禁用评分 | N | +| gap | Number | 8 | 评分图标的间距 | N | +| icon | String / Array | - | `0.30.0`。自定义评分图标，[选中图标，未选中图标]。TS 类型：`string \| string[]` | N | +| show-text | Boolean | false | 是否显示对应的辅助文字 | N | +| size | String | 24px | 评分图标的大小 | N | +| texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array` | N | +| value | Number | 0 | 选择评分的值 | N | +| default-value | Number | undefined | 选择评分的值。非受控属性 | N | +| iconPrefix | String | undefined | 定义图标前缀 | N | +| variant | String | outline | 废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled | N | ### Rate Events -名称 | 参数 | 描述 --- | -- | -- -change | `(value: number)` | 评分数改变时触发 +| 名称 | 参数 | 描述 | +| ------ | ----------------- | ---------------- | +| change | `(value: number)` | 评分数改变时触发 | ### Rate 外部样式类 -类名 | 说明 --- | -- -t-class | 根节点样式类 -t-class-icon` | 图标样式类 -t-class-text | 文本样式类 +| 类名 | 说明 | +| ------------- | ------------ | +| t-class | 根节点样式类 | +| t-class-icon` | 图标样式类 | +| t-class-text | 文本样式类 | ### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。 -名称 | 默认值 | 描述 --- | -- | -- ---td-rate-icon-scale | 1.33 | - ---td-rate-selected-color | @warning-color | - ---td-rate-text-active-color | @font-gray-1 | - ---td-rate-text-active-font-weight | 600 | - ---td-rate-text-color | @font-gray-4 | - ---td-rate-text-font-size | @font-size-m | - ---td-rate-unselected-color | @bg-color-secondarycomponent | - +| 名称 | 默认值 | 描述 | +| --------------------------------- | ---------------------------- | ---- | +| --td-rate-icon-scale | 1.33 | - | +| --td-rate-selected-color | @warning-color | - | +| --td-rate-text-active-color | @font-gray-1 | - | +| --td-rate-text-active-font-weight | 600 | - | +| --td-rate-text-color | @font-gray-4 | - | +| --td-rate-text-font-size | @font-size-m | - | +| --td-rate-unselected-color | @bg-color-secondarycomponent | - | diff --git a/src/rate/_example/custom-prefix/index.js b/src/rate/_example/custom-prefix/index.js new file mode 100644 index 000000000..5a116c088 --- /dev/null +++ b/src/rate/_example/custom-prefix/index.js @@ -0,0 +1,13 @@ +Component({ + data: { + value: 3, + }, + methods: { + onChange(e) { + const { value } = e.detail; + this.setData({ + value, + }); + }, + }, +}); diff --git a/src/rate/_example/custom-prefix/index.json b/src/rate/_example/custom-prefix/index.json new file mode 100644 index 000000000..724692fed --- /dev/null +++ b/src/rate/_example/custom-prefix/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-rate": "tdesign-miniprogram/rate/rate" + } +} diff --git a/src/rate/_example/custom-prefix/index.wxml b/src/rate/_example/custom-prefix/index.wxml new file mode 100644 index 000000000..8b3598c41 --- /dev/null +++ b/src/rate/_example/custom-prefix/index.wxml @@ -0,0 +1,4 @@ + + 自定义icon前缀 + + diff --git a/src/rate/_example/custom-prefix/index.wxss b/src/rate/_example/custom-prefix/index.wxss new file mode 100644 index 000000000..285bffba7 --- /dev/null +++ b/src/rate/_example/custom-prefix/index.wxss @@ -0,0 +1,22 @@ +.demo-rate { + background-color: #fff; + height: 96rpx; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 32rpx; + border-bottom: solid 1rpx #f0f0f0; + border-top: solid 1rpx #f0f0f0; + margin-top: 32rpx; + margin-bottom: 32rpx; +} + +.demo-rate__title { + width: 200rpx; +} + +.demo-rate__transparent { + background-color: transparent; + padding-left: 32rpx; + border: 0; +} diff --git a/src/rate/_example/iconfont.wxss b/src/rate/_example/iconfont.wxss new file mode 100644 index 000000000..85f8b2080 --- /dev/null +++ b/src/rate/_example/iconfont.wxss @@ -0,0 +1,31 @@ +@font-face { + font-family: 'icon'; /* Project id 3144196 */ + src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPUAAsAAAAACGAAAAOFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDGgqEPIQBATYCJAMUCwwABCAFhDcHQhtVBxHVmy/JfhzGjunMd9u7ZdNoJGL95+B5ckPfvzsIgZjoVHHRKe1qNlEdfUoAPFpzlgKhvLdV7dpf4MyYhRbmw1+ObxM9+wDSmJP2okWn0XkEe1sWSOAJJR4mYA3TSx7kD48ggEsZ9VFNm7ftSsjYQVPHk4DBlwpUtTJ21IhBONyBmagVHAR76U6DbMQCtUo9BzZk75cfVIgDCkvjn9NxeLOhPPTb+R31wtqF6PckEgQ4WwEWoIGih7mk93SgK7pIF6FxhwKGPDTZIOB3rK312yWKZ//hgaDQGBAbvzoIgIYwY8BvFxEI+O0JFPgdCDT4HVVfpN0CwAWWfQ68w1yWUQUvFRUUEJMZ0zBmzKILZ26suXbqHGrh2ZNXV18/fV68hafWnInRi06vPskQ3VV6eKqH9vB2nPDWbNu2C1xZtH31VhgiPfbE7kmo2ba78+R9oy6cueOtuXVuHwt3+kNEdfVYNWfEmhMii067q3cK6kYqetu26F2w6GjUtlO79uXprVE7b7r38YsHl62wxmwPBrvdDvyl7A2Os2v65berseOS461n/fL6PbPim4dlpFSGJIdmpmSGMm3NvmaVrZtVNPePPcwtGCU9i0KcX3dKyKGCTUFnY9aHrCNjTeN5PzcGxQd6498Eh4WH5zXPjbbvdIxJHLz4dnx4QLNlC4Y/nd98/MZvwLSjqfOTGoRGhEX8dfOa50XbtyfEJHVbM+JAnW7F8SnLQr7+lxVUpFRN6PF4ZnpY62/ZybnNs8Ki0qIimiWf7HroYciPBM85E3+uGqdmAKjPamomzPiEAAJN2zkJA0Lr/nY8A8DHwLJq4DAszzgoYIrfbuy7UNRYGTKaoc7Ih2BddD9goQJcXKDWj0Tw8RhT5OIkCKahZFAEEAuNIYUyXAYsPHJgYyiHSyHV+z0iGYhGTCCQwxQAwWEXFCEcgsbhAmW4G7CI4QFsHF7AxXn+ZQ85QYZDxpFxgekHag6eQj1npVcULztmKY8ST8xFwTh0dVvPXdBjXrOmvEXPTEA5ODhvvQ+tDRBz0DhzLZnjvmlo6Cn1HNzqkHFkXIDpB6g5eEos3Fx+RfGyYx5QZ74nQl3hclgPdNS0E9TF4Ce7XrS+vEUPMwFkq4MDzlf70AbpAMThaRpnrpEbknFPg8RoqaG+1uTekpz14a+2RIkWI5bYbAdV7S6ydTKm+/ggVysAAAA=') + format('woff2'), + url('//at.alicdn.com/t/font_3144196_s14ifjx2cyi.woff?t=1642299317916') format('woff'), + url('//at.alicdn.com/t/font_3144196_s14ifjx2cyi.ttf?t=1642299317916') format('truetype'); +} + +.icon { + font-family: 'icon' !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-a-0:before { + content: '\e64d'; +} + +.icon-a-1h:before { + content: '\e64e'; +} + +.icon-a-2h:before { + content: '\e64f'; +} + +.icon-a-3h:before { + content: '\e650'; +} diff --git a/src/rate/_example/rate.json b/src/rate/_example/rate.json index edab627c0..947f43cb8 100644 --- a/src/rate/_example/rate.json +++ b/src/rate/_example/rate.json @@ -3,6 +3,7 @@ "usingComponents": { "base": "./base", "custom": "./custom", + "custom-prefix": "./custom-prefix", "special": "./special", "un-filled": "./un-filled", "count": "./count", diff --git a/src/rate/_example/rate.less b/src/rate/_example/rate.less index e69de29bb..9b05a505d 100644 --- a/src/rate/_example/rate.less +++ b/src/rate/_example/rate.less @@ -0,0 +1 @@ +@import './iconfont.wxss'; diff --git a/src/rate/_example/rate.wxml b/src/rate/_example/rate.wxml index add269288..7e92074fd 100644 --- a/src/rate/_example/rate.wxml +++ b/src/rate/_example/rate.wxml @@ -8,6 +8,9 @@ 自定义评分 + 自定义icon前缀评分(适配自有图标库) + + 自定义评分数量 diff --git a/src/rate/props.ts b/src/rate/props.ts index 5d0c4f0e3..3d4697c88 100644 --- a/src/rate/props.ts +++ b/src/rate/props.ts @@ -34,6 +34,11 @@ const props: TdRateProps = { type: null, value: 8, }, + /** 自定义图标前缀 */ + iconPrefix: { + type: String, + value: undefined, + }, /** 自定义评分图标，[选中图标，未选中图标] */ icon: { type: null, diff --git a/src/rate/rate.wxml b/src/rate/rate.wxml index 961afe23f..3502ffdf8 100644 --- a/src/rate/rate.wxml +++ b/src/rate/rate.wxml @@ -24,6 +24,7 @@ t-class="{{prefix}}-class-icon" name="{{utils.getIconName(defaultValue, value, index, icon)}}" size="{{ size }}" + prefix="{{iconPrefix}}" /> Date: Tue, 29 Aug 2023 15:41:45 +0800 Subject: [PATCH 2/2] feat: fix fix --- src/rate/README.en-US.md | 58 +++++++++++------------------------- src/rate/README.md | 64 ++++++++++++++++++++-------------------- 2 files changed, 50 insertions(+), 72 deletions(-) diff --git a/src/rate/README.en-US.md b/src/rate/README.en-US.md index 996e14a41..a8f33a89b 100644 --- a/src/rate/README.en-US.md +++ b/src/rate/README.en-US.md @@ -1,48 +1,26 @@ - :: BASE_DOC :: ## API ### Rate Props -| name | type | default | description | required | -| ---------------- | --------------- | --------- | ----------------------------------------------- | -------- | -| allow-half | Boolean | false | \- | N | -| color | String / Array | '#ED7B2F' | `0.30.0`。Typescript：`string \| Array` | N | -| count | Number | 5 | \- | N | -| disabled | Boolean | - | \- | N | -| external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N | -| gap | String / Number | 8 | \- | N | -| icon | String / Array | - | Typescript：`string \| string[]` | N | -| show-text | Boolean | false | \- | N | -| size | String | 24px | \- | N | -| texts | Array | [] | Typescript：`Array` | N | -| value | Number | 0 | \- | N | -| default-value | Number | undefined | uncontrolled property | N | -| iconPrefix | String | undefined | icon prefix | N | -| variant | String | outline | options：outline/filled | N | +name | type | default | description | required +-- | -- | -- | -- | -- +allow-half | Boolean | false | \- | N +count | Number | 5 | \- | N +custom-style `v0.25.0` | String | - | \- | N +disabled | Boolean | false | \- | N +external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N +gap | Number | 8 | \- | N +show-text | Boolean | false | \- | N +size | String | 20 | \- | N +texts | Array | [] | Typescript：`Array` | N +value | Number | 0 | \- | N +default-value | Number | undefined | uncontrolled property | N +iconPrefix | String | undefined | icon prefix | N +variant | String | outline | options：outline/filled | N ### Rate Events -| name | params | description | -| ------ | ----------------- | ----------- | -| change | `(value: number)` | \- | - - -### CSS Variables -The component provides the following CSS variables, which can be used to customize styles. -| Name | Default Value | Description | -| --------------------------------- | ---------------------------- | ----------- | -| --td-rate-icon-scale | 1.33 | - | -| --td-rate-selected-color | @warning-color | - | -| --td-rate-text-active-color | @font-gray-1 | - | -| --td-rate-text-active-font-weight | 600 | - | -| --td-rate-text-color | @font-gray-4 | - | -| --td-rate-text-font-size | @font-size-m | - | -| --td-rate-unselected-color | @bg-color-secondarycomponent | - | +name | params | description +-- | -- | -- +change | `(value: number)` | \- diff --git a/src/rate/README.md b/src/rate/README.md index 5bc3c50ef..685cc4178 100644 --- a/src/rate/README.md +++ b/src/rate/README.md @@ -66,43 +66,43 @@ isComponent: true ## API ### Rate Props -| 名称 | 类型 | 默认值 | 说明 | 必传 | -| ------------- | -------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | -| allow-half | Boolean | false | 是否允许半选 | N | -| color | String / Array | '#ED7B2F' | `0.30.0`。评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array` | N | -| count | Number | 5 | 评分的数量 | N | -| disabled | Boolean | - | 是否禁用评分 | N | -| gap | Number | 8 | 评分图标的间距 | N | -| icon | String / Array | - | `0.30.0`。自定义评分图标，[选中图标，未选中图标]。TS 类型：`string \| string[]` | N | -| show-text | Boolean | false | 是否显示对应的辅助文字 | N | -| size | String | 24px | 评分图标的大小 | N | -| texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array` | N | -| value | Number | 0 | 选择评分的值 | N | -| default-value | Number | undefined | 选择评分的值。非受控属性 | N | -| iconPrefix | String | undefined | 定义图标前缀 | N | -| variant | String | outline | 废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled | N | +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +allow-half | Boolean | false | 是否允许半选 | N +color | String / Array | '#ED7B2F' | `0.30.0`。评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array` | N +count | Number | 5 | 评分的数量 | N +disabled | Boolean | - | 是否禁用评分 | N +gap | Number | 8 | 评分图标的间距 | N +icon | String / Array | - | `0.30.0`。自定义评分图标，[选中图标，未选中图标]。TS 类型：`string \| string[]` | N +show-text | Boolean | false | 是否显示对应的辅助文字 | N +size | String | 24px | 评分图标的大小 | N +texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array` | N +value | Number | 0 | 选择评分的值 | N +default-value | Number | undefined | 选择评分的值。非受控属性 | N +iconPrefix | String | undefined | 定义图标前缀 +variant | String | outline | 废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled | N ### Rate Events -| 名称 | 参数 | 描述 | -| ------ | ----------------- | ---------------- | -| change | `(value: number)` | 评分数改变时触发 | +名称 | 参数 | 描述 +-- | -- | -- +change | `(value: number)` | 评分数改变时触发 ### Rate 外部样式类 -| 类名 | 说明 | -| ------------- | ------------ | -| t-class | 根节点样式类 | -| t-class-icon` | 图标样式类 | -| t-class-text | 文本样式类 | +类名 | 说明 +-- | -- +t-class | 根节点样式类 +t-class-icon` | 图标样式类 +t-class-text | 文本样式类 ### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。 -| 名称 | 默认值 | 描述 | -| --------------------------------- | ---------------------------- | ---- | -| --td-rate-icon-scale | 1.33 | - | -| --td-rate-selected-color | @warning-color | - | -| --td-rate-text-active-color | @font-gray-1 | - | -| --td-rate-text-active-font-weight | 600 | - | -| --td-rate-text-color | @font-gray-4 | - | -| --td-rate-text-font-size | @font-size-m | - | -| --td-rate-unselected-color | @bg-color-secondarycomponent | - | +名称 | 默认值 | 描述 +-- | -- | -- +--td-rate-icon-scale | 1.33 | - +--td-rate-selected-color | @warning-color | - +--td-rate-text-active-color | @font-gray-1 | - +--td-rate-text-active-font-weight | 600 | - +--td-rate-text-color | @font-gray-4 | - +--td-rate-text-font-size | @font-size-m | - +--td-rate-unselected-color | @bg-color-secondarycomponent | -