ion-title
Titleは、ツールバーのタイトルを設定するテキストコンポーネントです。ユーザーが現在いる画面やセクション、使用中のアプリを説明するために使用することができます。
Basic
<ion-header>
<ion-toolbar>
<ion-title>Title</ion-title>
</ion-toolbar>
</ion-header>
折りたたみ式ラージタイトル
大きなタイトルは、contentがスクロールコンテナの開始位置までスクロールされたときに表示されます。タイトルがヘッダーの後ろにスクロールされると、縮小されたタイトルがフェードインします。
This feature is only available for iOS.
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>Title</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Title</ion-title>
</ion-toolbar>
</ion-header>
<div class="ion-padding">Scroll the list to see the title collapse.</div>
<ion-list>
<ion-item>Item 1</ion-item>
<ion-item>Item 2</ion-item>
<ion-item>Item 3</ion-item>
<ion-item>Item 4</ion-item>
<ion-item>Item 5</ion-item>
<ion-item>Item 6</ion-item>
<ion-item>Item 7</ion-item>
<ion-item>Item 8</ion-item>
<ion-item>Item 9</ion-item>
<ion-item>Item 10</ion-item>
<ion-item>Item 11</ion-item>
<ion-item>Item 12</ion-item>
<ion-item>Item 13</ion-item>
<ion-item>Item 14</ion-item>
<ion-item>Item 15</ion-item>
<ion-item>Item 16</ion-item>
<ion-item>Item 17</ion-item>
<ion-item>Item 18</ion-item>
<ion-item>Item 19</ion-item>
<ion-item>Item 20</ion-item>
</ion-list>
</ion-content>
折りたたみ式ボタン
buttonsコンポーネントは、collapseプロパティと共に使用すると、ツールバーが折りたたまれたときにヘッダーに追加表示することができます。
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>Title</ion-title>
<ion-buttons [collapse]="true" slot="end">
<ion-button>Button</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Title</ion-title>
<ion-buttons [collapse]="true" slot="end">
<ion-button>Button</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<div class="ion-padding">Scroll the list to see the title & buttons collapse.</div>
<ion-list>
<ion-item>Item 1</ion-item>
<ion-item>Item 2</ion-item>
<ion-item>Item 3</ion-item>
<ion-item>Item 4</ion-item>
<ion-item>Item 5</ion-item>
<ion-item>Item 6</ion-item>
<ion-item>Item 7</ion-item>
<ion-item>Item 8</ion-item>
<ion-item>Item 9</ion-item>
<ion-item>Item 10</ion-item>
<ion-item>Item 11</ion-item>
<ion-item>Item 12</ion-item>
<ion-item>Item 13</ion-item>
<ion-item>Item 14</ion-item>
<ion-item>Item 15</ion-item>
<ion-item>Item 16</ion-item>
<ion-item>Item 17</ion-item>
<ion-item>Item 18</ion-item>
<ion-item>Item 19</ion-item>
<ion-item>Item 20</ion-item>
</ion-list>
</ion-content>
テーマ
折りたたみ式ラージタイトルは、コンテンツの他の部分との関係でシームレスに表示される必要があります。つまり、折りたたみ可能なラージタイトルを含むツールバーの背景色は、常にコンテンツの背景色と一致する必要があります。
デフォルトでは、標準タイトルを含むツールバーは opacity: 0 を使って非表示にされ、スクロールによってラージタイトルを折りたたむと徐々に表示されるようになります。その結果、標準タイトルの後ろに見える背景色は、実際にはコンテンツの背景色となります。
標準タイトルのあるツールバーの背景色は、CSS変数に --background を設定することで変更できます。これにより、大きなタイトルを折りたたむと、ヘッダーの色が変わるという効果が得られます。
ラージタイトルのテキストカラーをスタイルする場合、特定のページやタブのコンテキスト内ではなく、グローバルにラージタイトルをターゲットにする必要があり、そうしないとナビゲーションアニメーションの間にそのスタイルが適用されません。
CSSカスタムプロパティ
- src/global.css
- src/app/example.component.html
ion-title.title-large {
color: #c897d8;
font-size: 30px;
}
ion-title {
--color: #000;
}
ion-toolbar {
--background: #c897d8;
}
プロパティ
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 ｜ undefined |
| Default | undefined |
size
| Description | ツールバーのタイトルの大きさを指定します。 |
| Attribute | size |
| Type | "large" ｜ "small" ｜ undefined |
| Default | undefined |
イベント
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カスタムプロパティ
| Name | Description |
|---|---|
--color | タイトルの文字色 |
Slots
No slots available for this component.
