数字输入框 - Semi Design Next

使用场景

当需要获取一个标准数值时。

代码演示

如何引入

import { InputNumber } from '@fibrous/semi-ui-solid';

基本输入框

简单数字输入框

设置了步长 step=2

设置 shiftStep=100，按住 shift 同时点击按钮，可以一次增加/减少100

设置了上下界 min=1,max=10

代码

import { InputNumber } from '@fibrous/semi-ui-solid';

export default function InputNumberDemo() {
    return (
        <div style={{ width: '280px' }}>
            <span id="inputnumber-basic-simple">简单数字输入框</span>
            <InputNumber aria-labelledby="inputnumber-basic-simple" />
            <br />
            <br />

            <span id="inputnumber-basic-step">设置了步长 step=2 </span>
            <InputNumber aria-labelledby="inputnumber-basic-step" step={2} />
            <br />
            <br />

            <span id="inputnumber-basic-shift-step">设置 shiftStep=100， 按住 shift 同时点击按钮，可以一次增加/减少100 </span>
            <InputNumber aria-labelledby="inputnumber-basic-shift-step" shiftStep={100} />
            <br />
            <br />

            <span id="inputnumber-basic-range">设置了上下界 min=1,max=10</span>
            <InputNumber aria-labelledby="inputnumber-basic-range" min={1} max={10} defaultValue={1} />
            <br />
            <br />
        </div>
    );
}

设置了默认值 defaultValue=1

禁用 disabled=true

设置了小数位数 precision=2

设置了 innerButtons=true

小时

代码

import { InputNumber } from '@fibrous/semi-ui-solid';

export default function InputNumberDemo() {
    return (
        <div style={{ width: '280px' }}>
            <span id="inputnumber-basic-more-default-value">设置了默认值 defaultValue=1 </span>
            <InputNumber aria-labelledby="inputnumber-basic-more-default-value" defaultValue={1} />
            <br />
            <br />

            <span id="inputnumber-basic-more-disabled">禁用 disabled=true</span>
            <InputNumber aria-labelledby="inputnumber-basic-more-disabled" defaultValue={2} disabled />
            <br />
            <br />

            <span id="inputnumber-basic-more-precision">设置了小数位数 precision=2 </span>
            <InputNumber aria-labelledby="inputnumber-basic-more-precision" precision={2} defaultValue={1.234} />
            <br />
            <br />

            <span id="inputnumber-basic-more-inner-buttons">设置了 innerButtons=true </span>
            <InputNumber aria-labelledby="inputnumber-basic-more-inner-buttons" innerButtons suffix="小时" defaultValue={1} style={{ width: '190px' }} />
            <br />
        </div>
    );
}

隐藏步进器

通过innerButtons，你可以将右侧的步进器隐藏进内部，仅hover时才会显示

代码

import { InputNumber } from '@fibrous/semi-ui-solid';

export default function InputNumberDemo() {
    return <InputNumber aria-label="Number with inner buttons" innerButtons style={{ width: '190px' }} />;
}

innerButtons 的按钮在悬停或聚焦时临时替换 suffix 属性的内容，之后恢复原内容。

hideButtons设为true，彻底隐藏步进器

代码

import { InputNumber } from '@fibrous/semi-ui-solid';

export default function InputNumberDemo() {
    return <InputNumber aria-label="Number without buttons" hideButtons style={{ width: '190px' }} />;
}

尺寸

默认尺寸 size=default

大尺寸 size=large

小尺寸 size=small

代码

import { InputNumber } from '@fibrous/semi-ui-solid';

export default function InputNumberDemo() {
    return (
        <div style={{ width: '180px' }}>
            <span id="inputnumber-size-default">默认尺寸 size=default</span>
            <InputNumber aria-labelledby="inputnumber-size-default" />
            <br />
            <br />

            <span id="inputnumber-size-large">大尺寸 size=large</span>
            <InputNumber aria-labelledby="inputnumber-size-large" size="large" />
            <br />
            <br />

            <span id="inputnumber-size-small">小尺寸 size=small</span>
            <InputNumber aria-labelledby="inputnumber-size-small" size="small" />
            <br />
        </div>
    );
}

