Skip to main content
Version: v7

ion-button

shadow

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ボタンの種類です。
Attributebutton-type
Typestring
Default'button'

color

Descriptionアプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です.色に関する詳しい情報は theming を参照してください。
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

disabled

Descriptiontrueの場合、ユーザはボタンと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

download

Descriptionこの属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます(ユーザーはファイル名を変更することができます)。
Attributedownload
Typestring | undefined
Defaultundefined

expand

Description全角のボタンなら"block"、角が四角く左右のボーダーがない全角のボタンなら"full"に設定します。
Attributeexpand
Type"block" | "full" | undefined
Defaultundefined

fill

Descriptionフラットなボタンに似た透明なボタンには "clear" を、ボーダーのある透明なボタンには "outline" を、背景を塗りつぶしたボタンには "solid" を設定します。デフォルトの塗りつぶしは "solid" です。ただし、ツールバーの内側では "clear" となります。
Attributefill
Type"clear" | "default" | "outline" | "solid" | undefined
Defaultundefined

form

DescriptionHTML のフォーム要素またはフォーム要素 ID。ボタンがフォームの子でない場合に、フォームを送信するために使用します。
Attributeform
TypeHTMLFormElement | string | undefined
Defaultundefined

href

Descriptionハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。
Attributehref
Typestring | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

rel

Descriptionターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られたリンクタイプのリストです。
Attributerel
Typestring | undefined
Defaultundefined

routerAnimation

Descriptionルータを使用する場合、hrefを使用して別のページに移動する際の遷移アニメーションを指定します。
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

routerDirection

Descriptionルータを使用する場合、hrefを使用して他のページに移動する際の遷移方向を指定します。
Attributerouter-direction
Type"back" | "forward" | "root"
Default'forward'

shape

Descriptionround"` に設定すると、より角が丸いボタンになります。
Attributeshape
Type"round" | undefined
Defaultundefined

size

Descriptionボタンの高さとPaddingが少ない場合は "small" に、ボタンの高さとPaddingがデフォルトの場合は "default" に、ボタンの高さとPaddingが多い場合は "large" に設定します。ただし、ボタンがアイテムの中にある場合は、デフォルトでサイズが "small" になっています。アイテムの内部でサイズを "default" に設定すると、標準サイズのボタンになります。
Attributesize
Type"default" | "large" | "small" | undefined
Defaultundefined

strong

Descriptiontrueの場合、より重いFont Weightを持つボタンをアクティブにします。
Attributestrong
Typeboolean
Defaultfalse

target

Descriptionリンク先のURLを表示する場所を指定します。hrefを指定した場合のみ適用される。特別なキーワードがあります。_blank", "_self", "_parent", "_top".
Attributetarget
Typestring | undefined
Defaultundefined

type

Descriptionボタンの種類です。
Attributetype
Type"button" | "reset" | "submit"
Default'button'

イベント

NameDescription
ionBlurボタンのフォーカスが外れたときに発行されます。
ionFocusボタンにフォーカスが当たっているときに発行されます。

メソッド

No public methods available for this component.

CSS Shadow Parts

NameDescription
nativeすべての子要素をラップするネイティブHTMLのボタンまたはアンカー要素です。

CSSカスタムプロパティ

NameDescription
--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

NameDescription
``slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。
endコンテンツは、LTRの場合はボタンテキストの右側に、RTLの場合は左側に配置されます。
icon-onlyテキストを持たないボタン内のアイコンに対して使用されるべきです。
startコンテンツは、LTRではボタンテキストの左側に、RTLでは右側に配置されます。