mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 08:09:32 +08:00
chore(header): finalize collapse API (#19276)
* make requested changes * add e2e * add RTL support * fix typo * add info on how to make collapsable title * add usage examples * fix typo * fix another typo * fix typos * update usage * fix alpha order * update api * add class to collapse buttons * merge * update * change back to collapse * remove platform specific class * update docs * run build * update api again * run build
This commit is contained in:
Liam DeBeasi
@ -2,8 +2,6 @@
|
||||
|
||||
`ion-title` is a component that sets the title of the `Toolbar`.
|
||||
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
@ -24,50 +22,281 @@
|
||||
<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 provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.
|
||||
|
||||
```html
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Settings</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<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>
|
||||
```
|
||||
|
||||
In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`.
|
||||
|
||||
```html
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons collapse="true">
|
||||
<ion-button>Click Me</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Settings</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-header collapse="condense">
|
||||
<ion-toolbar>
|
||||
<ion-buttons collapse="true">
|
||||
<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>
|
||||
```
|
||||
|
||||
In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
|
||||
|
||||
`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
|
||||
|
||||
|
||||
### React
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import {
|
||||
IonToolbar,
|
||||
IonTitle
|
||||
IonTitle,
|
||||
IonToolbar
|
||||
} from '@ionic/react';
|
||||
|
||||
export const ToolbarExample: React.FC = () => (
|
||||
{/*-- Default title --*/}
|
||||
<IonToolbar>
|
||||
<IonTitle>Default Title</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
|
||||
{/*-- Small title --*/}
|
||||
<IonToolbar>
|
||||
<IonTitle size="small">Small Title above a Default Title</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonTitle>Default Title</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
{/*-- Large title --*/}
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Large Title</IonTitle>
|
||||
</IonToolbar>
|
||||
);
|
||||
```
|
||||
|
||||
### Collapsible Large Titles
|
||||
|
||||
Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `IonTitle`, `IonHeader`, and (optionally) `IonButtons` elements.
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import {
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonSearchbar,
|
||||
IonTitle,
|
||||
IonToolbar
|
||||
} from '@ionic/react';
|
||||
|
||||
export const LargeTitleExample: React.FC = () => (
|
||||
<>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Settings</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Settings</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonSearchbar></IonSearchbar>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
...
|
||||
|
||||
</IonContent>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
In the example above, notice there are two `IonHeader` elements. The first `IonHeader` represents the "collapsed" state of your collapsible header, and the second `IonHeader` represents the "expanded" state of your collapsible header. Notice that the second `IonHeader` must have `collapse="condense"` and must exist within `IonContent`. Additionally, in order to get the large title styling, `IonTitle` must have `size="large"`.
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonSearchbar,
|
||||
IonTitle,
|
||||
IonToolbar
|
||||
} from '@ionic/react';
|
||||
|
||||
export const LargeTitleExample: React.FC = () => (
|
||||
<>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons collapse="true">
|
||||
<IonButton>Click Me</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Settings</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonButtons collapse="true">
|
||||
<IonButton>Click Me</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle size="large">Settings</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonSearchbar></IonSearchbar>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
...
|
||||
|
||||
</IonContent>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
In this example, notice that we have added two sets of `IonButtons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `IonTitle` element.
|
||||
|
||||
`IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
|
||||
|
||||
|
||||
### Vue
|
||||
|
||||
```html
|
||||
<template>
|
||||
<!-- Default title -->
|
||||
<ion-toolbar>
|
||||
<ion-title>Default Title</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<!-- Small 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>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Collapsible Large Titles
|
||||
|
||||
Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Settings</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<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>
|
||||
</template>
|
||||
```
|
||||
|
||||
In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons collapse="true">
|
||||
<ion-button>Click Me</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Settings</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-header collapse="condense">
|
||||
<ion-toolbar>
|
||||
<ion-buttons collapse="true">
|
||||
<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>
|
||||
</template>
|
||||
```
|
||||
|
||||
In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
|
||||
|
||||
`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
|
||||
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
@ -111,5 +111,5 @@
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
@ -11,4 +11,69 @@
|
||||
<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 provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.
|
||||
|
||||
```html
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Settings</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<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>
|
||||
```
|
||||
|
||||
In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`.
|
||||
|
||||
```html
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons collapse="true">
|
||||
<ion-button>Click Me</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Settings</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-header collapse="condense">
|
||||
<ion-toolbar>
|
||||
<ion-buttons collapse="true">
|
||||
<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>
|
||||
```
|
||||
|
||||
In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
|
||||
|
||||
`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
|
||||
@ -11,4 +11,69 @@
|
||||
<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 provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.
|
||||
|
||||
```html
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Settings</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<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>
|
||||
```
|
||||
|
||||
In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`.
|
||||
|
||||
```html
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons collapse="true">
|
||||
<ion-button>Click Me</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Settings</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-header collapse="condense">
|
||||
<ion-toolbar>
|
||||
<ion-buttons collapse="true">
|
||||
<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>
|
||||
```
|
||||
|
||||
In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
|
||||
|
||||
`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
|
||||
@ -1,20 +1,115 @@
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import {
|
||||
IonToolbar,
|
||||
IonTitle
|
||||
IonTitle,
|
||||
IonToolbar
|
||||
} from '@ionic/react';
|
||||
|
||||
export const ToolbarExample: React.FC = () => (
|
||||
{/*-- Default title --*/}
|
||||
<IonToolbar>
|
||||
<IonTitle>Default Title</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
|
||||
{/*-- Small title --*/}
|
||||
<IonToolbar>
|
||||
<IonTitle size="small">Small Title above a Default Title</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonTitle>Default Title</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
{/*-- Large title --*/}
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Large Title</IonTitle>
|
||||
</IonToolbar>
|
||||
);
|
||||
```
|
||||
|
||||
### Collapsible Large Titles
|
||||
|
||||
Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `IonTitle`, `IonHeader`, and (optionally) `IonButtons` elements.
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import {
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonSearchbar,
|
||||
IonTitle,
|
||||
IonToolbar
|
||||
} from '@ionic/react';
|
||||
|
||||
export const LargeTitleExample: React.FC = () => (
|
||||
<>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Settings</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Settings</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonSearchbar></IonSearchbar>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
...
|
||||
|
||||
</IonContent>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
In the example above, notice there are two `IonHeader` elements. The first `IonHeader` represents the "collapsed" state of your collapsible header, and the second `IonHeader` represents the "expanded" state of your collapsible header. Notice that the second `IonHeader` must have `collapse="condense"` and must exist within `IonContent`. Additionally, in order to get the large title styling, `IonTitle` must have `size="large"`.
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonSearchbar,
|
||||
IonTitle,
|
||||
IonToolbar
|
||||
} from '@ionic/react';
|
||||
|
||||
export const LargeTitleExample: React.FC = () => (
|
||||
<>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons collapse="true">
|
||||
<IonButton>Click Me</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Settings</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonButtons collapse="true">
|
||||
<IonButton>Click Me</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle size="large">Settings</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonSearchbar></IonSearchbar>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
...
|
||||
|
||||
</IonContent>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
In this example, notice that we have added two sets of `IonButtons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `IonTitle` element.
|
||||
|
||||
`IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
|
||||
|
||||
@ -1,14 +1,85 @@
|
||||
```html
|
||||
<template>
|
||||
<!-- Default title -->
|
||||
<ion-toolbar>
|
||||
<ion-title>Default Title</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<!-- Small 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>
|
||||
</template>
|
||||
```
|
||||
```
|
||||
|
||||
### Collapsible Large Titles
|
||||
|
||||
Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Settings</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<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>
|
||||
</template>
|
||||
```
|
||||
|
||||
In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons collapse="true">
|
||||
<ion-button>Click Me</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Settings</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-header collapse="condense">
|
||||
<ion-toolbar>
|
||||
<ion-buttons collapse="true">
|
||||
<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>
|
||||
</template>
|
||||
```
|
||||
|
||||
In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
|
||||
|
||||
`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
|
||||
|
||||
Reference in New Issue
Block a user