自定义显示格式与解析方式

formatter 和 parser 一对方法，一般需要同时设置，否则无法正确解析值

人民币

自定义串

代码

import { InputNumber } from '@fibrous/semi-ui-solid';

const log = (v: number | string) => {
    console.log(`Changed to: [${typeof v}] ${v}`);
};

export default function InputNumberDemo() {
    return (
        <div style={{ width: '180px' }}>
            <span id="inputnumber-formatter-rmb">人民币</span>
            <InputNumber aria-labelledby="inputnumber-formatter-rmb" onChange={log} defaultValue={1000} min={0} formatter={(value) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} parser={(value) => value.replace(/￥\s?|(,*)/g, '')} />
            <br />
            <br />

            <span id="inputnumber-formatter-custom">自定义串</span>
            <InputNumber aria-labelledby="inputnumber-formatter-custom" onChange={log} defaultValue={1111} formatter={(value) => String(value).split('').join('-')} parser={(value) => value.replace(/-/g, '')} />
            <br />
        </div>
    );
}

纯数字输入框

搭配 formatter 和 onNumberChange（Vue 为 numberChange 事件）可以实现纯数字输入框。

代码

import { InputNumber } from '@fibrous/semi-ui-solid';

export default function InputNumberDemo() {
    return <InputNumber aria-label="Integer" formatter={(value) => `${value}`.replace(/\D/g, '')} onNumberChange={(number) => console.log(number)} min={0} max={Number.MAX_SAFE_INTEGER} />;
}

货币展示

国际化模式下通过 currency={true}（Vue 中写 currency）开启，组件会自动根据 localeCode 展示对应货币种类。（注意切换语言类型后需要更新组件 key 值）

代码

import { createSignal, For } from 'solid-js';
import type { Locale } from '@fibrous/semi-foundation/locale/interface';
import ar from '@fibrous/semi-foundation/locale/source/ar';
import de from '@fibrous/semi-foundation/locale/source/de';
import en_GB from '@fibrous/semi-foundation/locale/source/en_GB';
import en_US from '@fibrous/semi-foundation/locale/source/en_US';
import es from '@fibrous/semi-foundation/locale/source/es';
import fr from '@fibrous/semi-foundation/locale/source/fr';
import id_ID from '@fibrous/semi-foundation/locale/source/id_ID';
import it from '@fibrous/semi-foundation/locale/source/it';
import ja_JP from '@fibrous/semi-foundation/locale/source/ja_JP';
import ko_KR from '@fibrous/semi-foundation/locale/source/ko_KR';
import ms_MY from '@fibrous/semi-foundation/locale/source/ms_MY';
import nl_NL from '@fibrous/semi-foundation/locale/source/nl_NL';
import pl_PL from '@fibrous/semi-foundation/locale/source/pl_PL';
import pt_BR from '@fibrous/semi-foundation/locale/source/pt_BR';
import ro from '@fibrous/semi-foundation/locale/source/ro';
import ru_RU from '@fibrous/semi-foundation/locale/source/ru_RU';
import sv_SE from '@fibrous/semi-foundation/locale/source/sv_SE';
import th_TH from '@fibrous/semi-foundation/locale/source/th_TH';
import tr_TR from '@fibrous/semi-foundation/locale/source/tr_TR';
import vi_VN from '@fibrous/semi-foundation/locale/source/vi_VN';
import zh_CN from '@fibrous/semi-foundation/locale/source/zh_CN';
import zh_TW from '@fibrous/semi-foundation/locale/source/zh_TW';
import { InputNumber, LocaleProvider, Select } from '@fibrous/semi-ui-solid';

