## 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); } ```