mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
feat(title): add support for small title (#19215)
Updates title to include `small` size and updates searchbar and UI to match native. closes #18898
This commit is contained in:
Brandy Carney
@ -40,6 +40,13 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
|
||||
<ion-title>Back Button</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<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>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
@ -199,6 +206,13 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
|
||||
<ion-title>Back Button</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<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>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
@ -357,157 +371,161 @@ import {
|
||||
IonSearchbar,
|
||||
IonSegment,
|
||||
IonSegmentButton,
|
||||
IonContent
|
||||
} from '@ionic/react';
|
||||
|
||||
export const ToolbarExample: React.FC = () => (
|
||||
<IonButton>
|
||||
<IonToolbar>
|
||||
<IonTitle>Title Only</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonBackButton defaultHref="/" />
|
||||
</IonButtons>
|
||||
<IonTitle>Back Button</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="contact" />
|
||||
</IonButton>
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="secondary">
|
||||
<IonIcon slot="icon-only" name="more" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Default Buttons</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton fill="solid">
|
||||
<IonIcon slot="start" name="contact" />
|
||||
Contact
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Solid Buttons</IonTitle>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton fill="solid" color="secondary">
|
||||
Help
|
||||
<IonIcon slot="end" name="help-circle" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton fill="outline">
|
||||
<IonIcon slot="start" name="star" />
|
||||
Star
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Outline Buttons</IonTitle>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="danger" fill="outline">
|
||||
Edit
|
||||
<IonIcon slot="end" name="create" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>Account</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="danger">Edit</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Text Only Buttons</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonMenuButton autoHide={false} />
|
||||
</IonButtons>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="star" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Left side menu toggle</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton onClick={() => {}}>
|
||||
<IonIcon slot="icon-only" name="star" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Right side menu toggle</IonTitle>
|
||||
<IonButtons slot="end">
|
||||
<IonMenuButton autoHide={false} />
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton onClick={() => {}}>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonSearchbar placeholder="Search Favorites" />
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonSegment>
|
||||
<IonSegmentButton value="all" checked>
|
||||
All
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton value="favorites">Favorites</IonSegmentButton>
|
||||
</IonSegment>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar color="secondary">
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="contact" />
|
||||
</IonButton>
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="primary">
|
||||
<IonIcon slot="icon-only" name="more" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Secondary Toolbar</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar color="dark">
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="contact" />
|
||||
</IonButton>
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="danger">
|
||||
<IonIcon slot="icon-only" name="more" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Dark Toolbar</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonButton>
|
||||
<IonToolbar>
|
||||
<IonTitle>Title Only</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonBackButton defaultHref="/" />
|
||||
</IonButtons>
|
||||
<IonTitle>Back Button</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonTitle size="small">Small Title above a Default Title</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonTitle>Default Title</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="contact" />
|
||||
</IonButton>
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="secondary">
|
||||
<IonIcon slot="icon-only" name="more" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Default Buttons</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton fill="solid">
|
||||
<IonIcon slot="start" name="contact" />
|
||||
Contact
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Solid Buttons</IonTitle>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton fill="solid" color="secondary">
|
||||
Help
|
||||
<IonIcon slot="end" name="help-circle" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton fill="outline">
|
||||
<IonIcon slot="start" name="star" />
|
||||
Star
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Outline Buttons</IonTitle>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="danger" fill="outline">
|
||||
Edit
|
||||
<IonIcon slot="end" name="create" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>Account</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="danger">Edit</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Text Only Buttons</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonMenuButton autoHide={false} />
|
||||
</IonButtons>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="star" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Left side menu toggle</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton onClick={() => {}}>
|
||||
<IonIcon slot="icon-only" name="star" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Right side menu toggle</IonTitle>
|
||||
<IonButtons slot="end">
|
||||
<IonMenuButton autoHide={false} />
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton onClick={() => {}}>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonSearchbar placeholder="Search Favorites" />
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonSegment>
|
||||
<IonSegmentButton value="all" checked>
|
||||
All
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton value="favorites">Favorites</IonSegmentButton>
|
||||
</IonSegment>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar color="secondary">
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="contact" />
|
||||
</IonButton>
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="primary">
|
||||
<IonIcon slot="icon-only" name="more" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Secondary Toolbar</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar color="dark">
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="contact" />
|
||||
</IonButton>
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="danger">
|
||||
<IonIcon slot="icon-only" name="more" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Dark Toolbar</IonTitle>
|
||||
</IonToolbar>
|
||||
);
|
||||
```
|
||||
|
||||
@ -527,6 +545,13 @@ export const ToolbarExample: React.FC = () => (
|
||||
<ion-title>Back Button</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<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>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
|
||||
@ -34,6 +34,25 @@
|
||||
}
|
||||
|
||||
|
||||
// Toolbar: Searchbar
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.toolbar-searchbar) .toolbar-container {
|
||||
@include padding(0);
|
||||
}
|
||||
|
||||
// TODO - important is needed because searchbar is scoped
|
||||
:host(.toolbar-searchbar) ::slotted(ion-searchbar) {
|
||||
/* stylelint-disable */
|
||||
height: 52px !important;
|
||||
|
||||
padding-top: 1px !important;
|
||||
padding-right: 16px !important;
|
||||
padding-bottom: 15px !important;
|
||||
padding-left: 16px !important;
|
||||
/* stylelint-enable */
|
||||
}
|
||||
|
||||
// iOS Toolbar Slot Placement
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@ -10,6 +10,13 @@
|
||||
<ion-title>Back Button</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<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>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
|
||||
@ -10,6 +10,13 @@
|
||||
<ion-title>Back Button</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<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>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
|
||||
@ -11,156 +11,160 @@ import {
|
||||
IonSearchbar,
|
||||
IonSegment,
|
||||
IonSegmentButton,
|
||||
IonContent
|
||||
} from '@ionic/react';
|
||||
|
||||
export const ToolbarExample: React.FC = () => (
|
||||
<IonButton>
|
||||
<IonToolbar>
|
||||
<IonTitle>Title Only</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonTitle>Title Only</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonBackButton defaultHref="/" />
|
||||
</IonButtons>
|
||||
<IonTitle>Back Button</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonBackButton defaultHref="/" />
|
||||
</IonButtons>
|
||||
<IonTitle>Back Button</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="contact" />
|
||||
</IonButton>
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="secondary">
|
||||
<IonIcon slot="icon-only" name="more" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Default Buttons</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonTitle size="small">Small Title above a Default Title</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonTitle>Default Title</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton fill="solid">
|
||||
<IonIcon slot="start" name="contact" />
|
||||
Contact
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Solid Buttons</IonTitle>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton fill="solid" color="secondary">
|
||||
Help
|
||||
<IonIcon slot="end" name="help-circle" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="contact" />
|
||||
</IonButton>
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="secondary">
|
||||
<IonIcon slot="icon-only" name="more" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Default Buttons</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton fill="outline">
|
||||
<IonIcon slot="start" name="star" />
|
||||
Star
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Outline Buttons</IonTitle>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="danger" fill="outline">
|
||||
Edit
|
||||
<IonIcon slot="end" name="create" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton fill="solid">
|
||||
<IonIcon slot="start" name="contact" />
|
||||
Contact
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Solid Buttons</IonTitle>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton fill="solid" color="secondary">
|
||||
Help
|
||||
<IonIcon slot="end" name="help-circle" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>Account</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="danger">Edit</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Text Only Buttons</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton fill="outline">
|
||||
<IonIcon slot="start" name="star" />
|
||||
Star
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Outline Buttons</IonTitle>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="danger" fill="outline">
|
||||
Edit
|
||||
<IonIcon slot="end" name="create" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonMenuButton autoHide={false} />
|
||||
</IonButtons>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="star" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Left side menu toggle</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>Account</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="danger">Edit</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Text Only Buttons</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton onClick={() => {}}>
|
||||
<IonIcon slot="icon-only" name="star" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Right side menu toggle</IonTitle>
|
||||
<IonButtons slot="end">
|
||||
<IonMenuButton autoHide={false} />
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonMenuButton autoHide={false} />
|
||||
</IonButtons>
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="star" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Left side menu toggle</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton onClick={() => {}}>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonSearchbar placeholder="Search Favorites" />
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton onClick={() => {}}>
|
||||
<IonIcon slot="icon-only" name="star" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Right side menu toggle</IonTitle>
|
||||
<IonButtons slot="end">
|
||||
<IonMenuButton autoHide={false} />
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar>
|
||||
<IonSegment>
|
||||
<IonSegmentButton value="all" checked>
|
||||
All
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton value="favorites">Favorites</IonSegmentButton>
|
||||
</IonSegment>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton onClick={() => {}}>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonSearchbar placeholder="Search Favorites" />
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar color="secondary">
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="contact" />
|
||||
</IonButton>
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="primary">
|
||||
<IonIcon slot="icon-only" name="more" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Secondary Toolbar</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonToolbar>
|
||||
<IonSegment>
|
||||
<IonSegmentButton value="all" checked>
|
||||
All
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton value="favorites">Favorites</IonSegmentButton>
|
||||
</IonSegment>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar color="dark">
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="contact" />
|
||||
</IonButton>
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="danger">
|
||||
<IonIcon slot="icon-only" name="more" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Dark Toolbar</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonButton>
|
||||
<IonToolbar color="secondary">
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="contact" />
|
||||
</IonButton>
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="primary">
|
||||
<IonIcon slot="icon-only" name="more" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Secondary Toolbar</IonTitle>
|
||||
</IonToolbar>
|
||||
|
||||
<IonToolbar color="dark">
|
||||
<IonButtons slot="secondary">
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="contact" />
|
||||
</IonButton>
|
||||
<IonButton>
|
||||
<IonIcon slot="icon-only" name="search" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="primary">
|
||||
<IonButton color="danger">
|
||||
<IonIcon slot="icon-only" name="more" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Dark Toolbar</IonTitle>
|
||||
</IonToolbar>
|
||||
);
|
||||
```
|
||||
|
||||
@ -11,6 +11,13 @@
|
||||
<ion-title>Back Button</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<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>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
|
||||
Reference in New Issue
Block a user