Piman
  • Piman 無障礙網頁前端 UI 框架
  • 關於 Piman
  • 常見問答
  • Vue3 版本
    • 設計系統
  • Vue2 版本
    • 設計系統
    • 快速開始
    • Accordion
    • Breadcrumb
    • Buttons
    • Cards
    • Checkbox
    • Dialog
    • Dropdown
    • Form
    • Input
    • Message
    • Pagination
    • Popover
    • Radio
    • Select
    • Switch
    • Tabs
    • Tooltip
    • Tree
  • 更新日誌
  • 成為貢獻者,一起開發 Piman
    • Vue2
      • i18n
      • CSS & SCSS
      • Update
      • Develope Component
Powered by GitBook
On this page
  • 基本使用
  • 沒有內距
  • 客製化標頭、尾
  • 陰影
  • 屬性
  • Demo

Was this helpful?

Export as PDF
  1. Vue2 版本

Cards

介紹使用 Cards 卡片元件

PreviousButtonsNextCheckbox

Last updated 1 year ago

Was this helpful?

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

基本使用

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

沒有內距

<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>

屬性

Name
Value
Type
Default
Required
Note

header

{ text } or template

String

footer

{ text } or template

String

nopadding

Boolean

padding=0

shadow

Boolean

false

show/hide shadow

Demo

Card 介紹示意圖