From b472d4948930ff8b92dc9aa4a72fb1f2c9c1e38e Mon Sep 17 00:00:00 2001 From: Uyarn Date: Wed, 22 Nov 2023 20:13:53 +0800 Subject: [PATCH] fix(statistic): fix font family and add docs detail --- docs/web/api/statistic.en-US.md | 16 +++++++++------- docs/web/api/statistic.md | 10 ++++++---- style/web/components/statistic/_index.less | 5 +++++ style/web/components/statistic/_var.less | 5 +++++ 4 files changed, 25 insertions(+), 11 deletions(-) diff --git a/docs/web/api/statistic.en-US.md b/docs/web/api/statistic.en-US.md index c896515e1e..9db17f353c 100644 --- a/docs/web/api/statistic.en-US.md +++ b/docs/web/api/statistic.en-US.md @@ -6,42 +6,44 @@ usage: { title: "", description: "" } spline: data --- -### 基础用法 +Statistic is used to highlight and display a set of numeric or descriptive statistical data. If you need to maintain the consistent font style of numbers with the site's design, we recommend downloading the TCloudNumber font from the "Number Font" section of fonts, and importing the TCloudNumberVF.ttf font resource into your project for use. + +### Basic Use when you need to highlight a set of numeric or descriptive statistical data. {{ base }} -### 趋势不同的组件 +### Trend Set the trend state of the component through trend and control the trend display position through trendPlacement. {{ trend }} -### 颜色 +### Color The color style provides five default TDesign style color values, which can also be customized. {{ color }} -### 前缀后缀/自定义 +### Prefix/Suffix Slot Customize through the prefix and suffix slots. {{ slot }} -### 数值动画 +### Animation Configure the initial value and duration of the animation through animation. Use the animationStart attribute to control when the animation starts. If there are special requirements, you can also use ref to get the instance and call start for control. {{ animation }} -### 加载中 +### Loading Control the loading state of the numeric value through loading. {{ loading }} -### 组合使用 +### Combination {{ combination }} diff --git a/docs/web/api/statistic.md b/docs/web/api/statistic.md index 2c27cdda12..a24f55a768 100644 --- a/docs/web/api/statistic.md +++ b/docs/web/api/statistic.md @@ -2,10 +2,12 @@ title: Statistic 统计数值 description: 突出展示某个或某组数字、带描述的统计类数据。 isComponent: true -usage: { title: '', description: '' } +usage: { title: "", description: "" } spline: data --- +Statistic 组件用于突出展示某个或某组数字、带描述的统计类数据，如果需要与站点演示一直的数字字体效果，推荐您到 数字字体章节，将 TCloudNumber 字体下载并将包含的 TCloudNumberVF.ttf 做为 TCloudNumber 字体资源引入到具体项目中使用。 + ### 基础用法 当需要突出某个或某组数字或展示带描述的统计类数据时使用。 @@ -23,6 +25,7 @@ spline: data 颜色风格默认提供 TDesign 风格的五种颜色值，也可以使用自定义色值。 {{ color }} + ### 前缀后缀/自定义 通过 prefix 和 suffix 插槽自定义。 @@ -31,8 +34,8 @@ spline: data ### 数值动画 -通过 `animatio` 配置动画的初始值和持续时间。使用 `animationStart`属性可以控制动画开始时刻。 -如果有特殊需求时也可以通过ref获取实例，调用`start`进行控制。 +通过 `animation` 配置动画的初始值和持续时间。使用 `animationStart`属性可以控制动画开始时刻。 +如果有特殊需求时也可以通过 ref 获取实例，调用`start`进行控制。 {{ animation }} @@ -45,4 +48,3 @@ spline: data ### 组合使用 {{ combination }} - diff --git a/style/web/components/statistic/_index.less b/style/web/components/statistic/_index.less index ef35d46b32..abc8658970 100644 --- a/style/web/components/statistic/_index.less +++ b/style/web/components/statistic/_index.less @@ -24,11 +24,13 @@ &-value { font-size: @statistic-value-font-size; line-height: @statistic-value-line-height; + font-family: @statistic-font-family; } &-unit { font-size: @statistic-unit-font-size; margin-left: @statistic-unit-margin-left; + font-family: @statistic-font-family; } &-suffix { @@ -51,5 +53,8 @@ &-extra { margin-top: @statistic-extra-margin-top; + .@{prefix}-space .@{prefix}-space-item { + display: flex; + } } } diff --git a/style/web/components/statistic/_var.less b/style/web/components/statistic/_var.less index c7c04ed865..818a065474 100644 --- a/style/web/components/statistic/_var.less +++ b/style/web/components/statistic/_var.less @@ -21,3 +21,8 @@ @statistic-suffix-margin-left: @comp-margin-s; @statistic-extra-margin-top: @spacer-1; + +@statistic-font-family: TCloudNumber, -apple-system, BlinkMacSystemFont, + Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, + Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol;