Card

Display content in a card block.

Basic Usage

The header can enable a highlight tip. If no header is needed, omit the header slot. You can enable head-tip to highlight the front of the header.

cardContent

<template>
  <b-card class="box-card" width="480px" head-tip>
    <template #header>
      <div flex="main:justify cross:center">
        <span>card名称</span>
        <b-icon name="dropbox" size="20" style="cursor: pointer"></b-icon>
      </div>
    </template>
    <div v-for="o in 4" :key="o" class="text item">cardContent</div>
  </b-card>
</template>

Default Title and Divider

Passing a header directly generates a default title; set divider="no" to remove the divider between the default title and content.

这是Content区域 1

这是Content区域 2

这是Content区域 3

这是Content区域 4

这是Content区域 1

这是Content区域 2

这是Content区域 3

这是Content区域 4

<template>
  <div style="background: #f8f8f8; padding: 20px">
    <div flex="main:justify box:mean">
      <div style="padding: 0 10px">
        <b-card class="box-card" header="cardTitle">
          <div v-for="o in 4" :key="o" class="text item">
            {{ '这是Content区域 ' + o }}
          </div>
        </b-card>
      </div>
      <div style="padding: 0 10px">
        <b-card class="box-card" header="cardTitle" divider="no">
          <div v-for="o in 4" :key="o" class="text item">
            {{ '这是Content区域 ' + o }}
          </div>
        </b-card>
      </div>
    </div>
  </div>
</template>

Border and Border Radius

No border is suitable when used with a background.

bordered controls whether to show a border

radius sets the border radius value

<template>
  <div style="background: #f8f8f8; padding: 20px">
    <div flex="main:justify box:mean">
      <div style="padding: 0 10px">
        <b-card class="box-card" header="cardTitle" :bordered="false">
          <div>bordered controls whether to show a border</div>
        </b-card>
      </div>
      <div style="padding: 0 10px">
        <b-card class="box-card" header="cardTitle" radius="10px">
          <div>radius sets the border radius value</div>
        </b-card>
      </div>
    </div>
  </div>
</template>

shadow

总是show

Defaulthovershow

不show

<template>
  <div flex="main:justify box:mean">
    <div style="padding: 0 10px">
      <b-card class="box-card" shadow="always">
        <div>总是show</div>
      </b-card>
    </div>
    <div style="padding: 0 10px">
      <b-card class="box-card">
        <div>Defaulthovershow</div>
      </b-card>
    </div>
    <div style="padding: 0 10px">
      <b-card class="box-card" shadow="never">
        <div>不show</div>
      </b-card>
    </div>
  </div>
</template>

Props

Parameter	Description	Type	Options	Default
header	Set header, can also be inserted via slot	String	—	—
body-style	Set body styles	Object	—	—
shadow	Shadow display	String	always / hover / never	hover
bordered	Whether to show border	Boolean	false	true
width	Set default card width	String	—	100%
radius	Set border radius value	String	0 / percentage / px	4px
divider	Divider between header and body	String	no / has	has
head-tip	Highlight tip for header	Boolean	true / false	false
bg-color	Overall background color	String	—	#fff

Card ​

Basic Usage ​

Default Title and Divider ​

Border and Border Radius ​

shadow ​