企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
## mo-input > 输入框类。 每个类均可单独使用,样式类(包括圆角)和尺寸类可混用 (如需要添加一个大尺寸的大圆角的文本框则需要使用 `class="mo-input--pill mo-input--large"`混合使用)。 如果要禁用文本框,只需要给文本框添加`disabled`属性; 如果要制度文本框,只需要给文本框添加`readonly`属性 `mo-input`类同样适用于`select`下拉框和`textarea`长文本框,只不过尺寸样式对于`multiple`的`select`以及`textarea`无效,`textarea`高度需要使用`rows`属性来控制 ### api | className | 描述 | 备注 | | --- | --- | --- | | `mo-input` | 默认样式 | `height: 34px` | | `mo-input--primary` | 主色调 | `#0275d8` | | `mo-input--negative` | 消极色 | `#5cb85c` | | `mo-input--positive` | 积极色 | `#d9534f` | | `mo-input--radius` | 小圆角 | `border-radius: 2px` | | `mo-input--pill` | 大圆角 | `border-radius: 200px` | | `mo-input--small` | 小尺寸 | `height: 30px` | | `mo-input--large` | 大尺寸 | `height: 44px` | ### demo ``` html 默认 <input class="mo-input"> 主色调 <input class="mo-input--primary"> 积极色调 <input class="mo-input--positive"> 消极色调 <input class="mo-input--negative"> 小尺寸 <input class="mo-input--small"> 大尺寸 <input class="mo-input--large"> 小圆角 <input class="mo-input--radius"> 大圆角 <input class="mo-input--pill"> 只读文本框 <input class="mo-input" readonly> 禁用文本框 <input class="mo-input" disabled> 用于select <select class="mo-input"> </select> 用于textarea <textarea class="mo-input"></textarea> ``` ### 自定义 ``` scss @import './mixins/input'; //自定义样式(背景,颜色) .mo-input--[style] { @include inputStyle ($border, $focusBorder); } //自定义尺寸 $my-input-size : (font-size:14px, line-height:1.4286, padding-y:6px, padding-x:16px) !default; .mo-input--[size] { @include inputSize ($my-input-size); } ```