const language: Record<string, Locale> = {
    zh_CN,
    en_GB,
    en_US,
    ko_KR,
    ja_JP,
    ar,
    vi_VN,
    ru_RU,
    id_ID,
    ms_MY,
    th_TH,
    tr_TR,
    pt_BR,
    zh_TW,
    es,
    sv_SE,
    pl_PL,
    nl_NL,
    de,
    it,
    fr,
    ro,
};

export default function InputNumberDemo() {
    const [locale, setLocale] = createSignal<Locale>(zh_CN);
    const [localeCode, setLocaleCode] = createSignal('zh_CN');

    const onLanguageChange = (code: unknown) => {
        if (typeof code !== 'string') {
            return;
        }
        setLocale(language[code]);
        setLocaleCode(code);
    };

    return (
        <>
            <div style={{ 'padding-bottom': '20px' }}>
                <Select aria-label="切换语言" onChange={onLanguageChange} insetLabel="切换语言" style={{ width: '250px' }} defaultValue="zh_CN">
                    <Select.Option value="zh_CN">简体中文</Select.Option>
                    <Select.Option value="en_US">英语（美）</Select.Option>
                    <Select.Option value="en_GB">英语（英）</Select.Option>
                    <Select.Option value="ja_JP">日语</Select.Option>
                    <Select.Option value="ko_KR">韩语</Select.Option>
                    <Select.Option value="ar">阿拉伯语</Select.Option>
                    <Select.Option value="vi_VN">越南语</Select.Option>
                    <Select.Option value="ru_RU">俄罗斯语</Select.Option>
                    <Select.Option value="id_ID">印尼语</Select.Option>
                    <Select.Option value="ms_MY">马来语</Select.Option>
                    <Select.Option value="th_TH">泰语</Select.Option>
                    <Select.Option value="tr_TR">土耳其语</Select.Option>
                    <Select.Option value="pt_BR">葡萄牙语（巴西）</Select.Option>
                    <Select.Option value="zh_TW">繁体中文</Select.Option>
                    <Select.Option value="es">西班牙语</Select.Option>
                    <Select.Option value="de">德语</Select.Option>
                    <Select.Option value="it">意大利语</Select.Option>
                    <Select.Option value="fr">法语</Select.Option>
                    <Select.Option value="ro">罗马尼亚语</Select.Option>
                    <Select.Option value="sv_SE">瑞典语</Select.Option>
                    <Select.Option value="pl_PL">波兰语</Select.Option>
                    <Select.Option value="nl_NL">荷兰语</Select.Option>
                </Select>
            </div>
            <LocaleProvider locale={locale()}>
                {/* the item is the locale code, so a language change remounts the input, as the React key does */}
                <For each={[localeCode()]}>{() => <InputNumber aria-label="金额" currency defaultValue={123456.78} />}</For>
            </LocaleProvider>
        </>
    );
}

也可以通过手动传 localeCode 和 currency 指定展示的货币种类

🇨🇳 人民币

🇪🇺 欧元

🇯🇵 日元

🇻🇳 越南盾

代码

import { InputNumber } from '@fibrous/semi-ui-solid';

const defaultValue = 123456.78;

export default function InputNumberDemo() {
    return (
        <div>
            <div id="inputnumber-currency-locale-cny">🇨🇳 人民币</div>
            <InputNumber aria-labelledby="inputnumber-currency-locale-cny" localeCode="zh-CN" currency="CNY" defaultValue={defaultValue} />
            <br />
            <br />
            <div id="inputnumber-currency-locale-eur">🇪🇺 欧元</div>
            <InputNumber aria-labelledby="inputnumber-currency-locale-eur" localeCode="de-DE" currency="EUR" defaultValue={defaultValue} />
            <br />
            <br />
            <div id="inputnumber-currency-locale-jpy">🇯🇵 日元</div>
            <InputNumber aria-labelledby="inputnumber-currency-locale-jpy" localeCode="ja-JP" currency="JPY" defaultValue={defaultValue} />
            <br />
            <br />
            <div id="inputnumber-currency-locale-vnd">🇻🇳 越南盾</div>
            <InputNumber aria-labelledby="inputnumber-currency-locale-vnd" localeCode="vi-VN" currency="VND" defaultValue={defaultValue} />
            <br />
            <br />
        </div>
    );
}

