カード

Cardを使ってカードコンポーネントを定義します。

効果

カードのタイトル

こちらはカードのコンテンツです

コード：

<Card title="カードのタイトル" > 
こちらはカードのコンテンツです
</Card>

カードのコンテンツは Markdownの記法に従います。

アイコンの設定

アイコン付きカード

こちらはカードのコンテンツです

コード：

<Card title="アイコン付きカード" icon="material-two-tone-storefront" > 
こちらはカードのコンテンツです
</Card>

クリックしてリダイレクトするカード

クリックしてリダイレクトする

カードをクリックすると、Apidogの公式サイトにリダイレクトされます。

コード：

<Card title="クリックで飛べるカード" href="https://apidog.com" icon="material-two-tone-storefront">
カードをクリックすると、Apidogの公式サイトにリダイレクトされます。
</Card>

`class` 属性を使用したTailwind CSSスタイルの適用

カードの

カードの内容

コード：：

<Card title="カードの" class="text-center text-xl font-bold">
カードの内容
</Card>

`style` を使用したスタイルの直接定義

カードの

カードの内容

コード：：

<Card title="カードの" style="background-color: #f0f0f0; padding: 10px;">
カードの内容
</Card>

パラメータ説明

Card

title

string

标题

必須

カードタイトルの定義

href

string

リンク先アドレス

可選

カードをクリックしてリダイレクトするURLの定義

icon

string

Iconアイコン

可選

Iconの定義定義方法の詳細はアイコン

class

string

可選

HTML要素に1つ以上のクラス名を割り当てます。Tailwind CSSがサポートされています。

style

string

可選

インラインスタイル属性を使用すると、CSSスタイルを直接定義できます。

効果#

アイコンの設定#

クリックしてリダイレクトするカード#

class 属性を使用したTailwind CSSスタイルの適用#

style を使用したスタイルの直接定義#

パラメータ説明#

効果

アイコンの設定

クリックしてリダイレクトするカード

`class` 属性を使用したTailwind CSSスタイルの適用

`style` を使用したスタイルの直接定義

パラメータ説明