Ionic4项目中我们可以使用Ionic4导航条组件ion-toolbar对项目进行布局。
Toolbars 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)
angularjavascriptreactvue
Title Only
Back Button
Default Buttons
Contact
Solid Buttons
Help
Star
Outline Buttons
Edit
Account
Edit
Text Only Buttons
Left side menu toggle
Right side menu toggle
All
Favorites
Secondary Toolbar
Dark Toolbar
Title Only
Back Button
Default Buttons
Contact
Solid Buttons
Help
Star
Outline Buttons
Edit
Account
Edit
Text Only Buttons
Left side menu toggle