Cardカード

カードは、単一のテーマに関連するコンテンツと操作を掲載するための多機能コンポーネントです。

使用方法

コンポーネントを必要に応じてインポートします：

import 'mdui/components/card.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

import type { Card } from 'mdui/components/card.js';

使用例：

Card

<mdui-card style="width: 200px;height: 124px">Card</mdui-card>

例

形状

variant 属性を使用してカードの形状を設定します。

<mdui-card variant="elevated" style="width: 200px;height: 124px"></mdui-card>
<mdui-card variant="filled" style="width: 200px;height: 124px"></mdui-card>
<mdui-card variant="outlined" style="width: 200px;height: 124px"></mdui-card>

ソース

クリック可能

clickable 属性を追加するとカードをクリック可能にできます。この場合、マウスホバー効果とクリックリップル効果が追加されます。

<mdui-card clickable style="width: 200px;height: 124px"></mdui-card>

ソース

リンク

href 属性を追加すると、カードをリンクにできます。この場合、リンク関連の属性 download、target、rel も使用できます。

<mdui-card href="https://www.mdui.org" target="_blank" style="width: 200px;height: 124px"></mdui-card>

ソース

無効状態

disabled 属性を追加するとカードを無効にできます。

<mdui-card disabled style="width: 200px;height: 124px"></mdui-card>

ソース

API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`variant`	`variant`	`'elevated' \| 'filled' \| 'outlined'`	`'elevated'`
カードの形状です。次の値を指定します： `elevated`：影付きカード。背景との視覚的な分離度が高いです。 `filled`：背景色付きカード。背景との視覚的な分離度が低いです。 `outlined`：枠線付きカード。背景との視覚的な分離度が最も高いです。
`clickable`	`clickable`	`boolean`	`false`
クリック可能かどうかを指定します。`true` の場合、カードにマウスホバー効果とクリックリップル効果が追加されます。
`disabled`	`disabled`	`boolean`	`false`
無効状態にするかどうかを指定します。
`href`	`href`	`string`	-
リンク先のURLです。この属性を設定すると、コンポーネント内部は `<a>` 要素としてレンダリングされ、リンク関連の属性が使用可能になります。
`download`	`download`	`string`	-
ダウンロードリンクの対象ファイル名です。注：`href` 属性が設定されている場合にのみ有効です。
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
リンクの開き方です。次の値を指定します： `_blank`：新しいウィンドウで開く `_parent`：親フレームで開く `_self`：デフォルト。現在のフレームで開く `_top`：最上位のウィンドウで開く注：`href` 属性が設定されている場合にのみ有効です。
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
現在のドキュメントとリンク先ドキュメントの関係です。次の値を指定します： `alternate`：現在のドキュメントの代替バージョン `author`：現在のドキュメントまたは記事の作成者 `bookmark`：直近の祖先セクションへのパーマリンク `external`：参照先ドキュメントが現在のサイトとは異なるサイトにあることを示します `help`：関連するヘルプドキュメントへのリンク `license`：現在のドキュメントのメインコンテンツが、参照先ファイルの著作権ライセンスの対象であることを示します `me`：現在のドキュメントがリンク先コンテンツの所有者を表します `next`：現在のドキュメントがシリーズの一部であり、参照先ドキュメントがシリーズの次のドキュメントです `nofollow`：現在のドキュメントの作成者または発行者が、参照先ファイルを推奨していないことを示します `noreferrer`：`Referer` ヘッダーを含めません。`noopener` と同様の効果です `opener`：ハイパーリンクが最上位のブラウジングコンテキストを作成する場合（つまり `target` 属性値が `_blank`）、補助ブラウジングコンテキストを作成します `prev`：現在のドキュメントがシリーズの一部であり、参照先ドキュメントがシリーズの前のドキュメントです `search`：現在のファイルとその関連ページを検索するために使用できるリソースへのリンクを提供します `tag`：現在のドキュメントに適用されるタグ（指定されたアドレスで識別される）を提供します注：`href` 属性が指定されている場合にのみ使用できます。
`autofocus`	`autofocus`	`boolean`	`false`
ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
`tabindex`	`tabIndex`	`number`	-
Tab キーによるフォーカス移動時の、要素の順序を指定します。

メソッド

名前	パラメーター	戻り値
`click`		`void`
要素のマウスクリックをシミュレートします。
`focus`	`options: FocusOptions` (オプション)	`void`
現在の要素にフォーカスを設定します。オプションとして、以下のプロパティを持つオブジェクトを渡すことができます： `preventScroll`：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを `true` に設定します。
`blur`		`void`
現在の要素からフォーカスを外します。

イベント

名前
`focus`
フォーカスを取得したときに発生します。
`blur`
フォーカスを失ったときに発生します。

Slots

名前
デフォルト
カードの内容

CSS カスタムプロパティ

名前
`--shape-corner`
コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。

前の章

ButtonIcon アイコンボタン

次の章

Checkbox チェックボックス