支持 symbol、code、name 三种展示方式，通过 currencyDisplay 属性控制，默认以货币符号展示。showCurrencySymbol 设置为 false 隐藏货币符号/代码/名称的展示

🇨🇳 CNY ➕ code

🇨🇳 CNY ➕ symbol

🇨🇳 CNY ➕ name

代码

import { InputNumber } from '@fibrous/semi-ui-solid';

const defaultValue = 123456.78;

export default function InputNumberDemo() {
    return (
        <div>
            <div id="inputnumber-currency-display-code">🇨🇳 CNY ➕ code</div>
            <InputNumber aria-labelledby="inputnumber-currency-display-code" currency="CNY" currencyDisplay="code" defaultValue={defaultValue} />
            <br />
            <br />
            <div id="inputnumber-currency-display-symbol">🇨🇳 CNY ➕ symbol</div>
            <InputNumber aria-labelledby="inputnumber-currency-display-symbol" currency="CNY" currencyDisplay="symbol" defaultValue={defaultValue} />
            <br />
            <br />
            <div id="inputnumber-currency-display-name">🇨🇳 CNY ➕ name</div>
            <InputNumber aria-labelledby="inputnumber-currency-display-name" currency="CNY" currencyDisplay="name" defaultValue={defaultValue} />
            <br />
            <br />
        </div>
    );
}

隐藏货币符号、代码或名称的展示，通过前后缀展示货币符号

🇨🇳 CNY ➕ code

CNY

🇨🇳 CNY ➕ symbol

￥

🇨🇳 CNY ➕ name

人民币

代码

import { InputNumber } from '@fibrous/semi-ui-solid';

const defaultValue = 123456.78;

export default function InputNumberDemo() {
    return (
        <div>
            <div id="inputnumber-currency-affix-code">🇨🇳 CNY ➕ code</div>
            <InputNumber aria-labelledby="inputnumber-currency-affix-code" style={{ width: '200px' }} currency="CNY" prefix="CNY" showCurrencySymbol={false} defaultValue={defaultValue} />
            <br />
            <br />
            <div id="inputnumber-currency-affix-symbol">🇨🇳 CNY ➕ symbol</div>
            <InputNumber aria-labelledby="inputnumber-currency-affix-symbol" style={{ width: '200px' }} currency="CNY" prefix="￥" showCurrencySymbol={false} defaultValue={defaultValue} />
            <br />
            <br />
            <div id="inputnumber-currency-affix-name">🇨🇳 CNY ➕ name</div>
            <InputNumber aria-labelledby="inputnumber-currency-affix-name" style={{ width: '200px' }} currency="CNY" suffix="人民币" showCurrencySymbol={false} defaultValue={defaultValue} />
            <br />
            <br />
        </div>
    );
}

科学计数法显示

当数字较长时，可以通过 scientificNotation 属性启用科学计数法显示。失去焦点时显示科学计数法，获得焦点时显示完整数字。

启用科学计数法（默认阈值 15 位）

自定义阈值（10 位）

超大数字

小数场景

代码

import { InputNumber } from '@fibrous/semi-ui-solid';

