20260720172840
This commit is contained in:
oneao committed
1 parent
cda7f16d3a
commit
94207c77ff
3117 files changed
+201407
-1236
No files matched your search
@@ -0,0 +1,64 @@
|
||||
# _semantic
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@antdv-next/icons'
|
||||
import { computed } from 'vue'
|
||||
import { SemanticPreview } from '@/components/semantic'
|
||||
import { useComponentLocale } from '@/composables/use-locale'
|
||||
import { locales } from '../locales'
|
||||
|
||||
const { t } = useComponentLocale(locales)
|
||||
|
||||
const semantics = computed(() => [
|
||||
{ name: 'root', desc: t('root'), version: '1.0.0' },
|
||||
{ name: 'header', desc: t('header'), version: '1.0.0' },
|
||||
{ name: 'title', desc: t('title'), version: '1.0.0' },
|
||||
{ name: 'extra', desc: t('extra'), version: '1.0.0' },
|
||||
{ name: 'cover', desc: t('cover'), version: '1.0.0' },
|
||||
{ name: 'body', desc: t('body'), version: '1.0.0' },
|
||||
{ name: 'actions', desc: t('actions'), version: '1.0.0' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SemanticPreview
|
||||
component-name="Card"
|
||||
:semantics="semantics"
|
||||
>
|
||||
<template #default="{ classes }">
|
||||
<div :style="{ position: 'absolute' }">
|
||||
<a-card
|
||||
title="Card title"
|
||||
extra="More"
|
||||
:style="{ width: '300px' }"
|
||||
:classes="classes"
|
||||
>
|
||||
<template #cover>
|
||||
<img
|
||||
draggable="false"
|
||||
alt="example"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
|
||||
>
|
||||
</template>
|
||||
<template #actions>
|
||||
<SettingOutlined key="setting" />
|
||||
<EditOutlined key="edit" />
|
||||
<EllipsisOutlined key="ellipsis" />
|
||||
</template>
|
||||
<a-card-meta
|
||||
title="Card Meta title"
|
||||
description="This is the description"
|
||||
>
|
||||
<template #avatar>
|
||||
<a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />
|
||||
</template>
|
||||
</a-card-meta>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
</SemanticPreview>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,30 @@
|
||||
# Basic card片
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
A basic card containing a title, content and an extra corner content. Supports two sizes: `default` and `small`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-space vertical :size="16">
|
||||
<a-card title="Default size card" style="width: 300px">
|
||||
<template #extra>
|
||||
<a href="#">More</a>
|
||||
</template>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</a-card>
|
||||
<a-card size="small" title="Small size card" style="width: 300px">
|
||||
<template #extra>
|
||||
<a href="#">More</a>
|
||||
</template>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</a-card>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,19 @@
|
||||
# No border
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
A borderless card on a gray background.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="w-full h-400px" style="background-color: rgb(240, 242, 245)">
|
||||
<a-card title="Card title" variant="borderless" style="width: 300px">
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
# Customized content
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
You can use `a-card-meta` to support more flexible content.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-card hoverable variant="borderless" style="width: 240px">
|
||||
<template #cover>
|
||||
<img
|
||||
draggable="false"
|
||||
alt="example"
|
||||
src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
|
||||
>
|
||||
</template>
|
||||
<a-card-meta title="Europe Street beat" description="www.instagram.com" />
|
||||
</a-card>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,44 @@
|
||||
# Grid card
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Grid style card content.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CSSProperties } from 'vue'
|
||||
|
||||
const gridStyle: CSSProperties = {
|
||||
width: '25%',
|
||||
textAlign: 'center',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-card title="Card Title">
|
||||
<a-card-grid :style="gridStyle">
|
||||
Content
|
||||
</a-card-grid>
|
||||
<a-card-grid :hoverable="false" :style="gridStyle">
|
||||
Content
|
||||
</a-card-grid>
|
||||
<a-card-grid :style="gridStyle">
|
||||
Content
|
||||
</a-card-grid>
|
||||
<a-card-grid :style="gridStyle">
|
||||
Content
|
||||
</a-card-grid>
|
||||
<a-card-grid :style="gridStyle">
|
||||
Content
|
||||
</a-card-grid>
|
||||
<a-card-grid :style="gridStyle">
|
||||
Content
|
||||
</a-card-grid>
|
||||
<a-card-grid :style="gridStyle">
|
||||
Content
|
||||
</a-card-grid>
|
||||
</a-card>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,31 @@
|
||||
# Card in column
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Cards usually cooperate with grid column layout in overview page.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="w-full h-400px" style="background-color: rgb(240, 242, 245)">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-card title="Card title" variant="borderless">
|
||||
Card content
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-card title="Card title" variant="borderless">
|
||||
Card content
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-card title="Card title" variant="borderless">
|
||||
Card content
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,26 @@
|
||||
# Inner card
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
It can be placed inside the ordinary card to display the information of the multilevel structure.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-card title="Card title">
|
||||
<a-card type="inner" title="Inner Card title">
|
||||
<template #extra>
|
||||
<a href="#">More</a>
|
||||
</template>
|
||||
Inner Card content
|
||||
</a-card>
|
||||
<a-card style="margin-top: 16px" type="inner" title="Inner Card title">
|
||||
<template #extra>
|
||||
<a href="#">More</a>
|
||||
</template>
|
||||
Inner Card content
|
||||
</a-card>
|
||||
</a-card>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,61 @@
|
||||
# Loading card
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Shows a loading indicator while the contents of the card is being fetched.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@antdv-next/icons'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const loading = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex gap="middle" align="start" vertical>
|
||||
<a-switch :checked="!loading" @change="(checked: boolean) => loading = !checked" />
|
||||
<a-card :loading="loading" style="min-width: 300px">
|
||||
<template #actions>
|
||||
<EditOutlined key="edit" />
|
||||
<SettingOutlined key="setting" />
|
||||
<EllipsisOutlined key="ellipsis" />
|
||||
</template>
|
||||
<a-card-meta title="Card title">
|
||||
<template #avatar>
|
||||
<a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
|
||||
</template>
|
||||
<template #description>
|
||||
<p>This is the description</p>
|
||||
<p>This is the description</p>
|
||||
</template>
|
||||
</a-card-meta>
|
||||
</a-card>
|
||||
<a-card :loading="loading" style="min-width: 300px">
|
||||
<template #actions>
|
||||
<EditOutlined key="edit" />
|
||||
<SettingOutlined key="setting" />
|
||||
<EllipsisOutlined key="ellipsis" />
|
||||
</template>
|
||||
<a-card-meta title="Card title">
|
||||
<template #avatar>
|
||||
<a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2" />
|
||||
</template>
|
||||
<template #description>
|
||||
<p>This is the description</p>
|
||||
<p>This is the description</p>
|
||||
</template>
|
||||
</a-card-meta>
|
||||
</a-card>
|
||||
</a-flex>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,35 @@
|
||||
# Support more content configuration
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
A Card that supports `cover`, `avatar`, `title` and `description`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@antdv-next/icons'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-card style="width: 300px">
|
||||
<template #cover>
|
||||
<img
|
||||
draggable="false"
|
||||
alt="example"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
|
||||
>
|
||||
</template>
|
||||
<template #actions>
|
||||
<SettingOutlined key="setting" />
|
||||
<EditOutlined key="edit" />
|
||||
<EllipsisOutlined key="ellipsis" />
|
||||
</template>
|
||||
<a-card-meta title="Card title" description="This is the description">
|
||||
<template #avatar>
|
||||
<a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />
|
||||
</template>
|
||||
</a-card-meta>
|
||||
</a-card>
|
||||
</template>
|
||||
```
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
# Cover and actions without body
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const cover = 'https://api.dicebear.com/7.x/miniavs/svg?seed=8'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-card style="width: 300px">
|
||||
<template #cover>
|
||||
<img alt="example" :src="cover">
|
||||
</template>
|
||||
<template #actions>
|
||||
<span key="setting">setting</span>
|
||||
<span key="edit">edit</span>
|
||||
</template>
|
||||
</a-card>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,24 @@
|
||||
# Simple card
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
A simple card only containing a content area.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-card style="width: 300px">
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,136 @@
|
||||
# Custom semantic dom styling
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CardProps } from 'antdv-next'
|
||||
import { EditOutlined, HeartOutlined, ShareAltOutlined } from '@antdv-next/icons'
|
||||
import { theme } from 'antdv-next'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const { token } = theme.useToken()
|
||||
|
||||
const classes = computed(() => ({
|
||||
root: 'custom-card-root',
|
||||
header: 'custom-card-header',
|
||||
body: 'custom-card-body',
|
||||
}))
|
||||
|
||||
const stylesCard = computed(() => ({
|
||||
root: {
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
|
||||
borderRadius: '8px',
|
||||
},
|
||||
title: {
|
||||
fontSize: '16px',
|
||||
fontWeight: 500,
|
||||
},
|
||||
}))
|
||||
|
||||
const stylesCardFn = computed(() => {
|
||||
return (info: { props: CardProps }) => {
|
||||
if (info.props.variant === 'outlined') {
|
||||
return {
|
||||
root: {
|
||||
borderColor: '#696FC7',
|
||||
boxShadow: '0 2px 8px #A7AAE1',
|
||||
borderRadius: '8px',
|
||||
},
|
||||
extra: {
|
||||
color: '#696FC7',
|
||||
},
|
||||
title: {
|
||||
fontSize: '16px',
|
||||
fontWeight: 500,
|
||||
color: '#A7AAE1',
|
||||
},
|
||||
}
|
||||
}
|
||||
return {}
|
||||
}
|
||||
})
|
||||
|
||||
const stylesCardMeta = {
|
||||
title: {
|
||||
color: '#A7AAE1',
|
||||
},
|
||||
description: {
|
||||
color: '#A7AAE1',
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex gap="middle">
|
||||
<a-card
|
||||
title="Object Card"
|
||||
:classes="classes"
|
||||
:styles="stylesCard"
|
||||
variant="borderless"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button type="link">
|
||||
More
|
||||
</a-button>
|
||||
</template>
|
||||
<template #actions>
|
||||
<HeartOutlined key="heart" style="color: #ff6b6b" />
|
||||
<ShareAltOutlined key="share" style="color: #4ecdc4" />
|
||||
<EditOutlined key="edit" style="color: #45b7d1" />
|
||||
</template>
|
||||
<a-card-meta title="Object Card Meta title" description="This is the description">
|
||||
<template #avatar>
|
||||
<a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
|
||||
</template>
|
||||
</a-card-meta>
|
||||
</a-card>
|
||||
<a-card
|
||||
title="Function Card"
|
||||
:classes="classes"
|
||||
:styles="stylesCardFn"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button type="link" :styles="{ root: { color: '#A7AAE1' } }">
|
||||
More
|
||||
</a-button>
|
||||
</template>
|
||||
<template #actions>
|
||||
<HeartOutlined key="heart" style="color: #ff6b6b" />
|
||||
<ShareAltOutlined key="share" style="color: #4ecdc4" />
|
||||
<EditOutlined key="edit" style="color: #45b7d1" />
|
||||
</template>
|
||||
<a-card-meta
|
||||
title="Function Card Meta title"
|
||||
description="This is the description"
|
||||
:styles="stylesCardMeta"
|
||||
>
|
||||
<template #avatar>
|
||||
<a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
|
||||
</template>
|
||||
</a-card-meta>
|
||||
</a-card>
|
||||
</a-flex>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-card-root {
|
||||
width: 300px;
|
||||
background-color: v-bind('token.colorBgContainer');
|
||||
border-radius: v-bind('`${token.borderRadiusLG}px`');
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid v-bind('token.colorBorderSecondary');
|
||||
}
|
||||
|
||||
.custom-card-header {
|
||||
border-bottom: none;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.custom-card-body {
|
||||
padding-top: 0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,97 @@
|
||||
# With tabs
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
More content can be hosted.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const tabList = [
|
||||
{
|
||||
key: 'tab1',
|
||||
tab: 'tab1',
|
||||
},
|
||||
{
|
||||
key: 'tab2',
|
||||
tab: 'tab2',
|
||||
},
|
||||
]
|
||||
|
||||
const contentList: Record<string, string> = {
|
||||
tab1: 'content1',
|
||||
tab2: 'content2',
|
||||
}
|
||||
|
||||
const tabListNoTitle = [
|
||||
{
|
||||
key: 'article',
|
||||
label: 'article',
|
||||
},
|
||||
{
|
||||
key: 'app',
|
||||
label: 'app',
|
||||
},
|
||||
{
|
||||
key: 'project',
|
||||
label: 'project',
|
||||
},
|
||||
]
|
||||
|
||||
const contentListNoTitle: Record<string, string> = {
|
||||
article: 'article content',
|
||||
app: 'app content',
|
||||
project: 'project content',
|
||||
}
|
||||
|
||||
const activeTabKey1 = ref('tab1')
|
||||
const activeTabKey2 = ref('app')
|
||||
|
||||
function onTab1Change(key: string) {
|
||||
activeTabKey1.value = key
|
||||
}
|
||||
|
||||
function onTab2Change(key: string) {
|
||||
activeTabKey2.value = key
|
||||
}
|
||||
|
||||
const content1 = computed(() => contentList[activeTabKey1.value])
|
||||
const content2 = computed(() => contentListNoTitle[activeTabKey2.value])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-card
|
||||
style="width: 100%"
|
||||
title="Card title"
|
||||
:tab-list="tabList"
|
||||
:active-tab-key="activeTabKey1"
|
||||
@tab-change="onTab1Change"
|
||||
>
|
||||
<template #extra>
|
||||
<a href="#">More</a>
|
||||
</template>
|
||||
<p>{{ content1 }}</p>
|
||||
</a-card>
|
||||
<br>
|
||||
<br>
|
||||
<a-card
|
||||
style="width: 100%"
|
||||
:tab-list="tabListNoTitle"
|
||||
:active-tab-key="activeTabKey2"
|
||||
:tab-props="{
|
||||
size: 'middle',
|
||||
}"
|
||||
@tab-change="onTab2Change"
|
||||
>
|
||||
<template #tabBarExtraContent>
|
||||
<a href="#">More</a>
|
||||
</template>
|
||||
<p>{{ content2 }}</p>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
title: Card
|
||||
description: A container for displaying information.
|
||||
---
|
||||
|
||||
## When To Use
|
||||
A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.
|
||||
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| Basic card片 | demo/basic.md |
|
||||
| No border | demo/border-less.md |
|
||||
| Simple card | demo/simple.md |
|
||||
| Customized content | demo/flexible-content.md |
|
||||
| Card in column | demo/in-column.md |
|
||||
| Loading card | demo/loading.md |
|
||||
| Grid card | demo/grid-card.md |
|
||||
| Inner card | demo/inner.md |
|
||||
| With tabs | demo/tabs.md |
|
||||
| Support more content configuration | demo/meta.md |
|
||||
| Custom semantic dom styling | demo/style-class.md |
|
||||
| Cover and actions without body | demo/no-body-debug.md |
|
||||
|
||||
## API
|
||||
|
||||
Common props ref：[Common props](../../docs/vue/common-props.md)
|
||||
|
||||
### Card
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| title | Card title | VueNode | - | - | × |
|
||||
| extra | Content to render in the top-right corner of the card | VueNode | - | - | × |
|
||||
| bordered | Toggles rendering of the border around the card, please use `variant` instead | boolean | true | - | × |
|
||||
| headStyle | Deprecated. | CSSProperties | - | - | × |
|
||||
| bodyStyle | Deprecated. | CSSProperties | - | - | × |
|
||||
| loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false | - | × |
|
||||
| hoverable | Lift up when hovering card | boolean | false | - | × |
|
||||
| id | - | string | - | - | × |
|
||||
| size | Size of card | CardSize | `default` | - | × |
|
||||
| type | Card style type, can be set to `inner` or not set | CardType | - | - | × |
|
||||
| cover | Card cover | VueNode | - | - | × |
|
||||
| actions | The action list, shows at the bottom of the Card | VueNode[] | - | - | × |
|
||||
| tabList | List of TabPane's head | CardTabListType[] | - | - | × |
|
||||
| tabBarExtraContent | Extra content in tab bar | VueNode \| { [key: string]: VueNode } | - | - | × |
|
||||
| activeTabKey | Current TabPane's key | string | - | - | × |
|
||||
| defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set | string | `The key of first tab` | - | × |
|
||||
| tabProps | [Tabs](../tabs/docs.md/#tabs) | Record<string, any> | - | - | × |
|
||||
| classes | Customize class for each semantic structure inside the component. Supports object or function. | CardClassNamesType | - | - | ✓ |
|
||||
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | CardStylesType | - | - | ✓ |
|
||||
| variant | Variants of Card | 'borderless' \| 'outlined' | `outlined` | - | ✓ |
|
||||
|
||||
#### Events
|
||||
| Event | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| tabChange | Callback when tab is switched | (key: string) => void | - |
|
||||
| update:activeTabKey | - | (key: string) => void | - |
|
||||
|
||||
#### Slots
|
||||
| Slot | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| title | Card title | () => any | - |
|
||||
| extra | Content to render in the top-right corner of the card | () => any | - |
|
||||
| cover | Card cover | () => any | - |
|
||||
| actions | The action list, shows at the bottom of the Card | () => any | - |
|
||||
| tabContentRender | - | TabsSlots['contentRender'] | - |
|
||||
| tabLabelRender | - | TabsSlots['labelRender'] | - |
|
||||
| tabBarExtraContent | Extra content in tab bar | () => any | - |
|
||||
|
||||
### CardGrid
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| prefixCls | - | string | - | - |
|
||||
| hoverable | Lift up when hovering card | boolean | false | - |
|
||||
|
||||
### CardMeta
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| prefixCls | - | string | - | - | × |
|
||||
| avatar | - | VueNode | - | - | × |
|
||||
| title | Card title | VueNode | - | - | × |
|
||||
| description | - | VueNode | - | - | × |
|
||||
| classes | Customize class for each semantic structure inside the component. Supports object or function. | CardMetaClassNamesType | - | - | ✓ |
|
||||
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | CardMetaStylesType | - | - | ✓ |
|
||||
|
||||
#### Slots
|
||||
| Slot | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| avatar | Avatar | () => any | - |
|
||||
| title | Title | () => any | - |
|
||||
| description | Description | () => any | - |
|
||||
|
||||
## Semantic DOM
|
||||
| _semantic | demo/_semantic.md |
|
||||
@@ -0,0 +1,38 @@
|
||||
# card Token
|
||||
|
||||
Use these variables through `theme.components.Card`. This document lists definitions only and does not include values.
|
||||
|
||||
```vue
|
||||
<a-config-provider
|
||||
:theme="{
|
||||
token: {
|
||||
// Global token configuration
|
||||
},
|
||||
components: {
|
||||
Card: {
|
||||
// Token name: value
|
||||
},
|
||||
},
|
||||
}"
|
||||
>
|
||||
...
|
||||
</a-config-provider>
|
||||
```
|
||||
|
||||
## Token List
|
||||
|
||||
| Token | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `headerBg` | `string` | Background color of card header |
|
||||
| `headerFontSize` | `string \| number` | Font size of card header |
|
||||
| `headerFontSizeSM` | `string \| number` | Font size of small card header |
|
||||
| `headerHeight` | `string \| number` | Height of card header |
|
||||
| `headerHeightSM` | `string \| number` | Height of small card header |
|
||||
| `bodyPaddingSM` | `number` | Padding of small card body |
|
||||
| `headerPaddingSM` | `number` | Padding of small card head |
|
||||
| `bodyPadding` | `number` | Padding of card body |
|
||||
| `headerPadding` | `number` | Padding of card head |
|
||||
| `actionsBg` | `string` | Background color of card actions |
|
||||
| `actionsLiMargin` | `string` | Margin of each item in card actions |
|
||||
| `tabsMarginBottom` | `number` | Margin bottom of tabs component |
|
||||
| `extraColor` | `string` | Text color of extra area |
|
||||
Reference in new issue
Block a user