ion-button
Buttonはクリック可能な要素を提供し、Form内や、標準の単機能なButton機能を必要とする任意の場所で使用できます。text、icon、またはその両方を表示できます。Buttonは、いくつかの属性を利用して特定の外観になるようにスタイル設定できます。
基本的な使い方
Expand
このプロパティでは、ボタンの幅を指定することができます。デフォルトでは、ボタンは display: inline-block を持ちますが、このプロパティを設定すると、ボタンは display: block を持つ全角要素に変更されます。
Shape
このプロパティは、ボタンの形状を指定することができます。デフォルトでは、ボタンは小さなボーダー半径を持つ長方形ですが、これを "round" に設定すると、ボタンは丸みを帯びた要素に変更されます。
Fill
この属性は、Buttonのbackgroundとborder-colorを設定します。デフォルトでは、Buttonはtoolbar内にない限り、backgroundは塗りつぶされます。toolbar内にある場合は、backgroundは透明になります。
Size
この属性は、Buttonのサイズを指定します。この属性を設定すると、Buttonの高さとpaddingが変更されます
Icons
テーマ
Colors
CSSカスタムプロパティ
アクセシビリティ
ボタンはアクセスしやすいように作られていますが、その内容によっては調整が必要な場合があります。ボタンコンポーネントは、ネイティブのbutton elementをレンダリングし、ネイティブのボタンが提供する機能を利用できるようにします。
Overflowing Text Content
ボタンのテキスト・コンテンツがコンテナからはみ出す場合が多々あります。このような場合、すべてのテキストがまだ読めるように、ボタンの内側にテキストを折り返すことをお勧めします。ボタンコンポーネントは、テキストの余分な行を収容するために、その高さを自動的に調整します。
テキストが長すぎて収まらない場合、ボタンテキストは自動的に次の行に折り返されません。テキストを折り返すには、ion-text-wrapクラスを追加して、white-spaceプロパティを"normal"に設定します。これは将来のメジャーリリースでデフォルトになる予定である。
info
max-width`スタイルは、デモのためだけに下のボタンに設定されています。テキストラッピングは動的なボタン幅で動作します。
プロパティ
buttonType
| Description | ボタンの種類です。 |
| Attribute | button-type |
| Type | string |
| Default | 'button' |
color
| Description | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。 |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined |
| Default | undefined |
disabled
| Description | trueの場合、ユーザはボタンと対話することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
download
| Description | この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。 |
| Attribute | download |
| Type | string ｜ undefined |
| Default | undefined |
expand
| Description | 全角のボタンなら"block"、角が四角く左右のボーダーがない全角のボタンなら"full"に設定します。 |
| Attribute | expand |
| Type | "block" ｜ "full" ｜ undefined |
| Default | undefined |
fill
| Description | フラットなボタンに似た透明なボタンには "clear" を、ボーダーのある透明なボタンには "outline" を、背景を塗りつぶしたボタンには "solid" を設定します。デフォルトの塗りつぶしは "solid" です。ただし、ツールバーの内側では "clear" となります。 |
| Attribute | fill |
| Type | "clear" ｜ "default" ｜ "outline" ｜ "solid" ｜ undefined |
| Default | undefined |
form
| Description | HTML のフォーム要素またはフォーム要素 ID。ボタンがフォームの子でない場合に、フォームを送信するために使用します。 |
| Attribute | form |
| Type | HTMLFormElement ｜ string ｜ undefined |
| Default | undefined |
href
| Description | ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。 |
| Attribute | href |
| Type | string ｜ undefined |
| Default | undefined |
mode
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
rel
| Description | ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られたリンクタイプのリストです。 |
| Attribute | rel |
| Type | string ｜ undefined |
| Default | undefined |
routerAnimation
| Description | ルータを使用する場合、hrefを使用して別のページに移動する際の遷移アニメーションを指定します。 |
| Attribute | undefined |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
routerDirection
| Description | ルータを使用する場合、hrefを使用して他のページに移動する際の遷移方向を指定します。 |
| Attribute | router-direction |
| Type | "back" ｜ "forward" ｜ "root" |
| Default | 'forward' |
shape
| Description | round"` に設定すると、より角が丸いボタンになります。 |
| Attribute | shape |
| Type | "round" ｜ undefined |
| Default | undefined |
size
| Description | ボタンの高さとPaddingが少ない場合は "small" に、ボタンの高さとPaddingがデフォルトの場合は "default" に、ボタンの高さとPaddingが多い場合は "large" に設定します。ただし、ボタンがアイテムの中にある場合は、デフォルトでサイズが "small" になっています。アイテムの内部でサイズを "default" に設定すると、標準サイズのボタンになります。 |
| Attribute | size |
| Type | "default" ｜ "large" ｜ "small" ｜ undefined |
| Default | undefined |
strong
| Description | trueの場合、より重いFont Weightを持つボタンをアクティブにします。 |
| Attribute | strong |
| Type | boolean |
| Default | false |
target
| Description | リンク先のURLを表示する場所を指定します。hrefを指定した場合のみ適用される。特別なキーワードがあります。_blank", "_self", "_parent", "_top". |
| Attribute | target |
| Type | string ｜ undefined |
| Default | undefined |
type
| Description | ボタンの種類です。 |
| Attribute | type |
| Type | "button" ｜ "reset" ｜ "submit" |
| Default | 'button' |
イベント
| Name | Description |
|---|---|
ionBlur | ボタンのフォーカスが外れたときに発行されます。 |
ionFocus | ボタンにフォーカスが当たっているときに発行されます。 |
メソッド
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native | すべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。 |
CSSカスタムプロパティ
| Name | Description |
|---|---|
--background | ボタンの背景 |
--background-activated | ボタンが押されたときの背景。注意：これを設定すると、Material Designの波紋に干渉します。 |
--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 | ボタンのBottom Padding |
--padding-end | ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。 |
--padding-start | ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。 |
--padding-top | ボタンのTop Padding |
--ripple-color | ボタンリプルエフェクトの色 |
--transition | ボタンの遷移 |
Slots
| Name | Description |
|---|---|
| `` | slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。 |
end | コンテンツは、LTRの場合はボタンテキストの右側に、RTLの場合は左側に配置されます。 |
icon-only | テキストを持たないボタン内のアイコンに対して使用されるべきです。 |
start | コンテンツは、LTRではボタンテキストの左側に、RTLでは右側に配置されます。 |