SuperAPI AI 工具集

sgds-components-quantity-toggle

通用与其它

查看项目

更新于 10-15 21:54

技能介绍

用途:<sgds-quantity-toggle> 用于在表单中显示数量选择器,即一个数字输入框两侧带减号(−)与加号(+)图标按钮,适合购物车数量、票数、件数等场景。

主要能力:通过 value 设置初始值(默认 0),min、max 限制取值范围,step 控制每次加减幅度(默认 1)。支持 label、hintText、name、size、disabled、readonly、invalid,以及 hasFeedback(style/text/both)和 invalidFeedback 提供校验提示。

使用方式:需先参考 sgds-components-setup 完成安装与框架集成(React 19+ 与 React ≤18、Vue、Angular)。以标签属性声明组件,例如设置 name、label、value、min、max。监听 sgds-change 事件可在点击按钮或键盘输入后读取 element.value(数字);sgds-input 在每次输入时触发。按钮点击按 step 增减,直接输入可自定义值。设置 min 后,到达最小值时减号按钮禁用;max 同理禁用加号按钮。组件未公开方法。

限制:不暴露自定义属性与 CSS parts,无法通过 CSS 修改样式。readonly 时输入框不可编辑,但加减按钮仍显示。具体安装命令与版本要求见 sgds-components-setup,本页暂未提供。