export default function InputNumberDemo() {
    return (
        <div style={{ width: '280px' }}>
            <span id="inputnumber-scientific-default">启用科学计数法（默认阈值 15 位）</span>
            <InputNumber aria-labelledby="inputnumber-scientific-default" scientificNotation defaultValue={123456789012345} />
            <br />
            <br />

            <span id="inputnumber-scientific-threshold">自定义阈值（10 位）</span>
            <InputNumber aria-labelledby="inputnumber-scientific-threshold" scientificNotation={{ threshold: 10 }} defaultValue={1234567890} />
            <br />
            <br />

            <span id="inputnumber-scientific-large">超大数字</span>
            <InputNumber aria-labelledby="inputnumber-scientific-large" scientificNotation defaultValue={1e16} />
            <br />
            <br />

            <span id="inputnumber-scientific-decimal">小数场景</span>
            <InputNumber aria-labelledby="inputnumber-scientific-decimal" scientificNotation precision={10} defaultValue={0.000000123456789} />
            <br />
            <br />
        </div>
    );
}

API 参考

Props

属性	说明	类型	默认值
addonAfter	后置标签，显示在输入框外部的右侧。	`JSX.Element`	-
addonBefore	前置标签，显示在输入框外部的左侧。	`JSX.Element`	-
borderless	无边框模式。	`boolean`	-
clearIcon	清除按钮的图标，可传元素。仅 `showClear` 为 `true` 时有效。	`JSX.Element`	-
composition	是否启用输入法组合模式。开启后组合输入期间不触发 `onChange`，组合结束后触发一次。	`boolean`	-
currency	货币种类，可选值有 CNY、EUR、USD 等。设为 `true` 时使用 `defaultCurrency`，未设置时为语言包对应的货币。	`string \| boolean`	-
currencyDisplay	货币展示方式，可选 `symbol`、`code`、`name`。	`'code' \| 'symbol' \| 'name'`	-
defaultCurrency	`currency` 为 `true` 时使用的货币种类，优先级为自身属性、全局默认值、语言包。	`string`	-
defaultValue	非受控时的初始值。	`number \| string`	-
disabled	是否禁用。未设置时使用所在 `InputGroup` 的值。	`boolean`	-
formatter	指定输入框展示值的格式，一般与 `parser` 同时设置。	`Type`	-
getValueLength	计算文本长度的函数。设置后由它校验 `maxLength` 与 `minLength`，原生 `maxlength` 属性不再生效。	`Type`	-
hideButtons	隐藏步进按钮；与 `innerButtons` 同时为 `true` 时也不显示内置按钮。	`boolean`	-
hideSuffix	清除按钮显示时隐藏后缀，默认两者并列。	`boolean`	-
innerButtons	将步进按钮放在输入框内部，悬停或聚焦时显示，并临时替换 `suffix`。	`boolean`	`false`
inputRef	原生 `input` 元素的引用回调，接收 `HTMLInputElement`，可用于调用 `select()` 等原生方法。	`Type`	-
inputStyle	原生 `input` 的样式，可以是对象（键为 kebab-case）或字符串。	`JSX.CSSProperties \| string`	-
insetLabel	内嵌标签，显示在输入框内部。	`JSX.Element`	-
insetLabelId	内嵌标签的 id。	`string`	-
keepFocus	点击步进按钮时保持输入框聚焦。	`boolean`	`false`
localeCode	货币模式下用于格式化的语言地区代码，如 zh-CN、en-US、de-DE。优先级为自身属性、全局默认值、LocaleProvider 或 ConfigProvider 的语言包。	`string`	-
max	限定最大值。	`number`	`Infinity`
maximumFractionDigits	显示的最大小数位数，传给 `Intl.NumberFormat`。	`number`	-
maxLength	输入文本的最大长度。	`number`	-
min	限定最小值。	`number`	`-Infinity`
minimumFractionDigits	显示的最小小数位数，传给 `Intl.NumberFormat`。	`number`	-
minLength	输入文本的最小长度。	`number`	-
mode	输入框模式，可选 `password`，此时显示切换可见性的按钮。	`InputMode`	-
onBlur	失去焦点时的回调，事件为输入框外层的 `focusout`。	`Type`	-
onChange	值变化时的回调。`e` 为触发变化的输入、步进按钮的 `pointerdown`、方向键或 Home/End 键、失焦事件。挂载和 `value` 变化不触发，越界值按原样显示，用户操作时才校正并通知。	`Type`	-
onClear	点击清除按钮时的回调。	`Type`	-
onDownClick	点击减小按钮时的回调，参数为步进后的值与 `pointerdown` 事件。长按连续步进时每步都触发，事件为按下时的那一个。	`Type`	-
onEnterPress	按下 Enter 键时的回调。	`Type`	-
onFocus	获得焦点时的回调，事件为输入框外层的 `focusin`。	`Type`	-
onKeyDown	按下键盘按键时的回调，事件为输入框上的 `keydown`。	`Type`	-
onlyBorder	内部属性，指定外框的边框宽度（像素），由其他组件设置，使用方一般不需要传入。	`number`	-
onNumberChange	数字变化时的回调，第一个参数为数字，第二个参数的含义同 `onChange`。	`Type`	-
onUpClick	点击增大按钮时的回调，参数为步进后的值与 `pointerdown` 事件。长按连续步进时每步都触发，事件为按下时的那一个。	`Type`	-
parser	指定从 `formatter` 的展示文本转换回数字串的方式，与 `formatter` 搭配使用。	`Type`	-
placeholder	占位文本。	`string \| number`	-
precision	数值精度，即保留的小数位数。	`number`	-
prefix	前缀内容，显示在输入框内部的左侧。	`JSX.Element`	-
prefixCls	组件样式类名的前缀，根元素类名为前缀加 `-number`，默认即 `semi-input-number`。	`string`	`"semi-input"`
pressInterval	长按步进按钮时，连续触发的间隔，单位毫秒。	`number`	`250`
pressTimeout	长按步进按钮时，开始连续触发前的延迟，单位毫秒。	`number`	`250`
preventScroll	聚焦时是否阻止浏览器滚动文档以显示输入框，作用于组件内的聚焦。	`boolean`	-
readonly	是否只读。锁定输入并隐藏清除按钮，原生 `readOnly` 只锁定输入。	`boolean`	-
ref	根元素（`.semi-input-number`）的引用，类型为 `HTMLDivElement`。根元素的 `focus()` 与 `blur()` 作用于输入框。	`Type`	-
scientificNotation	启用科学计数法显示：失焦时显示科学计数法，聚焦时显示完整数字。可传入 `{ threshold }` 配置阈值，默认 15 位有效数字。不支持货币模式。	`boolean \| ScientificNotationConfig`	-
shiftStep	按住 Shift 时每次改变的步长，可以为小数。	`number`	`10`
showClear	是否显示清除按钮。	`boolean`	-
showClearIgnoreDisabled	内部属性，由 DatePicker 设置，使用方一般不需要传入。	`boolean`	-
showCurrencySymbol	是否显示货币符号、代码或名称，仅货币模式下生效。	`boolean`	`true`
size	输入框大小，可选 `default`、`small`、`large`。所在 `InputGroup` 设置了 `size` 时以其为准。	`InputSize`	-
step	每次改变的步长，可以为小数。	`number`	`1`
suffix	后缀内容，显示在输入框内部的右侧。	`JSX.Element`	-
type	原生 `input` 的 `type` 属性，默认为 `text`。	`string`	-
validateStatus	校验状态，可选 `default`、`error`、`warning`、`success`。	`ValidateStatus`	-
value	当前值，传入即为受控，需要配合 `onChange` 更新。传 `undefined` 时按非受控处理。	`number \| string`	-

