Skip to content
fandhe-frontend
GitHub

Card

fandhe-frontend-pre-styled-uicard mod が提供するスタイル済み Card 部品です。

関連情報をひとまとめに表示するレイアウトコンテナです。header/body/footer/title/description の 6 パーツを組み合わせて構造化できます。純粋なレイアウト部品のため role/aria-* は付与しません。

関連 API: fandhe-frontend-pre-styled-ui API

Demo

variant(elevated / outline / subtle)を持つ装飾的コンテナ。

Elevated

card variant のデモです。

header / body / footer / title / description の slot 構成を持つ汎用コンテナです。

Outline

card variant のデモです。

header / body / footer / title / description の slot 構成を持つ汎用コンテナです。

Subtle

card variant のデモです。

header / body / footer / title / description の slot 構成を持つ汎用コンテナです。

Features

  • CardVariant(Elevated/Outline/Subtle、crates/pre-styled-ui/src/card.rs:26-71)で見た目を切り替える
  • header/body/footer/title/description の 6 パーツでレイアウトを構造化する(card.rs:150-181)
  • 純粋なレイアウトコンテナのため role/aria-* は付与しない(card.rs:4)

Anatomy

root
  header
    title
    description
  body
  footer

API Reference

Arguments

NameTypeDefaultDescription
variantCardVariantOutline見た目(card.rs:26-71、#[default] は Outline)。

Examples

Elevated card

header/body/footer を組み合わせた Elevated variant の例です。

Title

Body
Footer

Accessibility

WAI-ARIA

AttributeDescription
(該当なし)純粋なレイアウトコンテナであり role/aria-* を付与しない(card.rs:4)。