mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 07:41:51 +08:00
docs(title): clarify background-color styling with collapsible large title (#21348)
This commit is contained in:
Liam DeBeasi
@ -89,7 +89,17 @@ In this example, notice that we have added two sets of `ion-buttons` both with `
|
||||
|
||||
`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
|
||||
|
||||
When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
|
||||
|
||||
### Styling Collapsible Large Titles
|
||||
|
||||
The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `ion-toolbar` that contains the collapsible large title should always match the background color of `ion-content`.
|
||||
|
||||
By default, the `ion-toolbar` that contains the standard title is hidden using `opacity: 0` and is progressively shown as you collapse the large title by scrolling. As a result, the background color that you see behind the standard title is actually the background color of `ion-content`.
|
||||
|
||||
You can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `ion-toolbar`. This will give the effect of the header changing color as you collapse the large title.
|
||||
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
@ -98,8 +108,6 @@ ion-title.large-title {
|
||||
}
|
||||
```
|
||||
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
|
||||
|
||||
|
||||
### React
|
||||
|
||||
@ -219,7 +227,17 @@ In this example, notice that we have added two sets of `IonButtons` both with `c
|
||||
|
||||
`IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
|
||||
|
||||
When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `IonContent` and `translucent="true"` be set on the main `IonHeader`.
|
||||
|
||||
### Styling Collapsible Large Titles
|
||||
|
||||
The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `IonToolbar` that contains the collapsible large title should always match the background color of `IonContent`.
|
||||
|
||||
By default, the `IonToolbar` that contains the standard title is hidden using `opacity: 0` and is progressively shown as you collapse the large title by scrolling. As a result, the background color that you see behind the standard title is actually the background color of `IonContent`.
|
||||
|
||||
You can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `IonToolbar`. This will give the effect of the header changing color as you collapse the large title.
|
||||
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
@ -228,8 +246,6 @@ ion-title.large-title {
|
||||
}
|
||||
```
|
||||
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `IonContent` and `translucent="true"` be set on the main `IonHeader`.
|
||||
|
||||
|
||||
### Stencil
|
||||
|
||||
@ -352,6 +368,18 @@ In this example, notice that we have added two sets of `ion-buttons` both with `
|
||||
|
||||
When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
|
||||
|
||||
### Styling Collapsible Large Titles
|
||||
|
||||
The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `ion-toolbar` that contains the collapsible large title should always match the background color of `ion-content`.
|
||||
|
||||
By default, the `ion-toolbar` that contains the standard title is hidden using `opacity: 0` and is progressively shown as you collapse the large title by scrolling. As a result, the background color that you see behind the standard title is actually the background color of `ion-content`.
|
||||
|
||||
You can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `ion-toolbar`. This will give the effect of the header changing color as you collapse the large title.
|
||||
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
color: purple;
|
||||
@ -359,8 +387,6 @@ ion-title.large-title {
|
||||
}
|
||||
```
|
||||
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
|
||||
|
||||
|
||||
### Vue
|
||||
|
||||
@ -450,7 +476,17 @@ In this example, notice that we have added two sets of `ion-buttons` both with `
|
||||
|
||||
`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
|
||||
|
||||
When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
|
||||
|
||||
### Styling Collapsible Large Titles
|
||||
|
||||
The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `ion-toolbar` that contains the collapsible large title should always match the background color of `ion-content`.
|
||||
|
||||
By default, the `ion-toolbar` that contains the standard title is hidden using `opacity: 0` and is progressively shown as you collapse the large title by scrolling. As a result, the background color that you see behind the standard title is actually the background color of `ion-content`.
|
||||
|
||||
You can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `ion-toolbar`. This will give the effect of the header changing color as you collapse the large title.
|
||||
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
@ -459,8 +495,6 @@ ion-title.large-title {
|
||||
}
|
||||
```
|
||||
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
|
||||
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
@ -78,7 +78,17 @@ In this example, notice that we have added two sets of `ion-buttons` both with `
|
||||
|
||||
`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
|
||||
|
||||
When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
|
||||
|
||||
### Styling Collapsible Large Titles
|
||||
|
||||
The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `ion-toolbar` that contains the collapsible large title should always match the background color of `ion-content`.
|
||||
|
||||
By default, the `ion-toolbar` that contains the standard title is hidden using `opacity: 0` and is progressively shown as you collapse the large title by scrolling. As a result, the background color that you see behind the standard title is actually the background color of `ion-content`.
|
||||
|
||||
You can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `ion-toolbar`. This will give the effect of the header changing color as you collapse the large title.
|
||||
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
@ -86,5 +96,3 @@ ion-title.large-title {
|
||||
font-size: 30px;
|
||||
}
|
||||
```
|
||||
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
|
||||
@ -78,7 +78,17 @@ In this example, notice that we have added two sets of `ion-buttons` both with `
|
||||
|
||||
`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
|
||||
|
||||
When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
|
||||
|
||||
### Styling Collapsible Large Titles
|
||||
|
||||
The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `ion-toolbar` that contains the collapsible large title should always match the background color of `ion-content`.
|
||||
|
||||
By default, the `ion-toolbar` that contains the standard title is hidden using `opacity: 0` and is progressively shown as you collapse the large title by scrolling. As a result, the background color that you see behind the standard title is actually the background color of `ion-content`.
|
||||
|
||||
You can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `ion-toolbar`. This will give the effect of the header changing color as you collapse the large title.
|
||||
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
@ -86,5 +96,3 @@ ion-title.large-title {
|
||||
font-size: 30px;
|
||||
}
|
||||
```
|
||||
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
|
||||
@ -114,7 +114,17 @@ In this example, notice that we have added two sets of `IonButtons` both with `c
|
||||
|
||||
`IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
|
||||
|
||||
When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `IonContent` and `translucent="true"` be set on the main `IonHeader`.
|
||||
|
||||
### Styling Collapsible Large Titles
|
||||
|
||||
The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `IonToolbar` that contains the collapsible large title should always match the background color of `IonContent`.
|
||||
|
||||
By default, the `IonToolbar` that contains the standard title is hidden using `opacity: 0` and is progressively shown as you collapse the large title by scrolling. As a result, the background color that you see behind the standard title is actually the background color of `IonContent`.
|
||||
|
||||
You can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `IonToolbar`. This will give the effect of the header changing color as you collapse the large title.
|
||||
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
@ -122,5 +132,3 @@ ion-title.large-title {
|
||||
font-size: 30px;
|
||||
}
|
||||
```
|
||||
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `IonContent` and `translucent="true"` be set on the main `IonHeader`.
|
||||
@ -117,11 +117,21 @@ In this example, notice that we have added two sets of `ion-buttons` both with `
|
||||
|
||||
When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
|
||||
|
||||
### Styling Collapsible Large Titles
|
||||
|
||||
The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `ion-toolbar` that contains the collapsible large title should always match the background color of `ion-content`.
|
||||
|
||||
By default, the `ion-toolbar` that contains the standard title is hidden using `opacity: 0` and is progressively shown as you collapse the large title by scrolling. As a result, the background color that you see behind the standard title is actually the background color of `ion-content`.
|
||||
|
||||
You can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `ion-toolbar`. This will give the effect of the header changing color as you collapse the large title.
|
||||
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
color: purple;
|
||||
font-size: 30px;
|
||||
}
|
||||
```
|
||||
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
|
||||
@ -84,7 +84,17 @@ In this example, notice that we have added two sets of `ion-buttons` both with `
|
||||
|
||||
`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
|
||||
|
||||
When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
|
||||
|
||||
### Styling Collapsible Large Titles
|
||||
|
||||
The collapsible large title should appear seamless in relation to the rest of your content. This means that the background color of the `ion-toolbar` that contains the collapsible large title should always match the background color of `ion-content`.
|
||||
|
||||
By default, the `ion-toolbar` that contains the standard title is hidden using `opacity: 0` and is progressively shown as you collapse the large title by scrolling. As a result, the background color that you see behind the standard title is actually the background color of `ion-content`.
|
||||
|
||||
You can change the background color of the toolbar with the standard title by setting the `--background` CSS variable on `ion-toolbar`. This will give the effect of the header changing color as you collapse the large title.
|
||||
|
||||
When styling the text color of the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
|
||||
|
||||
```css
|
||||
ion-title.large-title {
|
||||
@ -92,5 +102,3 @@ ion-title.large-title {
|
||||
font-size: 30px;
|
||||
}
|
||||
```
|
||||
|
||||
> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
|
||||
Reference in New Issue
Block a user