Skip to main content
Version: v6

ion-title

shadow

コンテンツ

ion-title は、 Toolbar のタイトルを設定するコンポーネントです。

使い方

<!-- Default title -->
<ion-toolbar>
<ion-title>Default Title</ion-title>
</ion-toolbar>

<!-- Small title above a default title -->
<ion-toolbar>
<ion-title size="small">Small Title above a Default Title</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title>Default Title</ion-title>
</ion-toolbar>

<!-- Large title -->
<ion-toolbar>
<ion-title size="large">Large Title</ion-title>
</ion-toolbar>

Collapsible Large Titles

Ionic では、iOS 標準のアプリに存在するCollapsible Large Titlesを作成する方法が用意されています。この設定を行うには、ion-titleion-header、(オプションで)ion-buttons 要素を設定する必要があります。

<ion-header translucent="true">
<ion-toolbar>
<ion-title>Settings</ion-title>
</ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Settings</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
</ion-header>

...

</ion-content>

上の例では、2つの ion-header 要素があることに注目してください。最初の ion-header は折りたたみ可能なヘッダの "折りたたまれた" 状態を表し、2番目の ion-header は折りたたみ可能なヘッダの "展開された" 状態を表します。2 番目の ion-headercollapse="condense" でなければならず、 ion-content 内に存在しなければならないことに注意してください。さらに、大きなタイトルのスタイルを取得するには、 ion-titlesize="large" でなければなりません。

<ion-header translucent="true">
<ion-toolbar>
<ion-buttons collapse="true" slot="end">
<ion-button>Click Me</ion-button>
</ion-buttons>
<ion-title>Settings</ion-title>
</ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-buttons collapse="true" slot="end">
<ion-button>Click Me</ion-button>
</ion-buttons>
<ion-title size="large">Settings</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
</ion-header>

...

</ion-content>

この例では、2つの ion-buttons のセットを追加し、両方とも collapsetrue に設定していることに注目してください。セカンダリヘッダーが折りたたまれると、セカンダリヘッダーのボタンは隠れ、プライマリヘッダーのボタンが表示されます。これは、ヘッダボタンが常に ion-title 要素の隣に表示されるようにするために便利です。

また、 collapse が設定されていない ion-buttons 要素は、折りたたまれた状態に関わらず常に表示されます。ラージタイトルと ion-buttons 要素を ion-content の中で使用する場合、 ion-buttons 要素は常に end スロットに配置されるべきです。

Collapsible Large Titlesを使用する場合、 ion-content では fullscreentrue に設定し、メインの ion-header では translucenttrue に設定することが必要です。

Collapsible Large Titlesのスタイリング

Collapsible Large Titlesは、他のコンテンツとの関係でシームレスに表示される必要があります。つまり、Collapsible Large Titlesを含む ion-toolbar の背景色は、常に ion-content の背景色と一致する必要があります。

デフォルトでは、標準のタイトルを含む ion-toolbaropacity: 0 を使って非表示になっており、スクロールしてラージタイトルを折りたたむと徐々に表示されるようになっています。その結果、標準タイトルの後ろに見える背景色は、実際には ion-content の背景色となります。

標準タイトルのあるツールバーの背景色は、 ion-toolbar--background という CSS 変数を設定することで変更することができます。これにより、大きなタイトルを折りたたむと、ヘッダの色が変わるような効果が得られます。

ラージタイトルのテキストカラーをスタイルする場合、特定のページやタブのコンテキスト内ではなく、グローバルにラージタイトルをターゲットにする必要があり、そうしないとナビゲーションアニメーションの間にそのスタイルが適用されません。

ion-title.title-large {
color: purple;
font-size: 30px;
}

プロパティ

color

DescriptionThe 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.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

size

DescriptionThe size of the toolbar title.
Attributesize
Type"large" | "small" | undefined
Defaultundefined

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

NameDescription
--colorText color of the title

Slots

No slots available for this component.