ion-button
按鈕提供可點擊的元素，可用於表單或任何需要簡單、標準按鈕功能的地方。它們可以顯示文字、圖示或兩者兼具。按鈕可以使用數個屬性設定樣式，使其外觀特定。
基本用法
展開
此屬性可讓您指定按鈕的寬度。依預設，按鈕具有 display: inline-block，但設定此屬性會將按鈕變更為 display: block 的全寬元素。
形狀
此屬性可讓您指定按鈕的形狀。依預設，按鈕是具有小邊框半徑的矩形，但將此設定為 "round" 會將按鈕變更為圓角元素。
填滿
此屬性會決定按鈕的背景和邊框顏色。依預設，按鈕具有實心背景，除非按鈕位於工具列內，在這種情況下，它具有透明背景。
大小
此屬性會指定按鈕的大小。設定此屬性會變更按鈕的高度和邊距。
圖示
主題化
色彩
CSS 自訂屬性
協助工具
按鈕的建立旨在具有協助工具，但可能需要根據其內容進行一些調整。按鈕組件會呈現原生的 按鈕元素，使其能夠利用原生按鈕提供的功能。
溢位的文字內容
在許多情況下，按鈕的文字內容可能會溢出容器。建議在這種情況下將文字包裝在按鈕內，以便仍然可以讀取所有文字。按鈕組件會自動調整其高度以容納額外的文字行。
當文字太長而無法容納時，按鈕文字不會自動換行到下一行。為了使文字換行，可以新增 ion-text-wrap 類別，這會將 white-space 屬性設定為 "normal"。這將成為未來主要版本中的預設值。
資訊
為了示範目的，只會在下方的按鈕上設定 max-width 樣式。文字換行將適用於動態按鈕寬度。
屬性
buttonType
| 描述 | 按鈕的類型。 |
| 屬性 | button-type |
| 類型 | 字串 |
| 預設 | 'button' |
color
| 描述 | 要從應用程式的色板使用的顏色。預設選項為："primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium" 和 "dark"。如需有關色彩的詳細資訊，請參閱主題化。 |
| 屬性 | color |
| 類型 | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ 字串 ｜ undefined |
| 預設 | undefined |
disabled
| 描述 | 如果為 true，使用者無法與按鈕互動。 |
| 屬性 | disabled |
| 類型 | 布林值 |
| 預設 | false |
download
| 描述 | 此屬性會指示瀏覽器下載 URL，而不是導覽至該 URL，因此系統會提示使用者將其另存為本機檔案。如果屬性具有值，則會將其用作「另存」提示中的預填檔案名稱（使用者仍然可以變更檔案名稱）。 |
| 屬性 | download |
| 類型 | 字串 ｜ undefined |
| 預設 | undefined |
expand
| 描述 | 對於全寬按鈕，請設定為 "block"；對於具有正方形邊角且沒有左右邊框的全寬按鈕，請設定為 "full"。 |
| 屬性 | expand |
| 類型 | "block" ｜ "full" ｜ undefined |
| 預設 | undefined |
fill
| 描述 | 若要使用類似平面按鈕的透明按鈕，請設定為 "clear"；若要使用具有邊框的透明按鈕，請設定為 "outline"；若要使用具有填滿背景的按鈕，請設定為 "solid"。預設填滿為 "solid"，除非在工具列內，在這種情況下，預設為 "clear"。 |
| 屬性 | fill |
| 類型 | "clear" ｜ "default" ｜ "outline" ｜ "solid" ｜ undefined |
| 預設 | undefined |
form
| 描述 | HTML 表單元素或表單元素 ID。用於在按鈕不是表單的子項時提交表單。 |
| 屬性 | form |
| 類型 | HTMLFormElement ｜ 字串 ｜ undefined |
| 預設 | undefined |
href
| 描述 | 包含 URL 或超連結指向的 URL 片段。如果設定了此屬性，將會呈現錨點標籤。 |
| 屬性 | href |
| 類型 | 字串 ｜ undefined |
| 預設 | undefined |
mode
| 描述 | 模式決定要使用哪些平台樣式。 |
| 屬性 | mode |
| 類型 | "ios" ｜ "md" |
| 預設 | undefined |
rel
| 描述 | 指定目標物件與連結物件的關係。此值是 連結類型的以空格分隔的清單。 |
| 屬性 | rel |
| 類型 | 字串 ｜ undefined |
| 預設 | undefined |
routerAnimation
| 描述 | 使用路由器時，它會指定在使用 href 導覽至另一個頁面時的轉換動畫。 |
| 屬性 | undefined |
| 類型 | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| 預設 | undefined |
routerDirection
| 描述 | 使用路由器時，它會指定在使用 href 導覽至另一個頁面時的轉換方向。 |
| 屬性 | router-direction |
| 類型 | "back" ｜ "forward" ｜ "root" |
| 預設 | 'forward' |
shape
| 描述 | 對於具有更圓角的按鈕，請設定為 "round"。 |
| 屬性 | shape |
| 類型 | "round" ｜ undefined |
| 預設 | undefined |
size
| 描述 | 設定為 "small" 可使按鈕具有較小的高度和內邊距；設定為 "default" 可使按鈕具有預設的高度和內邊距；設定為 "large" 可使按鈕具有較大的高度和內邊距。預設情況下，尺寸未設定，除非按鈕位於項目內，此時尺寸預設為 "small"。在項目內將尺寸設定為 "default" 可使其成為標準尺寸的按鈕。 |
| 屬性 | size |
| 類型 | "default" ｜ "large" ｜ "small" ｜ undefined |
| 預設 | undefined |
strong
| 描述 | 若為 true，則啟用具有較粗字重的按鈕。 |
| 屬性 | strong |
| 類型 | 布林值 |
| 預設 | false |
target
| 描述 | 指定要顯示連結 URL 的位置。僅當提供 href 時才適用。特殊關鍵字： "_blank"、"_self"、"_parent"、"_top"。 |
| 屬性 | target |
| 類型 | 字串 ｜ undefined |
| 預設 | undefined |
type
| 描述 | 按鈕的類型。 |
| 屬性 | type |
| 類型 | "button" ｜ "reset" ｜ "submit" |
| 預設 | 'button' |
事件
| 名稱 | 描述 | 冒泡 |
|---|---|---|
ionBlur | 當按鈕失去焦點時觸發。 | true |
ionFocus | 當按鈕獲得焦點時觸發。 | true |
方法
此組件沒有可用的公共方法。
CSS 陰影部分
| 名稱 | 描述 |
|---|---|
native | 包含所有子元素的原生 HTML 按鈕或錨點元素。 |
CSS 自訂屬性
- iOS
- MD
| 名稱 | 描述 |
|---|---|
--background | 按鈕的背景 |
--background-activated | 按下按鈕時的背景。請注意：設定此項會干擾 Material Design 的漣漪效果。 |
--background-activated-opacity | 按下按鈕時的不透明度 |
--background-focused | 使用 Tab 鍵聚焦時按鈕的背景 |
--background-focused-opacity | 使用 Tab 鍵聚焦時按鈕的不透明度 |
--background-hover | 滑鼠懸停在按鈕上時的背景 |
--background-hover-opacity | 滑鼠懸停時背景的不透明度 |
--border-color | 按鈕的邊框顏色 |
--border-radius | 按鈕的邊框圓角 |
--border-style | 按鈕的邊框樣式 |
--border-width | 按鈕的邊框寬度 |
--box-shadow | 按鈕的陰影 |
--color | 按鈕的文字顏色 |
--color-activated | 按下按鈕時的文字顏色 |
--color-focused | 使用 Tab 鍵聚焦時按鈕的文字顏色 |
--color-hover | 滑鼠懸停在按鈕上時的文字顏色 |
--opacity | 按鈕的不透明度 |
--padding-bottom | 按鈕的底部內邊距 |
--padding-end | 如果方向為從左到右，則為按鈕的右側內邊距；如果方向為從右到左，則為左側內邊距 |
--padding-start | 如果方向為從左到右，則為按鈕的左側內邊距；如果方向為從右到左，則為右側內邊距 |
--padding-top | 按鈕的頂部內邊距 |
--ripple-color | 按鈕漣漪效果的顏色 |
--transition | 按鈕的轉換效果 |
| 名稱 | 描述 |
|---|---|
--background | 按鈕的背景 |
--background-activated | 按下按鈕時的背景。請注意：設定此項會干擾 Material Design 的漣漪效果。 |
--background-activated-opacity | 按下按鈕時的不透明度 |
--background-focused | 使用 Tab 鍵聚焦時按鈕的背景 |
--background-focused-opacity | 使用 Tab 鍵聚焦時按鈕的不透明度 |
--background-hover | 滑鼠懸停在按鈕上時的背景 |
--background-hover-opacity | 滑鼠懸停時背景的不透明度 |
--border-color | 按鈕的邊框顏色 |
--border-radius | 按鈕的邊框圓角 |
--border-style | 按鈕的邊框樣式 |
--border-width | 按鈕的邊框寬度 |
--box-shadow | 按鈕的陰影 |
--color | 按鈕的文字顏色 |
--color-activated | 按下按鈕時的文字顏色 |
--color-focused | 使用 Tab 鍵聚焦時按鈕的文字顏色 |
--color-hover | 滑鼠懸停在按鈕上時的文字顏色 |
--opacity | 按鈕的不透明度 |
--padding-bottom | 按鈕的底部內邊距 |
--padding-end | 如果方向為從左到右，則為按鈕的右側內邊距；如果方向為從右到左，則為左側內邊距 |
--padding-start | 如果方向為從左到右，則為按鈕的左側內邊距；如果方向為從右到左，則為右側內邊距 |
--padding-top | 按鈕的頂部內邊距 |
--ripple-color | 按鈕漣漪效果的顏色 |
--transition | 按鈕的轉換效果 |
插槽
| 名稱 | 描述 |
|---|---|
| `` | 如果未提供插槽，內容將放置在已命名的插槽之間。 |
end | 內容會放置在 LTR (從左到右) 模式下按鈕文字的右側，在 RTL (從右到左) 模式下放置在左側。 |
icon-only | 應在沒有文字的按鈕中的圖示上使用。 |
start | 內容會放置在 LTR 模式下按鈕文字的左側，在 RTL 模式下放置在右側。 |