class、style 与 ref 落在外层 .semi-input-number 根元素上；其余原生属性和事件（id、name、aria-*、data-*、onInput、onKeyUp 等）落在原生 input 上。

Methods

ref 拿到的是根元素（HTMLDivElement），不是句柄。根元素的 focus() 与 blur() 作用于输入框，focus() 未传参数时遵循 preventScroll 属性。select()、setSelectionRange() 等原生方法，通过 inputRef 取得 input 元素后调用。

Accessibility

参考标准：https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/

ARIA

数字输入框具有 spinbutton role
spinbutton 使用 aria-valuenow 表示当前值，aria-valuemax 表示可以接受的最大值，aria-valuemin 表示可以接受的最小值
当 InputNumber 在 Form 中使用时，输入框的 aria-labelledby 指向 Field label

键盘和焦点

InputNumber 可被获取焦点，键盘用户可以使用 Tab 及 Shift + Tab 切换焦点（增加/减少按钮不可以被键盘聚焦）
键盘用户可以按上键 ⬆️ 或下键 ⬇️ ，输入值将增加或减少 step（默认值为 1）
按住 Shift + 上键 ⬆️ 或下键 ⬇️ ，输入值将增加或减少 shiftStep（默认值为 10）
设置了 min 时按 Home 跳到最小值，设置了 max 时按 End 跳到最大值；未设置对应边界时，两个键照常移动光标
值已在边界、按键后数值不变时，不会触发 onChange（Vue 为 change 事件）

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$transition_duration-inputNumber-bg	var(--semi-transition_duration-none)	数字输入框-背景色-动画持续时间
$transition_function-inputNumber-bg	var(--semi-transition_function-easeIn)	数字输入框-背景色-过渡曲线
$transition_delay-inputNumber-bg	var(--semi-transition_delay-none)	数字输入框-背景色-延迟时间
$transition_duration-inputNumber-border	var(--semi-transition_duration-none)	数字输入框-边框-动画持续时间
$transition_function-inputNumber-border	var(--semi-transition_function-easeIn)	数字输入框-边框-过渡曲线
$transition_delay-inputNumber-border	var(--semi-transition_delay-none)	数字输入框-边框-延迟时间
$transform_scale-inputNumber	var(--semi-transform_scale-none)	数字输入框-变大
$height-inputNumber_button_default	$height-control-default	数字输入框高度 - 默认
$height-inputNumber_button_large	$height-control-large	数字输入框高度 - 大
$height-inputNumber_button_small	$height-control-small	数字输入框高度 - 小
$height-inputNumber_button_inner_default	$height-control-default - 2px	隐藏步进器的数字输入框高度 - 默认
$height-inputNumber_button_inner_large	$height-control-large - 2px	隐藏步进器的数字输入框高度 - 大
$height-inputNumber_button_inner_small	$height-control-small - 2px	隐藏步进器的数字输入框高度 - 小
$width-inputNumber_button	14px	步进器按钮宽度
$radius-inputNumber	var(--semi-border-radius-small)	步进器按钮圆角 - 外部
$radius-inputNumber_inner	var(--semi-border-radius-small)	步进器按钮圆角 - 内部
$spacing-inputNumber_button-marginLeft	4px	步进器按钮左侧外边距
$color-inputNumber_button-text-default	var(--semi-color-text-2)	步进器按钮图标颜色
$color-inputNumber_button-text-disabled	var(--semi-color-disabled-text)	步进器按钮图标颜色 - 禁用
$color-inputNumber_button-bg-default	var(--semi-color-bg-2)	步进器按钮背景颜色
$color-inputNumber_button-bg-disabled	var(--semi-color-disabled-fill)	步进器按钮背景颜色 - 禁用
$color-inputNumber_button-bg-hover	var(--semi-color-fill-0)	步进器按钮图标颜色 - 悬浮
$color-inputNumber_button-bg-active	var(--semi-color-fill-1)	步进器按钮图标颜色 - 按下
$color-inputNumber_button-border-default	var(--semi-color-border)	步进器按钮描边颜色
$color-inputNumber_button-border-hover	var(--semi-color-fill-2)	步进器按钮描边颜色 - 悬浮
$width-inputNumber_button-border	1px	步进器按钮描边宽度
$spacing-inputNumber_button_inner-marginLeft	$spacing-tight	隐藏步进器按钮左侧外边距
$spacing-inputNumber_clearbtn_suffix-marginLeft	-$spacing-extra-tight	清空按钮左侧外边距