Skip to main content
Version: v9

ion-card

shadow

カードは、テキスト、画像、ボタン、リストなどのコンテンツを表示するためのコンテナです。 カードは1つのコンポーネントで構成することもできますが、 多くの場合、ヘッダー、タイトル、サブタイトル、コンテンツで構成されます。 カードはこの構造に対応するため、いくつかのコンポーネントに分割されます。 カードヘッダ、カードタイトル、カードサブタイトル、カードコンテンツ。

基本的な使い方​

Media Cards​

Card Buttons​

List Card​

テーマ​

Colors​

CSSカスタムプロパティ​

プロパティ​

button​

Descriptiontrueの場合、ボタンタグがレンダリングされ、カードはタップ可能になる。
Attributebutton
Typeboolean
Defaultfalse

color​

Descriptionアプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です.色に関する詳しい情報は theming を参照してください。
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
Defaultundefined

disabled​

Descriptiontrueの場合、ユーザはカードと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

download​

Descriptionこの属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます(ユーザーはファイル名を変更することができます)。
Attributedownload
Typestring | undefined
Defaultundefined

href​

Descriptionハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。
Attributehref
Typestring | undefined
Defaultundefined

mode​

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。

This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attributemode
Type"ios" | "md"
Defaultundefined

rel​

Descriptionターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られたリンクタイプのリストです。
Attributerel
Typestring | undefined
Defaultundefined

routerAnimation​

Descriptionルータを使用する場合、hrefを使用して別のページに移動する際の遷移アニメーションを指定します。
Attributerouter-animation
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

routerDirection​

Descriptionルータを使用する場合、hrefを使用して他のページに移動する際の遷移方向を指定します。
Attributerouter-direction
Type"back" | "forward" | "root"
Default'forward'

target​

Descriptionリンク先のURLを表示する場所を指定します。hrefを指定した場合のみ適用される。特別なキーワードがあります。"_blank", "_self", "_parent", "_top".
Attributetarget
Typestring | undefined
Defaultundefined

type​

Descriptionボタンの種類。onclickまたはbutton`プロパティが存在する場合にのみ使用される。
Attributetype
Type"button" | "reset" | "submit"
Default'button'

イベント​

No events available for this component.

メソッド​

No public methods available for this component.

CSS Shadow Parts​

NameDescription
nativeすべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。

CSSカスタムプロパティ​

NameDescription
--backgroundカードの背景
--colorカードの色

Slots​

No slots available for this component.