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"
に設定します。これは将来のメジャーリリースでデフォルトになる予定である。
max-width`スタイルは、デモのためだけに下のボタンに設定されています。テキストラッピングは動的なボタン幅で動作します。
プロパティ
buttonType
Description | The type of button. |
Attribute | button-type |
Type | string |
Default | 'button' |
color
Description | The color to use from your application's color palette. Default options are: "primary" , "secondary" , "tertiary" , "success" , "warning" , "danger" , "light" , "medium" , and "dark" . For more information on colors, see theming. |
Attribute | color |
Type | "danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined |
Default | undefined |
disabled
Description | If true , the user cannot interact with the button. |
Attribute | disabled |
Type | boolean |
Default | false |
download
Description | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). |
Attribute | download |
Type | string | undefined |
Default | undefined |
expand
Description | Set to "block" for a full-width button or to "full" for a full-width button with square corners and no left or right borders. |
Attribute | expand |
Type | "block" | "full" | undefined |
Default | undefined |
fill
Description | Set to "clear" for a transparent button that resembles a flat button, to "outline" for a transparent button with a border, or to "solid" for a button with a filled background. The default fill is "solid" except inside of a toolbar, where the default is "clear" . |
Attribute | fill |
Type | "clear" | "default" | "outline" | "solid" | undefined |
Default | undefined |
form
Description | The HTML form element or form element id. Used to submit a form when the button is not a child of the form. |
Attribute | form |
Type | HTMLFormElement | string | undefined |
Default | undefined |