🔥 認識我們的新專案 t0ggles - 您終極的專案管理工具！ 🔥

卡片 Svelte 組件

卡片與列表視圖一樣，是包含和整理資訊的另一種好方法。卡片包含獨特的相關資料，例如，關於單一主題的照片、文字和連結。卡片通常是更複雜和詳細資訊的入口點。

卡片組件

包含以下組件

  • 卡片

卡片屬性

名稱類型預設值描述
colorsobject

包含 Tailwind CSS 顏色類別的物件

colors.bgIosstring'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.bgMaterialstring'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
colors.footerTextIosstring'text-black text-opacity-55 dark:text-white dark:text-opacity-55'
colors.footerTextMaterialstring'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.outlineIosstring'border-black border-opacity-20 dark:border-white dark:border-opacity-20'
colors.outlineMaterialstring'border-md-light-outline dark:border-md-dark-outline'
colors.textIosstring''
colors.textMaterialstring'text-md-light-on-surface dark:text-md-dark-on-surface'
contentWrapbooleantrue

用額外的具有邊距的元素包裹卡片內容

contentWrapPaddingstring'p-4'

內容包裹邊距（如果啟用 contentWrap）

footerstring

卡片頁尾的內容

footerDividerbooleanfalse

啟用頁尾和內容之間的分割線

headerstring

卡片頁首的內容

headerDividerbooleanfalse

啟用頁首和內容之間的分割線

marginstring'm-4'

Tailwind CSS 邊距類別

outlinebooleanundefined

使卡片具有外框。覆寫 outlineIos 和 outlineMaterial

outlineIosbooleanfalse

在 iOS 主題中使卡片具有外框

outlineMaterialbooleanfalse

在 Material 主題中使卡片具有外框

raisedbooleanundefined

使卡片凸起。覆寫 raisedIos 和 raisedMaterial

raisedIosbooleanfalse

在 iOS 主題中使卡片凸起

raisedMaterialbooleanfalse

在 Material 主題中使卡片凸起

卡片插槽

名稱描述
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 由 nolimits4web.