多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
## mo-button > 按钮类。 每个类均可单独使用,样式类(包括圆角)和尺寸类可混用 (如需要添加一个大尺寸的主色调按钮则需要使用 `class="mo-button--primary mo-button--large"`混合使用)。 如果要禁用按钮,只需要给按钮添加`disabled`属性 ### api | className | 描述 | 备注 | | --- | --- | --- | | `mo-button` | 默认样式 | `height: 34px` | | `mo-button--primary` | 主色调 | `#0275d8` | | `mo-button--negative` | 消极色 | `#5cb85c` | | `mo-button--positive` | 积极色 | `#d9534f` | | `mo-button--fluid` | 自适应宽度 | `width:100%` | | `mo-button--radius` | 小圆角 | `border-radius: 2px` | | `mo-button--pill` | 大圆角 | `border-radius: 200px` | | `mo-button--small` | 小尺寸 | `height: 30px` | | `mo-button--large` | 大尺寸 | `height: 44px` | | `mo-button--link` | 按钮式链接 | 无边框和背景色 | ### demo ``` html <button class="mo-button">default button</button> <button class="mo-button--primary">primary button</button> <button class="mo-button--primary mo-button--large">large primary button</button> <button class="mo-button--primary mo-button--pill">pill primary button</button> <button class="mo-button--primaryl" disabled>disabled primary button</button> ``` ### 自定义按钮 ``` scss @import './mixins/button'; //自定义样式(背景,颜色) .mo-button--[style] { @include buttonStyle($border, $background, $color, $hoverBorder, $hoverBackground, $hoverColor); } //自定义尺寸 $my-button-size : (font-size:14px, line-height:1.4286, padding-y:6px, padding-x:16px) !default; .mo-button--[size] { @include buttonSize ($my-button-size ); } ```