ion-toolbar
Ionic4项目中我们可以使用Ionic4导航条组件ion-toolbar对项目进行布局。 ion-toolbar官方文档地址:https://ionicframework.com/docs/api/toolbarToolbars are positioned above or below content. When a toolbar is placed in an
it will appear fixed at the top of the content, and when it is in an
it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. When placed within an
, toolbars will scroll with the content.
Buttons
Buttons placed in a toolbar should be placed inside of the
element. The
element can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.
Slot | Description |
---|---|
secondary |
Positions element to the left of the content in ios mode, and directly to the right in md mode. |
primary |
Positions element to the right of the content in ios mode, and to the far right in md mode. |
start |
Positions to the left of the content in LTR, and to the right in RTL. |
end |
Positions to the right of the content in LTR, and to the left in RTL. |
Borders
In md
mode, the
will receive a box-shadow on the bottom, and the
will receive a box-shadow on the top. In ios
mode, the
will receive a border on the bottom, and the
will receive a border on the top. Both the md
box-shadow and the ios
border can be removed by adding the no-border
attribute to the element.
ion-toolbar 用法(Usage)
<ion-toolbar>
<ion-title>Title Onlyion-title>
ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button>ion-back-button>
ion-buttons>
<ion-title>Back Buttonion-title>
ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="contact">ion-icon>
ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search">ion-icon>
ion-button>
ion-buttons>
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more">ion-icon>
ion-button>
ion-buttons>
<ion-title>Default Buttonsion-title>
ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button fill="solid">
<ion-icon slot="start" name="contact">ion-icon>
Contact
ion-button>
ion-buttons>
<ion-title>Solid Buttonsion-title>
<ion-buttons slot="primary">
<ion-button fill="solid" color="secondary">
Help
<ion-icon slot="end" name="help-circle">ion-icon>
ion-button>
ion-buttons>
ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button fill="outline">
<ion-icon slot="start" name="star">ion-icon>
Star
ion-button>
ion-buttons>
<ion-title>Outline Buttonsion-title>
<ion-buttons slot="primary">
<ion-button color="danger" fill="outline">
Edit
<ion-icon slot="end" name="create">ion-icon>
ion-button>
ion-buttons>
ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
Account
ion-button>
ion-buttons>
<ion-buttons slot="primary">
<ion-button color="danger">
Edit
ion-button>
ion-buttons>
<ion-title>Text Only Buttonsion-title>
ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button autoHide="false">ion-menu-button>
ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star">ion-icon>
ion-button>
ion-buttons>
<ion-title>Left side menu toggleion-title>
ion-toolbar>
<ion-toolbar>
<ion-buttons slot="primary">
<ion-button (click)="clickedStar()">
<ion-icon slot="icon-only" name="star">ion-icon>
ion-button>
ion-buttons>
<ion-title>Right side menu toggleion-title>
<ion-buttons slot="end">
<ion-menu-button autoHide="false">ion-menu-button>
ion-buttons>
ion-toolbar>
<ion-toolbar>
<ion-buttons slot="primary">
<ion-button (click)="clickedSearch()">
<ion-icon slot="icon-only" name="search">ion-icon>
ion-button>
ion-buttons>
<ion-searchbar placeholder="Search Favorites">ion-searchbar>
ion-toolbar>
<ion-toolbar>
<ion-segment>
<ion-segment-button value="all" checked>
All
ion-segment-button>
<ion-segment-button value="favorites">
Favorites
ion-segment-button>
ion-segment>
ion-toolbar>
<ion-toolbar color="secondary">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="contact">ion-icon>
ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search">ion-icon>
ion-button>
ion-buttons>
<ion-buttons slot="primary">
<ion-button color="primary">
<ion-icon slot="icon-only" name="more">ion-icon>
ion-button>
ion-buttons>
<ion-title>Secondary Toolbarion-title>
ion-toolbar>
<ion-toolbar color="dark">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="contact">ion-icon>
ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search">ion-icon>
ion-button>
ion-buttons>
<ion-buttons slot="primary">
<ion-button color="danger">
<ion-icon slot="icon-only" name="more">ion-icon>
ion-button>
ion-buttons>
<ion-title>Dark Toolbarion-title>
ion-toolbar>
<ion-toolbar>
<ion-title>Title Onlyion-title>
ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button>ion-back-button>
ion-buttons>
<ion-title>Back Buttonion-title>
ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="contact">ion-icon>
ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search">ion-icon>
ion-button>
ion-buttons>
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more">ion-icon>
ion-button>
ion-buttons>
<ion-title>Default Buttonsion-title>
ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button fill="solid">
<ion-icon slot="start" name="contact">ion-icon>
Contact
ion-button>
ion-buttons>
<ion-title>Solid Buttonsion-title>
<ion-buttons slot="primary">
<ion-button fill="solid" color="secondary">
Help
<ion-icon slot="end" name="help-circle">ion-icon>
ion-button>
ion-buttons>
ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button fill="outline">
<ion-icon slot="start" name="star">ion-icon>
Star
ion-button>
ion-buttons>
<ion-title>Outline Buttonsion-title>
<ion-buttons slot="primary">
<ion-button color="danger" fill="outline">
Edit
<ion-icon slot="end" name="create">ion-icon>
ion-button>
ion-buttons>
ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
Account
ion-button>
ion-buttons>
<ion-buttons slot="primary">
<ion-button color="danger">
Edit
ion-button>
ion-buttons>
<ion-title>Text Only Buttonsion-title>
ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false">ion-menu-button>
ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star">ion-icon>
ion-button>
ion-buttons>
<ion-title>Left side menu toggle