メインコンテンツへスキップ
バージョン: v8

ion-card

シャドウ

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

基本的な使用方法​

メディアカード​

カードボタン​

リストカード​

テーマ設定​

カラー​

CSS カスタムプロパティ​

プロパティ​

button​

説明trueの場合、ボタンタグがレンダリングされ、カードはタップ可能になります。
属性button
型boolean
デフォルト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
型boolean
デフォルトfalse

download​

説明この属性は、ブラウザに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​

説明ボタンの種類です。onclickまたはbuttonプロパティが存在する場合にのみ使用されます。
属性type
型"button" ｜ "reset" ｜ "submit"
デフォルト'button'

イベント​

このコンポーネントで使用できるイベントはありません。

メソッド​

このコンポーネントで使用できる公開メソッドはありません。

CSS シャドウパーツ​

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

CSS カスタムプロパティ​

名前説明
--backgroundカードの背景
--colorカードの色

スロット​

このコンポーネントで使用できるスロットはありません。

目次

このページを編集