README.md 1.73 KB
Newer Older
Nature's avatar
Nature committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
HButton 按钮

```html
<h2 class="item-title">按钮类型</h2>
      <h-button class="button-class" type="rimless">rimless 按钮</h-button>
      <h-button class="button-class" type="default">default 按钮</h-button>
      <h-button class="button-class" type="primary">primary 按钮</h-button>
      <h-button class="button-class" type="safety">safety 按钮</h-button>
      <h-button class="button-class" type="warning">warning 按钮</h-button>
      <h-button class="button-class" type="danger">danger 按钮</h-button>

      <h2 class="item-title">按钮尺寸</h2>
      <h-button class="button-class" size="mini">mini 按钮</h-button>
      <h-button class="button-class" size="small">small 按钮</h-button>
      <h-button class="button-class" size="normal">normal 按钮</h-button>
      <h-button class="button-class" size="large">large 按钮</h-button>
      <h-button class="button-class" size="huge">huge 按钮</h-button>

      <h2 class="item-title">自定义圆角 (直接通过class设置)</h2>
      <h-button class="button-class radius-small">rimless 按钮</h-button>
      <h-button class="button-class radius-normal">default 按钮</h-button>
      <h-button class="button-class radius-large">primary 按钮</h-button>

      <h2 class="item-title">默认点击效果</h2>
      <h-button class="button-class radius-small" type="rimless">基础按钮(无边框)</h-button>
      <h-button class="button-class radius-small" type="rimless" shadow>基础按钮(无边框、有阴影效果)</h-button>
      <h-button class="button-class radius-small purple">基础按钮(有背景色)</h-button>

      <h2 class="item-title">禁用效果</h2>
      <h-button class="button-class radius-small" disabled>基础按钮(禁用)</h-button>
      
```