Button 按钮

常用操作的按钮

基础用法

使用 type定义按钮的状态、使用属性plain、round、circle、link、text来定义按钮的样式。

html

<os-button
  type="primary" // 类型
  plain // 属性
  ></os-button>

禁用状态

你可以使用 disabled 属性来定义按钮是否被禁用。使用 disabled 属性来控制按钮是否为禁用状态。该属性接受一个 Boolean 类型的值。

按钮组

以按钮组的方式出现，常用于多项类似操作。使用 <os-button-group> 对多个按钮分组。

html

<os-button-group>
  <os-button font-icon="os-icon-prev">Previous Page</os-button>
  <os-button type="primary">Next Page <os-icon class="os-icon-next"></os-icon>
  </os-button>
</os-button-group>

<os-button-group
  class="os-margin-left-base" 
  size="mini" 
  type="primary">
  <os-button type="primary" font-icon="os-icon-edit" />
  <os-button type="primary" font-icon="os-icon-paperclip" />
  <os-button type="primary" font-icon="os-icon-download" />
</os-button-group>

加载状态

点击按钮来加载数据，并向用户反馈加载状态。通过设置 loading 属性为 true 来显示加载中状态。

html

<os-button type="primary" loading>Loading</os-button>
  <os-button type="primary" loading>
    <template #loading>
      <i class="os-icon-loading-o os-is-rotating"></i>
    </template>
    Loading
  </os-button>

调整尺寸

除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。使用 size 属性额外配置尺寸，可使用 large和mini两种值。还可通过更改按钮字体大小进行调整尺寸你喜欢大小。

html

<os-button size="large">Large</os-button>
<os-button>Default</os-button>
<os-button size="mini">Mini</os-button>

Button 按钮 ​

基础用法 ​

禁用状态 ​

按钮组 ​

加载状态 ​

调整尺寸 ​

Button 按钮

基础用法

禁用状态

按钮组

加载状态

调整尺寸