iter(g10): 新增 statistic 统计数值组件
This commit is contained in:
@@ -39,6 +39,7 @@ import {
|
||||
slider,
|
||||
spinner,
|
||||
stepper,
|
||||
statistic,
|
||||
switchButton,
|
||||
tabs,
|
||||
tag,
|
||||
@@ -154,6 +155,10 @@ const menuPick = signal('');
|
||||
// —— 禁用态演示:开关信号同时绑定 switch 的 checked 与 checkbox 的 disabled ——
|
||||
const locked = signal(true);
|
||||
|
||||
// —— 统计数值:两个指标共用同一组按钮刷新,演示滚动过渡 ——
|
||||
const gmv = signal(128000);
|
||||
const orders = signal(2048);
|
||||
|
||||
// —— 分段控制器:两个实例共用同一信号,演示信号驱动同步与整组禁用 ——
|
||||
const range = signal('week');
|
||||
|
||||
@@ -449,6 +454,25 @@ const content = h(
|
||||
button({ label: '导出', variant: 'ghost' }),
|
||||
),
|
||||
),
|
||||
section(
|
||||
'sec-statistic',
|
||||
'统计数值',
|
||||
'statistic:大号等宽数字 + 前后缀 + 环比趋势;value 变化时 400ms 缓出滚动(减弱动效偏好下直落终值)。',
|
||||
h(
|
||||
'div',
|
||||
{ class: 'row' },
|
||||
statistic({ title: '本月 GMV', value: gmv, prefix: '¥', precision: 2, trend: 'up' }),
|
||||
statistic({ title: '订单数', value: orders, suffix: '单', trend: 'down' }),
|
||||
),
|
||||
h(
|
||||
'div',
|
||||
{ class: 'row' },
|
||||
button({ label: '刷新数据', variant: 'ghost', onClick: () => {
|
||||
gmv(gmv() + Math.round(Math.random() * 20000 - 8000)); // 随机涨跌,演示双向滚动
|
||||
orders(orders() + Math.round(Math.random() * 200 - 80));
|
||||
} }),
|
||||
),
|
||||
),
|
||||
section(
|
||||
'sec-descriptions',
|
||||
'描述列表',
|
||||
|
||||
Reference in New Issue
Block a user