ionic3 button按钮+带图标的按钮

缺乏、安全感 2022-06-01 08:35 345阅读 0赞

1.普通按钮

<ion-content>
    <button ion-button color="light" >Light Round</button>
    <br>
    <button ion-button >Primary Round</button>
    <br>
    <button ion-button color="secondary" >Secondary Round</button>
    <br>
    <button ion-button color="danger" >Danger Round</button>
    <br>
    <button ion-button color="dark" round>Dark Round</button>
    <br>
    <button ion-button color="danger"  class="button-block" >button-block</button>
    <br>
    <button ion-button small >small</button>
    <button ion-button normal>normal</button>
    <button ion-button large >large</button>
    <br>
    <button ion-button clear >clear</button>
    <br>
    <button ion-button outline >outline</button>
    </ion-content>

![SouthEast][]

2. 图标位置

<button ion-button icon-left>
      <ion-icon name="home"></ion-icon>
      Left Icon
    </button>
    
    
    <button ion-button icon-right>
      Right Icon
      <ion-icon name="home"></ion-icon>
    </button>
    
    
    <button ion-button icon-only>
      <ion-icon name="home"></ion-icon>
    </button>

![SouthEast 1][]

3.多种图标

<button ion-button icon-left>
      <ion-icon name="star"></ion-icon>
      star
    </button>
    
    <button ion-button icon-left>
      <ion-icon name="settings"></ion-icon>
      settings
    </button>
    
    <button ion-button outline icon-start>
      <ion-icon name='briefcase' is-active="false"></ion-icon>
      Work
    </button>
    <button ion-button clear icon-start>
      <ion-icon name='beer' is-active="false"></ion-icon>
      Pub
    </button>
    
    <button ion-button color="secondary" icon-start>
      <ion-icon name='people'></ion-icon>
      Friends
    </button>
    <button ion-button color="secondary" outline icon-start>
      <ion-icon name='paw' is-active="false"></ion-icon>
      Best Friend
    </button>

![SouthEast 2][]

更多图标查看：

https://ionicframework.com/docs/ionicons/

[SouthEast]: /images/20220601/276d286ea7084977a7a1133a88b8f2c8.png
[SouthEast 1]: /images/20220601/9976b58492784cb59aba8d0602d1fbde.png
[SouthEast 2]: /images/20220601/8aaf8a4d7e914a36b7561ecf94ad5b7c.png