見出し画像

ion-button

下記の使用変化がわかりません
「<ion-button href="#" expand="full">Anchor</ion-button>」
どこが変化しているのか、どういう時に使用するのかなど教えて下さい。

「利用方法」Angularサンプル

    <!-- Default -->
   <ion-button>初期設定</ion-button>

   <!-- Anchor -->
   <ion-button href="#" expand="full">Anchor</ion-button>

   <!-- Colors -->
   <ion-button color="primary">青</ion-button>
   <ion-button color="secondary">水色</ion-button>
   <ion-button color="tertiary">紫</ion-button>
   <ion-button color="success">緑</ion-button>
   <ion-button color="warning">黄色</ion-button>
   <ion-button color="danger">赤</ion-button>
   <ion-button color="light">白</ion-button>
   <ion-button color="medium">灰色</ion-button>
   <ion-button color="dark">黒</ion-button>

   <!-- Expand -->
   <ion-button expand="full">全部</ion-button>
   <ion-button expand="block">四角</ion-button>

   <!-- Round -->
   <ion-button shape="round">円</ion-button>

   <!-- Fill -->
   <ion-button expand="full" fill="outline">外形 + 全部</ion-button>
   <ion-button expand="block" fill="outline">外形 + 四角</ion-button>
   <ion-button shape="round" fill="outline">外形 + 円</ion-button>

   <!-- Icons -->
   <ion-button>
       <ion-icon slot="start" name="star"></ion-icon>
       左にicon
   </ion-button>

   <ion-button>
       右にicon
       <ion-icon slot="end" name="star"></ion-icon>
   </ion-button>

   <ion-button>
       <ion-icon slot="icon-only" name="star"></ion-icon>
   </ion-button>

   <!-- Sizes -->
   <ion-button size="large">大</ion-button>
   <ion-button>初期設定</ion-button>
   <ion-button size="small">小</ion-button>

お試し結果

スクリーンショット 2021-09-08 12.17.06

その他

iconの検索→ https://ionic.io/ionicons

この記事が気に入ったらサポートをしてみませんか?