🔥 新プロジェクトのご紹介 t0ggles - 究極のプロジェクト管理ツール！ 🔥

カード Svelte コンポーネント

カードは、リストビューと並んで、情報を整理するための優れた方法です。カードには、写真、テキスト、リンクなど、単一の主題に関する独自の関連データが含まれています。カードは通常、より複雑で詳細な情報へのエントリポイントとなります。

カードコンポーネント

以下のコンポーネントが含まれています

  • カード

カードのプロパティ

名前タイプデフォルト説明
colorsオブジェクト

Tailwind CSS カラークラスを持つオブジェクト

colors.bgIos文字列'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.bgMaterial文字列'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
colors.footerTextIos文字列'text-black text-opacity-55 dark:text-white dark:text-opacity-55'
colors.footerTextMaterial文字列'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.outlineIos文字列'border-black border-opacity-20 dark:border-white dark:border-opacity-20'
colors.outlineMaterial文字列'border-md-light-outline dark:border-md-dark-outline'
colors.textIos文字列''
colors.textMaterial文字列'text-md-light-on-surface dark:text-md-dark-on-surface'
contentWrap真偽値true

カードコンテンツをパディング付きの追加要素でラップします

contentWrapPadding文字列'p-4'

コンテンツラッパーのパディング (contentWrap が有効な場合)

footer文字列

カードフッターのコンテンツ

footerDivider真偽値false

フッターとコンテンツの間に区切り線を有効にします

header文字列

カードヘッダーのコンテンツ

headerDivider真偽値false

ヘッダーとコンテンツの間に区切り線を有効にします

margin文字列'm-4'

Tailwind CSS マージンクラス

outline真偽値未定義

カードにアウトラインを作成します。 outlineIos と outlineMaterial を上書きします

outlineIos真偽値false

iOSテーマでカードにアウトラインを作成します

outlineMaterial真偽値false

マテリアルテーマでカードにアウトラインを作成します

raised真偽値未定義

カードを隆起させます。 raisedIos と raisedMaterial を上書きします

raisedIos真偽値false

iOSテーマでカードを隆起させます

raisedMaterial真偽値false

マテリアルテーマでカードを隆起させます

カードのスロット

名前説明
footer

カードフッターのコンテンツ

header

カードヘッダーのコンテンツ

例

Cards.svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Card,
    BlockTitle,
    List,
    ListItem,
    Link,
    Button,
  } from 'konsta/svelte';


</script>


<Page>
  <Navbar title="Cards" />


  <BlockTitle withBlock={false}>Simple Cards</BlockTitle>
  <Card>
    This is a simple card with plain text, but cards can also contain their own
    header, footer, list view, image, or any other element.
  </Card>
  <Card header="Card header" footer="Card footer">
    Card with header and footer. Card headers are used to display card titles
    and footers for additional information or just for custom actions.
  </Card>
  <Card>
    Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris
    aliquet magna justo.
  </Card>


  <BlockTitle withBlock={false}>Outline Cards</BlockTitle>
  <Card outline>
    This is a simple card with plain text, but cards can also contain their own
    header, footer, list view, image, or any other element.
  </Card>
  <Card outline header="Card header" footer="Card footer">
    Card with header and footer. Card headers are used to display card titles
    and footers for additional information or just for custom actions.
  </Card>
  <Card outline>
    Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris
    aliquet magna justo.{' '}
  </Card>


  <BlockTitle withBlock={false}>Outline With Dividers</BlockTitle>
  <Card
    outline
    header="Card header"
    footer="Card footer"
    headerDivider
    footerDivider
  >
    Card with header and footer. Card headers are used to display card titles
    and footers for additional information or just for custom actions.
  </Card>


  <BlockTitle withBlock={false}>Raised Cards</BlockTitle>
  <Card raised>
    This is a simple card with plain text, but cards can also contain their own
    header, footer, list view, image, or any other element.
  </Card>
  <Card raised header="Card header" footer="Card footer">
    Card with header and footer. Card headers are used to display card titles
    and footers for additional information or just for custom actions.
  </Card>
  <Card raised>
    Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris
    aliquet magna justo.{' '}
  </Card>


  <BlockTitle withBlock={false}>Card With List View</BlockTitle>
  <Card>
    <List nested class="-m-4">
      <ListItem href title="Link 1" />
      <ListItem href title="Link 2" />
      <ListItem href title="Link 3" />
      <ListItem href title="Link 4" />
      <ListItem href title="Link 5" />
    </List>
  </Card>


  <BlockTitle withBlock={false}>Styled Cards</BlockTitle>
  <div class="lg:grid lg:grid-cols-2">
    <Card outline>
      <div
        class="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
        style="background-image: url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)"
      >
        Journey To Mountains
      </div>
      <div class="text-gray-500 mb-3">Posted on January 21, 2021</div>
      <p>
        Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
        efficitur vitae non felis. Phasellus quis nibh hendrerit...
      </p>
      <svelte:fragment slot="footer">
        <div class="flex justify-between material:hidden">
          <Link>Like</Link>
          <Link>Read more</Link>
        </div>
        <div
          class="flex justify-start ios:hidden space-x-2 rtl:space-x-reverse"
        >
          <Button rounded inline>Like</Button>
          <Button rounded inline outline>Read more</Button>
        </div>
      </svelte:fragment>
    </Card>
    <Card>
      <div
        slot="header"
        class="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
        style="background-image: url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)"
      >
        Lorem Ipsum
      </div>
      <div class="text-gray-500 mb-3">Posted on January 21, 2021</div>
      <p>
        Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
        efficitur vitae non felis. Phasellus quis nibh hendrerit...
      </p>
      <svelte:fragment slot="footer">
        <div class="flex justify-between material:hidden">
          <Link>Like</Link>
          <Link>Read more</Link>
        </div>
        <div
          class="flex justify-start ios:hidden space-x-2 rtl:space-x-reverse"
        >
          <Button rounded inline>Like</Button>
          <Button rounded inline outline>Read more</Button>
        </div>
      </svelte:fragment>
    </Card>
  </div>
</Page>
コードのライセンス MIT.
2022 © Konsta UI by nolimits4web.