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