ion-back-button

シャドウ

戻るボタンは、クリックするとアプリの履歴を逆にたどります。 ナビゲーションスタックに履歴がある場合にのみ表示されます（defaultHref が設定されている場合を除きます）。 戻るボタンは、モードに基づいて異なるテキストとアイコンを表示しますが、これはカスタマイズできます。

基本的な使用方法

カスタム戻るボタン

デフォルトでは、戻るボタンはiosではテキスト"Back"と"chevron-back"アイコン、mdでは"arrow-back-sharp"アイコンを表示します。これは、iconまたはtextプロパティを設定することで、戻るボタンコンポーネントごとにカスタマイズできます。または、グローバル設定のbackButtonIconまたはbackButtonTextプロパティを使用してグローバルに設定できます。詳細については、設定ドキュメントを参照してください。

デフォルトの戻る履歴

アプリでは、履歴がない場合でも戻るボタンを表示し、戻る必要がある場合があります。これは、戻るボタンのdefaultHrefにパスを設定することで実現できます。defaultHrefを使用するには、パスが設定されたルーターをアプリに含める必要があります。

プロパティ

color

説明	アプリケーションのカラーパレットから使用する色。デフォルトのオプションは："primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium"、"dark"です。色の詳細については、テーマ設定を参照してください。
属性	color
型	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ 文字列 ｜ 未定義
デフォルト	未定義

defaultHref

説明	履歴がない場合にデフォルトで戻るためのURL。
属性	default-href
型	文字列 ｜ 未定義
デフォルト	未定義

disabled

説明	trueの場合、ユーザーはボタンを操作できません。
属性	disabled
型	ブール値
デフォルト	false

icon

説明	戻るボタンに使用する組み込みのSVGアイコン名、またはSVGファイルの正確なsrc。
属性	icon
型	null ｜ 文字列 ｜ 未定義
デフォルト	未定義

mode

説明	モードは、使用するプラットフォームスタイルを決定します。
属性	mode
型	"ios" ｜ "md"
デフォルト	未定義

routerAnimation

説明	ルーターを使用する場合、別のページに移動したときの遷移アニメーションを指定します。
属性	未定義
型	((baseEl: any, opts?: any) => Animation) ｜ 未定義
デフォルト	未定義

text

説明	戻るボタンに表示するテキスト。
属性	text
型	null ｜ 文字列 ｜ 未定義
デフォルト	未定義

type

説明	ボタンの種類。
属性	type
型	"button" ｜ "reset" ｜ "submit"
デフォルト	'button'

イベント

このコンポーネントで使用できるイベントはありません。

メソッド

このコンポーネントで使用できる公開メソッドはありません。

CSSシャドウパーツ

名前	説明
icon	戻るボタンのアイコン（ion-iconを使用）。
ネイティブ	すべての子要素をラップするネイティブHTMLボタン要素。
text	戻るボタンのテキスト。

CSSカスタムプロパティ

iOS

名前	説明
--background	ボタンの背景
--background-focused	タブキーでフォーカスされたときのボタンの背景
--background-focused-opacity	タブキーでフォーカスされたときのボタンの背景の不透明度
--background-hover	ホバー時のボタンの背景
--background-hover-opacity	ホバー時の背景の不透明度
--border-radius	ボタンのボーダー半径
--color	ボタンのテキストの色
--color-focused	タブキーでフォーカスされたときのボタンのテキストの色
--color-hover	ホバー時のボタンのテキストの色
--icon-font-size	ボタンアイコンのフォントサイズ
--icon-font-weight	ボタンアイコンのフォントウェイト
--icon-margin-bottom	ボタンアイコンの下マージン
--icon-margin-end	方向が左から右の場合の右マージン、方向が右から左の場合の左マージン（ボタンアイコン）
--icon-margin-start	方向が左から右の場合の左マージン、方向が右から左の場合の右マージン（ボタンアイコン）
--icon-margin-top	ボタンアイコンの上マージン
--icon-padding-bottom	ボタンアイコンの下パディング
--icon-padding-end	方向が左から右の場合の右パディング、方向が右から左の場合の左パディング（ボタンアイコン）
--icon-padding-start	方向が左から右の場合の左パディング、方向が右から左の場合の右パディング（ボタンアイコン）
--icon-padding-top	ボタンアイコンの上パディング
--margin-bottom	ボタンの下マージン
--margin-end	方向が左から右の場合の右マージン、方向が右から左の場合の左マージン（ボタン）
--margin-start	方向が左から右の場合の左マージン、方向が右から左の場合の右マージン（ボタン）
--margin-top	ボタンの上マージン
--min-height	ボタンの最小高さ
--min-width	ボタンの最小幅
--opacity	ボタンの不透明度
--padding-bottom	ボタンの下パディング
--padding-end	方向が左から右の場合の右パディング、方向が右から左の場合の左パディング（ボタン）
--padding-start	方向が左から右の場合の左パディング、方向が右から左の場合の右パディング（ボタン）
--padding-top	ボタンの上部パディング
--ripple-color	ボタンのリップル効果の色
--transition	ボタンのトランジション

MD

名前	説明
--background	ボタンの背景
--background-focused	タブキーでフォーカスされたときのボタンの背景
--background-focused-opacity	タブキーでフォーカスされたときのボタンの背景の不透明度
--background-hover	ホバー時のボタンの背景
--background-hover-opacity	ホバー時の背景の不透明度
--border-radius	ボタンのボーダー半径
--color	ボタンのテキストの色
--color-focused	タブキーでフォーカスされたときのボタンのテキストの色
--color-hover	ホバー時のボタンのテキストの色
--icon-font-size	ボタンアイコンのフォントサイズ
--icon-font-weight	ボタンアイコンのフォントウェイト
--icon-margin-bottom	ボタンアイコンの下マージン
--icon-margin-end	方向が左から右の場合の右マージン、方向が右から左の場合の左マージン（ボタンアイコン）
--icon-margin-start	方向が左から右の場合の左マージン、方向が右から左の場合の右マージン（ボタンアイコン）
--icon-margin-top	ボタンアイコンの上マージン
--icon-padding-bottom	ボタンアイコンの下パディング
--icon-padding-end	方向が左から右の場合の右パディング、方向が右から左の場合の左パディング（ボタンアイコン）
--icon-padding-start	方向が左から右の場合の左パディング、方向が右から左の場合の右パディング（ボタンアイコン）
--icon-padding-top	ボタンアイコンの上パディング
--margin-bottom	ボタンの下マージン
--margin-end	方向が左から右の場合の右マージン、方向が右から左の場合の左マージン（ボタン）
--margin-start	方向が左から右の場合の左マージン、方向が右から左の場合の右マージン（ボタン）
--margin-top	ボタンの上マージン
--min-height	ボタンの最小高さ
--min-width	ボタンの最小幅
--opacity	ボタンの不透明度
--padding-bottom	ボタンの下パディング
--padding-end	方向が左から右の場合の右パディング、方向が右から左の場合の左パディング（ボタン）
--padding-start	方向が左から右の場合の左パディング、方向が右から左の場合の右パディング（ボタン）
--padding-top	ボタンの上部パディング
--ripple-color	ボタンのリップル効果の色
--transition	ボタンのトランジション

スロット

このコンポーネントで使用できるスロットはありません。