跳至主要內容
版本:v8

ion-card

陰影

卡片是顯示文字、圖片、按鈕和列表等內容的容器。卡片可以是單一元件,但通常由標頭、標題、副標題和內容組成。卡片被分解為幾個元件以適應此結構:卡片標頭卡片標題卡片副標題卡片內容

基本用法

媒體卡片

卡片按鈕

列表卡片

主題化

色彩

CSS 自訂屬性

屬性

button

描述如果為 true,則會呈現按鈕標籤,並且卡片將可點擊。
屬性button
類型布林值
預設值false

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

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'

target

描述指定要在何處顯示連結的 URL。僅在提供 href 時才適用。特殊關鍵字:"_blank""_self""_parent""_top"
屬性target
類型字串 | undefined
預設值undefined

type

描述按鈕的類型。僅在存在 onclickbutton 屬性時使用。
屬性type
類型"button" | "reset" | "submit"
預設值'button'

事件

此元件沒有可用的事件。

方法

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

CSS 陰影零件

名稱描述
native包裝所有子元素的原生 HTML 按鈕、錨點或 div 元素。

CSS 自訂屬性

名稱描述
--background卡片的背景
--color卡片的顏色

插槽

此元件沒有可用的插槽。