arrow-left

All pages
gitbookPowered by GitBook
1 of 1

Loading...

Cards

介紹使用 Cards 卡片元件

Cards,卡片,推薦使用在展示一系列的資訊或是特別想介紹的內容。

hashtag
基本使用

hashtag
沒有內距

hashtag
客製化標頭、尾

hashtag
陰影

hashtag
屬性

Name
Value
Type
Default
Required
Note

hashtag
Demo

<bpa-card>
  Cotnent
</bpa-card>

String

nopadding

Boolean

padding=0

shadow

Boolean

false

show/hide shadow

header

{ text } or template

String

footer

Card 介紹示意圖

{ text } or template

<bpa-card nopadding>
  Cotnent
</bpa-card>
<bpa-card 
  header="card header text"
  footer="card footer text"
>
  Cotnent
</bpa-card>
<bpa-card>
  <template v-slot:header>
    <mark>Card Header</mark>
  </template>
  Content
  <template v-slot:footer>
    <bpa-button>Card Footer Button</bpa-button>
  </template>
</bpa-card>
<bpa-card shadow>
  Cotnent
</bpa-card>