跳到主要内容

价格 Price

价格,常用于价格字体大小不一的场景

安装使用

import { TiPrice } from '@titian-design/mobile-react';

用法示例

基本用法

const App: React.FC = () => {
return (
<>
<TiPrice
label='销售价'
unit='$'
prefix='最低'
value={29.99}
suffix='起'
/>
</>
);
}

TiPrice API

属性 Properties

名称类型必填默认值说明备注
labelstring-描述-
unitstring-单位-
prefixstring-前缀-
valuenumber0价格-
suffixstring-后缀-
radixnumber2小数点精度-
extStylestring-根节点样式-

CSS 变量 CSS Variables

变量默认值说明备注
--price-colorvar(--price-color, var(--theme-price, rgb(var(--theme-r, 250), var(--theme-g, 44), var(--theme-b, 25))))价格颜色,默认为 --theme-price-
--price-label-colorinherit价格描述-颜色-
--price-label-font-size24px价格描述-字号-
--price-label-font-weight400价格描述-字重-
--price-label-line-height28px价格描述-行高-
--price-prefix-colorinherit前缀-颜色-
--price-prefix-font-size24px前缀-字号-
--price-prefix-font-weight400前缀-字重-
--price-prefix-line-height28px前缀-行高-
--price-suffix-colorinherit后缀-颜色-
--price-suffix-font-size24px后缀-字号-
--price-suffix-font-weight400后缀-字重-
--price-suffix-line-height28px后缀-行高-
--price-unit-colorinherit单位-颜色-
--price-unit-margin-left4px单位-左边距-
--price-unit-margin-rightinherit单位-右边距-
--price-unit-font-size30px单位-字号-
--price-unit-font-weight600单位-字重-
--price-unit-line-height28px单位-行高-
--price-integer-colorinherit整数部分-颜色-
--price-integer-font-size48px整数部分-字号-
--price-integer-font-familyfont-wemo整数部分-字体族-
--price-integer-font-weight400整数部分-字重-
--price-integer-line-height48px整数部分-行高-
--price-fraction-colorinherit小数部分-颜色-
--price-fraction-font-size32px小数部分-字号-
--price-fraction-font-familyfont-wemo小数部分-字体族-
--price-fraction-font-weight400小数部分-字重-
--price-fraction-line-height28px小数部分-行高-