跳至主要內容
版本：v8

ion-toolbar

陰影

工具列通常位於內容上方或下方，並為目前畫面提供內容和動作。當放置在 內容 中時，工具列會隨內容捲動。

工具列可以包含幾個不同的元件，包括標題、按鈕、圖示、返回按鈕、選單按鈕、搜尋列、分段、進度條等等。

基本用法​

建議將工具列放在 header 或 footer 內，以獲得正確的定位。當工具列放置在 header 中時，它會固定顯示在內容的頂部。當它放置在 footer 中時，它會固定顯示在底部。全螢幕內容將在 header 或 footer 中的工具列後方捲動。title 元件可用於在工具列內顯示文字。

工具列中的按鈕​

放置在工具列中的按鈕應放置在 buttons 元件內。可以使用命名的 slot 將按鈕元件放置在工具列內。"primary" 和 "secondary" slot 在 ios 和 md 模式中的行為不同。

按鈕元件可以包裝標準的 button、返回按鈕、選單按鈕，或它們中的幾個。工具列中的按鈕預設樣式為透明，但可以使用按鈕上的 fill 屬性來變更此樣式。此範例中返回按鈕和選單按鈕上包含的屬性僅用於顯示目的；有關正確的用法，請參閱它們各自的文件。

工具列中的搜尋列​

搜尋列可以放置在工具列內以搜尋內容。它應該是工具列的唯一子元件，並且會佔用全部寬度和高度。

工具列中的分段​

分段通常在工具列中使用，以在同一頁面上的兩個不同內容視圖之間切換。它們可以與其他元件（例如按鈕）一起放置在工具列中，但不應與標題一起放置。

工具列中的進度條​

進度條用作載入指示器，以顯示應用程式中正在進行的程序。進度條可以與工具列內部的任何其他元件一起放置，因為它們將與工具列的底部對齊。

主題化​

顏色​

CSS 自訂屬性​

邊框​

在 md 模式下，<ion-header> 的底部會接收一個陰影，而 <ion-footer> 的頂部會接收一個陰影。在 ios 模式下，<ion-header> 的底部會接收一個邊框，而 <ion-footer> 的頂部會接收一個邊框。

屬性​

color​

描述要從應用程式的調色盤中使用的顏色。預設選項為："primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium" 和 "dark"。有關顏色的更多資訊，請參閱主題化。
屬性color
類型"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
預設值undefined

mode​

描述模式決定要使用哪個平台樣式。
屬性模式
類型"ios" ｜ "md"
預設值undefined

事件​

此元件沒有可用的事件。

方法​

此元件沒有可用的公開方法。

CSS 陰影部分​

此元件沒有可用的 CSS 陰影部分。

CSS 自訂屬性​

名稱描述
--background工具列的背景
--border-color工具列邊框的顏色
--border-style工具列邊框的樣式
--border-width工具列邊框的寬度
--color工具列文字的顏色
--min-height工具列的最小高度
--opacity工具列背景的不透明度
--padding-bottom工具列的底部內距
--padding-end如果方向是從左到右，則為工具列的右邊內距；如果方向是從右到左，則為左邊內距
--padding-start如果方向是從左到右，則為工具列的左邊內距；如果方向是從右到左，則為右邊內距
--padding-top工具列的頂部內距

Slot​

名稱描述
``如果提供的內容沒有 slot，則放置在命名的 slot 之間。
end內容放置在 LTR 中工具列文字的右側，在 RTL 中則放置在左側。
primary內容放置在 ios 模式中工具列文字的右側，在 md 模式中則放置在最右側。
secondary內容放置在 ios 模式中工具列文字的左側，在 md 模式中則直接放置在右側。
start內容放置在 LTR 中工具列文字的左側，在 RTL 中則放置在右側。

目錄

編輯此頁面