ion-button
ボタンは、フォームや、シンプルで標準的なボタン機能が必要な場所で使用できる、クリック可能な要素を提供します。テキスト、アイコン、またはその両方を表示できます。ボタンは、いくつかの属性を使用して特定の外観にスタイル設定できます。
基本的な使用方法
展開
このプロパティを使用すると、ボタンの幅を指定できます。デフォルトでは、ボタンは`display: inline-block`ですが、このプロパティを設定すると、ボタンは`display: block`を使用して全幅の要素に変更されます。
形状
このプロパティを使用すると、ボタンの形状を指定できます。デフォルトでは、ボタンは小さなボーダー半径を持つ長方形ですが、これを`"round"`に設定すると、ボタンは丸い要素に変更されます。
塗りつぶし
このプロパティは、ボタンの背景色と境界線を決定します。デフォルトでは、ボタンはツールバー内のボタンでない限り、ソリッドな背景を持ちますが、ツールバー内にある場合は透明な背景になります。
サイズ
このプロパティは、ボタンのサイズを指定します。このプロパティを設定すると、ボタンの高さやパディングが変更されます。
アイコン
テーマ
色
CSSカスタムプロパティ
アクセシビリティ
ボタンはアクセシビリティを考慮して構築されていますが、コンテンツによっては調整が必要になる場合があります。ボタンコンポーネントはネイティブのbutton要素をレンダリングするため、ネイティブボタンが提供する機能を利用できます。
テキストコンテンツのオーバーフロー
ボタンのテキストコンテンツがコンテナからはみ出す多くのケースがあります。この場合、すべてのテキストを読み取ることができるように、ボタン内のテキストを折り返すことをお勧めします。ボタンコンポーネントは、余分なテキスト行に合わせて高さを自動的に調整します。
テキストが長すぎて収まらない場合、ボタンテキストは自動的に次の行に折り返されません。テキストを折り返すには、`white-space`プロパティを`"normal"`に設定する`ion-text-wrap`クラスを追加できます。これは将来のメジャーリリースでデフォルトになります。
情報
デモ目的で、以下に示すボタンには`max-width`スタイルが設定されています。テキストの折り返しは、動的なボタン幅でも機能します。
プロパティ
buttonType
| 説明 | ボタンの種類。 |
| 属性 | button-type |
| タイプ | 文字列 |
| デフォルト | 'button' |
色
| 説明 | アプリケーションのカラースケールから使用する色。デフォルトのオプションは：`"primary"`、`"secondary"`、`"tertiary"`、`"success"`、`"warning"`、`"danger"`、`"light"`、`"medium"`、および`"dark"`です。色の詳細については、テーマ設定を参照してください。 |
| 属性 | 色 |
| タイプ | "danger"｜"dark"｜"light"｜"medium"｜"primary"｜"secondary"｜"success"｜"tertiary"｜"warning"｜文字列｜未定義 |
| デフォルト | 未定義 |
無効
| 説明 | `true`の場合、ユーザーはボタンと対話できません。 |
| 属性 | 無効 |
| タイプ | ブール値 |
| デフォルト | false |
ダウンロード
| 説明 | この属性は、ブラウザにURLに移動する代わりにダウンロードするように指示するため、ユーザーはローカルファイルとして保存するように求められます。属性に値がある場合、それは保存プロンプトで事前に入力されたファイル名として使用されます（ユーザーは必要に応じてファイル名を変更できます）。 |
| 属性 | ダウンロード |
| タイプ | 文字列｜未定義 |
| デフォルト | 未定義 |
展開
| 説明 | 全幅ボタンの場合は`"block"`、四角い角と左または右の境界線のない全幅ボタンの場合は`"full"`に設定します。 |
| 属性 | 展開 |
| タイプ | "block"｜"full"｜未定義 |
| デフォルト | 未定義 |
塗りつぶし
| 説明 | フラットボタンのような透明なボタンの場合は`"clear"`、境界線のある透明なボタンの場合は`"outline"`、塗りつぶされた背景を持つボタンの場合は`"solid"`に設定します。デフォルトの塗りつぶしは、ツールバー内を除き`"solid"`で、ツールバー内では`"clear"`です。 |
| 属性 | 塗りつぶし |
| タイプ | "clear"｜"default"｜"outline"｜"solid"｜未定義 |
| デフォルト | 未定義 |
フォーム
| 説明 | HTMLフォーム要素またはフォーム要素ID。ボタンがフォームの子要素でない場合にフォームを送信するために使用されます。 |
| 属性 | フォーム |
| タイプ | HTMLFormElement｜文字列｜未定義 |
| デフォルト | 未定義 |
href
| 説明 | ハイパーリンクが指すURLまたはURLフラグメントが含まれています。このプロパティが設定されている場合、アンカータグがレンダリングされます。 |
| 属性 | href |
| タイプ | 文字列｜未定義 |
| デフォルト | 未定義 |
mode
| 説明 | modeは、どのプラットフォームスタイルを使用するかを決定します。 |
| 属性 | mode |
| タイプ | "ios" ｜ "md" |
| デフォルト | 未定義 |
rel
| 説明 | リンクオブジェクトに対するターゲットオブジェクトの関係を指定します。値は、スペースで区切られたリンクの種類のリストです。 |
| 属性 | rel |
| タイプ | 文字列｜未定義 |
| デフォルト | 未定義 |
routerAnimation
| 説明 | ルーターを使用する場合、`href`を使用して別のページに移動するときの遷移アニメーションを指定します。 |
| 属性 | 未定義 |
| タイプ | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| デフォルト | 未定義 |
routerDirection
| 説明 | ルーターを使用する場合、`href`を使用して別のページに移動するときの遷移方向を指定します。 |
| 属性 | router-direction |
| タイプ | "back" ｜ "forward" ｜ "root" |
| デフォルト | 'forward' |
shape
| 説明 | より丸みを帯びた角を持つボタンの場合は、` "round"` に設定します。 |
| 属性 | shape |
| タイプ | "round" ｜ undefined |
| デフォルト | 未定義 |
size
| 説明 | 高さやパディングを小さくするには` "small"` に、デフォルトの高さやパディングにするには` "default"` に、高さやパディングを大きくするには` "large"` に設定します。デフォルトでは、サイズが設定されていません。ただし、ボタンがアイテム内にある場合は、デフォルトでサイズは` "small"` になります。アイテム内で標準サイズのボタンにするには、サイズを` "default"` に設定します。 |
| 属性 | size |
| タイプ | "default" ｜ "large" ｜ "small" ｜ undefined |
| デフォルト | 未定義 |
strong
| 説明 | trueの場合、フォントウェイトがより太いボタンが有効になります。 |
| 属性 | strong |
| タイプ | ブール値 |
| デフォルト | false |
target
| 説明 | リンクされたURLを表示する場所を指定します。`href`が提供されている場合にのみ適用されます。特別なキーワード：`"_blank"`、`"_self"`、`"_parent"`、`"_top"`。 |
| 属性 | target |
| タイプ | 文字列｜未定義 |
| デフォルト | 未定義 |
type
| 説明 | ボタンの種類。 |
| 属性 | type |
| タイプ | "button" ｜ "reset" ｜ "submit" |
| デフォルト | 'button' |
イベント
| 名前 | 説明 | バブル |
|---|---|---|
ionBlur | ボタンがフォーカスを失ったときに発生します。 | true |
ionFocus | ボタンがフォーカスされたときに発生します。 | true |
メソッド
このコンポーネントには公開メソッドがありません。
CSSシャドウパーツ
| 名前 | 説明 |
|---|---|
native | すべての子要素をラップするネイティブのHTMLボタンまたはアンカー要素。 |
CSSカスタムプロパティ
- iOS
- MD
| 名前 | 説明 |
|---|---|
--background | ボタンの背景 |
--background-activated | 押されたときのボタンの背景。注：これを設定すると、マテリアルデザインのリプルが干渉します。 |
--background-activated-opacity | 押されたときのボタンの不透明度 |
--background-focused | タブキーでフォーカスされたときのボタンの背景 |
--background-focused-opacity | タブキーでフォーカスされたときのボタンの不透明度 |
--background-hover | ホバー時のボタンの背景 |
--background-hover-opacity | ホバー時の背景の不透明度 |
--border-color | ボタンの境界線の色 |
--border-radius | ボタンの境界線の半径 |
--border-style | ボタンの境界線のスタイル |
--border-width | ボタンの境界線の幅 |
--box-shadow | ボタンのボックスシャドウ |
--color | ボタンのテキストの色 |
--color-activated | 押されたときのボタンのテキストの色 |
--color-focused | タブキーでフォーカスされたときのボタンのテキストの色 |
--color-hover | ホバー時のボタンのテキストの色 |
--opacity | ボタンの不透明度 |
--padding-bottom | ボタンの下パディング |
--padding-end | 方向が左から右の場合の右パディング、方向が右から左の場合の左パディング |
--padding-start | 方向が左から右の場合の左パディング、方向が右から左の場合の右パディング |
--padding-top | ボタンの上パディング |
--ripple-color | ボタンのリップル効果の色 |
--transition | ボタンのトランジション |
| 名前 | 説明 |
|---|---|
--background | ボタンの背景 |
--background-activated | 押されたときのボタンの背景。注：これを設定すると、マテリアルデザインのリプルが干渉します。 |
--background-activated-opacity | 押されたときのボタンの不透明度 |
--background-focused | タブキーでフォーカスされたときのボタンの背景 |
--background-focused-opacity | タブキーでフォーカスされたときのボタンの不透明度 |
--background-hover | ホバー時のボタンの背景 |
--background-hover-opacity | ホバー時の背景の不透明度 |
--border-color | ボタンの境界線の色 |
--border-radius | ボタンの境界線の半径 |
--border-style | ボタンの境界線のスタイル |
--border-width | ボタンの境界線の幅 |
--box-shadow | ボタンのボックスシャドウ |
--color | ボタンのテキストの色 |
--color-activated | 押されたときのボタンのテキストの色 |
--color-focused | タブキーでフォーカスされたときのボタンのテキストの色 |
--color-hover | ホバー時のボタンのテキストの色 |
--opacity | ボタンの不透明度 |
--padding-bottom | ボタンの下パディング |
--padding-end | 方向が左から右の場合の右パディング、方向が右から左の場合の左パディング |
--padding-start | 方向が左から右の場合の左パディング、方向が右から左の場合の右パディング |
--padding-top | ボタンの上パディング |
--ripple-color | ボタンのリップル効果の色 |
--transition | ボタンのトランジション |
スロット
| 名前 | 説明 |
|---|---|
| `` | コンテンツは、スロットなしで提供された場合、名前付きスロット間に配置されます。 |
end | コンテンツは、LTRではボタンテキストの右側に、RTLでは左側に配置されます。 |
icon-only | テキストのないボタン内のアイコンで使用される必要があります。 |
start | コンテンツは、LTRではボタンテキストの左側に、RTLでは右側に配置されます。 |