Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: update statistic style and docs #1329

Merged
merged 1 commit into from
May 10, 2023
Merged

feat: update statistic style and docs #1329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions docs/web/api/statistic-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
---
title: Statistic
description: Highlight and display a set of numeric or descriptive statistical data.
isComponent: true
usage: { title: '', description: '' }
spline: data
---

### 基础用法

Use when you need to highlight a set of numeric or descriptive statistical data.

{{ base }}

### 趋势不同的组件

Set the trend state of the component through trend and control the trend display position through trendPlacement.

{{ trend }}

### 颜色

The color style provides five default TDesign style color values, which can also be customized.

{{ color }}
### 前缀后缀/自定义

Customize through the prefix and suffix slots.

{{ slot }}

### 数值动画

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 }}

### 加载中

Control the loading state of the numeric value through loading.

{{ loading }}

### 组合使用

{{ combination }}

24 changes: 17 additions & 7 deletions docs/web/api/statistic.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Statistic 数值显示
title: Statistic 统计数值
description: 突出展示某个或某组数字、带描述的统计类数据。
isComponent: true
usage: { title: '', description: '' }
Expand All @@ -12,16 +12,27 @@ spline: data

{{ base }}

### 趋势不同的组件

通过 `trend` 设置组件的趋势状态，配合 `trendPlacement` 控制趋势展示的位置。

{{ trend }}

### 颜色

颜色风格默认提供 TDesign 风格的五种颜色值，也可以使用自定义色值。

{{ color }}
### 前缀后缀/自定义

通过 prefix 和 suffix 插槽可以添加前后缀。通过 styleValue 可以自定义数值显示的样式。
通过 prefix 和 suffix 插槽自定义。

{{ slot }}

### 数值动画

通过 `animatio` 可以开启数值动画。使用 `start`属性可以控制动画开始时刻。
如果有特殊需求时也可以通过ref获取实例，调用`startUp`进行控制。
通过 `animatio` 配置动画的初始值和持续时间。使用 `animationStart`属性可以控制动画开始时刻。
如果有特殊需求时也可以通过ref获取实例，调用`start`进行控制。

{{ animation }}

Expand All @@ -31,8 +42,7 @@ spline: data

{{ loading }}

### 计时组件
### 组合使用

倒计时组件。可以通过 `now` 来传入 `Date.now()`，用于修复初始值显示的小误差问题。
{{ combination }}

{{ countdown }}
57 changes: 31 additions & 26 deletions style/web/components/statistic/_index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,40 +11,45 @@

&-title {
font-size: @statistic-title-font-size;
font-weight: @statistic-title-font-weight;
margin-bottom: @statistic-title-margin-bottom;
color: @statistic-title-text-color;
}

&-content {
.@{statistic-cls}-value {
white-space: nowrap;
font-size: @statistic-integer-font-size;
font-weight: @statistic-value-font-weight;
color: @statistic-value-text-color;

&-integer {
white-space: nowrap;
}

&-decimal {
font-size: @statistic-decimal-font-size;
display: inline-block;
}

&-suffix {
font-size: @statistic-suffix-font-size;
margin-left: @statistic-suffix-margin-left;
}

&-prefix {
font-size: @statistic-value-icon-size;
margin-right: @statistic-prefix-margin-right;
}
display: inline-block;
line-height: 36px;
font-weight: @statistic-value-font-weight;
color: @statistic-value-text-color;
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
font-family: "TCloud Number";
text-align: left;
white-space: nowrap;

&-value {
font-size: @statistic-value-font-size;
}

&-unit {
font-size: @statistic-unit-font-size;
margin-left: @statistic-unit-margin-left;
}

&-suffix {
display: inline-flex;
align-items: center;
font-size: @statistic-suffix-font-size;
margin-left: @statistic-suffix-margin-left;
}

&-prefix {
display: inline-flex;
align-items: center;
font-size: @statistic-prefix-font-size;
margin-right: @statistic-prefix-margin-right;
}
}

&-extra {
margin-top: @statistic-extra-margin-top;
color: @statistic-extra-text-color;
}
}
36 changes: 15 additions & 21 deletions style/web/components/statistic/_var.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,24 @@
// 组件变量
// 名称可按如下规则定义：
// <component>-[type]-[attrtype]-<attr>-[status]

// component:组件名，如button，
// type: 组件类型，如 button 的次要按钮（line）
// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
// attr: 属性名称，如color、height、radius等
// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等

// 如：@button-line-bg-color-hover
// 如：@button-line-height-s
@import "../../base.less";

@statistic-cls: ~"@{prefix}-statistic";

@statistic-text-color: @text-color-secondary;

@statistic-title-font-size: @font-title-medium;
@statistic-title-margin-bottom: @spacer-1;
@statistic-extra-margin-top: @spacer-1;
@statistic-integer-font-size: 26px;
@statistic-decimal-font-size: @statistic-integer-font-size;
@statistic-title-font-weight: 400;
@statistic-title-margin-bottom: @spacer-s;

@statistic-value-font-size: 28px;
@statistic-value-font-weight: 500;
@statistic-value-text-color: @text-color-primary;
@statistic-text-color: @text-color-secondary;
@statistic-title-text-color: @text-color-secondary;
@statistic-extra-text-color: @text-color-secondary;
@statistic-value-icon-size: @font-size-base;
@statistic-suffix-font-size: @font-size-base;

@statistic-unit-font-size: 14px;
@statistic-unit-margin-left: @spacer-s;

@statistic-prefix-font-size: 22px;
@statistic-prefix-margin-right: @spacer-s;

@statistic-suffix-font-size: 22px;
@statistic-suffix-margin-left: @spacer-s;

@statistic-extra-margin-top: @spacer-1;