Button

优质
小牛编辑
127浏览
2023-12-01

按钮,提供了各种类型、样子、状态以及图标。

示例

  • 按钮类型

    默认类型为 button,还可设置为 submit 用于表单中

    <cube-button>Button</cube-button>
    <cube-button type="submit">Submit Button</cube-button>
    
  • 按钮状态

    默认正常,可设置激活、禁用状态

    <cube-button :active="true">Active Button</cube-button>
    <cube-button :disabled="true">Disabled Button</cube-button>
    
  • 图标

    可设置 icon 的 class

    <cube-button icon="cubeic-right">Button With Icon</cube-button>
    
  • 样子

    可以通过设置 lightinlineoutlineprimary 属性来改变按钮样子

    <cube-button :light="true">Light Button</cube-button>
    <cube-button :inline="true">Inline Button</cube-button>
    <cube-button :outline="true">Outline Button</cube-button>
    <cube-button :primary="true">Primary Button</cube-button>
    

Props 配置

参数说明类型可选值默认值
type按钮类型Stringbutton/submitbutton
active激活状态Booleantrue/falsefalse
disabled禁用状态Booleantrue/falsefalse
icon图表 IconStringicon 的 class 值-
light亮色Booleantrue/falsefalse
inline是否内联Booleantrue/falsefalse
outline外边框Booleantrue/falsefalse
primary主要的Booleantrue/falsefalse

事件

事件名说明参数
click点击按钮后触发此事件,如果禁用状态,则不触发e - 事件对象