按钮 Button

基本

<za-button ghost>default</za-button>
<za-button theme="primary">primary</za-button>

块级按钮

<za-button block ghost @click="handleClick">default</za-button>
<za-button block ghost disabled @click="handleClick">default disabled</za-button>
<za-button theme="primary" block>primary</za-button>
<za-button theme="primary" block disabled>primary disabled</za-button>

按钮主题

<za-button ghost>default</za-button>
<za-button theme="primary">primary</za-button>
<za-button theme="danger">danger</za-button>

按钮大小

<za-button ghost size="lg">lg</za-button>
<za-button ghost>md</za-button>
<za-button ghost size="sm">sm</za-button>
<za-button ghost size="xs">xs</za-button>

按钮形状

<za-panel-body>
  <za-button theme="primary">rect</za-button>
  <za-button theme="primary" shape="radius">radius</za-button>
  <za-button theme="primary" shape="round">round</za-button>
  <za-button theme="primary" shape="circle">circle</za-button>
  <za-button shape="circle" ghost>
    <za-icon type="right" slot="icon"></za-icon>
  </za-button>
</za-panel-body>

带 icon 的按钮

<za-button ghost shape="radius">
  <za-icon type="right-round" theme="success" slot="icon"></za-icon>
  正确
</za-button>
<za-button ghost shape="radius">
  <za-icon type="wrong-round" theme="error" slot="icon"></za-icon>
  错误
</za-button>
<za-button ghost loading shape="radius">
  加载中
</za-button>

幽灵按钮

<za-button block ghost>default ghost</za-button>
<za-button theme="primary" block ghost>primary ghost</za-button>
<za-button theme="danger" block ghost>danger ghost</za-button>

Vue Script

<script name="vue">
export default {
  methods: {
    handleClick(n){
      console.log(n);
      alert('点击了我...');
    },
  },
};
</script>

API

Button Attributes

Button Events