代码演示

如何引入

import { Card } from '@kousum/semi-ui-vue';

基础卡片

基础卡片包含标题、内容等部分。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

20

 

1

import { Card, Typography } from '@kousum/semi-ui-vue';

2

const { Text } = Typography;

3

​

4

function Demo() {

5

6

    return (

7

        <Card 

8

            title='Semi Design' 

9

            style={{ maxWidth: '360px' }}

10

            headerExtraContent={

11

                <Text link>

12

                    更多

13

                </Text>

14

            }

15

        >

16

            Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。

17

        </Card>

18

    );

19

}

20

export default Demo

Show Error

Auto Save

简洁卡片

卡片可以只设置内容区域。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

46

 

1

import { Card, Popover, Avatar } from '@kousum/semi-ui-vue';

2

import { IconInfoCircle } from '@kousum/semi-icons-vue';

3

const { Meta } = Card;

4

​

5

function Demo() {

6

​

7

    return (

8

        <>

9

            <Card style={{ maxWidth: '360px' }} >

10

                Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。

11

            </Card>

12

            <br />

13

            <Card 

14

                style={{ maxWidth: '360px' }} 

15

                bodyStyle={{ 

16

                    display: 'flex',

17

                    alignItems: 'center',

18

                    justifyContent: 'space-between'

19

                }}

20

            >

21

                <Meta 

22

                    title="Semi Doc" 

23

                    avatar={

24

                        <Avatar 

25

                            alt='Card meta img'

26

                            size="default"

27

                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'

28

                        />

Show Error

Auto Save

封面

可以使用 cover 属性设置封面。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

21

 

1

import { Card } from '@kousum/semi-ui-vue';

2

​

3

function Demo() {

4

    const { Meta } = Card;

5

​

6

    return (

7

        <Card

8

            style={{ maxWidth: '300px' }}

9

            cover={ 

10

                <img 

11

                    alt="example" 

12

                    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo2.jpeg" 

13

                />

14

            }

15

        >

16

            <Meta title="卡片封面" />

17

        </Card>

18

    );

19

}

20

​

21

export default Demo

Show Error

Auto Save

边线和外边框

可以使用 bordered 设置卡片是否有外边框，默认为 true 。同时，也可以使用 headerLine 设置内容区和标题区是否有边线， footerLine 设置内容区和页尾区是否有边线。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

24

 

1

import { Card } from '@kousum/semi-ui-vue';

2

​

3

function Demo() {

4

    return (

5

        <div 

6

            style={{

7

                display: 'inline-block',

8

                padding: 20,

9

                backgroundColor: 'var(--semi-color-fill-0)'

10

            }}

11

        >

12

            <Card 

13

                style={{ maxWidth: '360px' }}

14

                bordered={false}

15

                headerLine={true}

16

                title='Semi Design'

17

            >

18

                Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。

19

            </Card>

20

        </div>

21

    );

22

}

23

​

24

export default Demo

Show Error

Auto Save

阴影

可以使用 shadows 设置显示阴影的时机，可选值为: hover（hover 时显示阴影）、always（始终显示阴影），如果不设置该属性则没有阴影。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

76

 

1

import { Card, Avatar, Popover } from '@kousum/semi-ui-vue';

2

import { IconInfoCircle } from '@kousum/semi-icons-vue';

3

​

4

function Demo() {

5

    const { Meta } = Card;

6

​

7

    return (

8

        <div>

9

            <Card 

10

                shadows='hover'

11

                style={{ maxWidth: '360px' }} 

12

                bodyStyle={{ 

13

                    display: 'flex',

14

                    alignItems: 'center',

15

                    justifyContent: 'space-between'

16

                }}

17

            >

18

                <Meta 

19

                    title="Semi Doc" 

20

                    avatar={

21

                        <Avatar 

22

                            alt='Card meta img'

23

                            size="default"

24

                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'

25

                        />

26

                    }

27

                />

28

                <Popover

Show Error

Auto Save

更灵活的内容展示

可以利用 Card.Meta 支持更灵活的内容，允许设置 title、avatar、description。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

48

 

1

import { Card, Avatar, Space, Button, Typography } from '@kousum/semi-ui-vue';

2

​

3

function Demo() {

4

    const { Meta } = Card;

5

    const { Text } = Typography;

6

​

7

    return (

8

        <Card

9

            style={{ maxWidth: 340 }}

10

            title={

11

                <Meta 

12

                    title="Semi Doc" 

13

                    description="全面、易用、优质" 

14

                    avatar={

15

                        <Avatar 

16

                            alt='Card meta img'

17

                            size="default"

18

                            src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'

19

                        />

20

                    }

21

                />

22

            }

23

            headerExtraContent={

24

                <Text link>

25

                    More

26

                </Text>

27

            }

Show Error

Auto Save

内部卡片

卡片内部可以嵌套其他卡片。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

33

 

1

import { Card, Typography } from '@kousum/semi-ui-vue';

2

​

3

function Demo() {

4

    const { Text } = Typography;

5

6

    return (

7

        <Card title='Card title' >

8

            <Card 

9

                title='Inner Card title'

10

                style={{ marginBottom: 20 }}

11

                headerExtraContent={

12

                    <Text link>

13

                        More

14

                    </Text>

15

                }

16

            >

17

                Inner Card content

18

            </Card>

19

            <Card 

20

                title='Inner Card title'

21

                headerExtraContent={

22

                    <Text link>

23

                        More

24

                    </Text>

25

                }

26

            >

27

                Inner Card content

28

            </Card>

Show Error

Auto Save

栅格卡片

在系统概览页面常常和栅格进行配合。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

44

 

1

import { Card, Row, Col } from '@kousum/semi-ui-vue';

2

​

3

function Demo() {

4

    return (

5

        <div 

6

            style={{

7

                backgroundColor: 'var(--semi-color-fill-0)', 

8

                padding: 20

9

            }}

10

        >

11

            <Row gutter={[16, 16]}>

12

                <Col span={8}>

13

                    <Card title='Card Title' bordered={false} >

14

                        Card Content

15

                    </Card>

16

                </Col>

17

                <Col span={8}>

18

                    <Card title='Card Title' bordered={false} >

19

                        Card Content

20

                    </Card>

21

                </Col>

22

                <Col span={8}>

23

                    <Card title='Card Title' bordered={false} >

24

                        Card Content

25

                    </Card>

26

                </Col>

27

            </Row>

28

            <Row gutter={[16, 16]}>

Show Error

Auto Save

内置预加载

可以使用 Card 的 loading 属性来设置卡片内容区是否显示占位元素，当它为 true 时将显示占位元素，反之则不显示。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

29

 

1

import { Card, Switch } from '@kousum/semi-ui-vue';

2

import { defineComponent, ref } from 'vue';

3

​

4

const { Meta } = Card;

5

​

6

const Demo = defineComponent(() => {

7

​

8

  const loading = ref(true);

9

​

10

  return () => (

11

          <>

12

            <Switch onChange={v => loading.value = (!v)} />

13

            <br />

14

            <br />

15

            <Card

16

                    style={{ maxWidth: '360px' }}

17

                    loading={loading.value}

18

            >

19

              <Meta

20

                      title="Semi Doc"

21

                      description="全面、易用、优质"

22

              />

23

            </Card>

24

          </>

25

  );

26

})

27

​

28

​

Show Error

Auto Save

更丰富的预加载效果

Card 自带的 loading 属性只能设置内容区的预加载效果，如果你想要设置其他部分的预加载，或者自定义更丰富的预加载效果，你可以结合 Skeleton 组件来实现。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

74

 

1

import { defineComponent, ref } from 'vue';

2

import { Card, Switch, Skeleton, Avatar, Typography } from '@kousum/semi-ui-vue';

3

const { Meta } = Card;

4

const { Title, Paragraph, Image } = Skeleton;

5

​

6

const Demo = defineComponent(()=>{

7

​

8

  const loading = ref(true);

9

​

10

  return ()=>(

11

          <>

12

            <Switch onChange={ v => loading.value = (!v) } />

13

            <br />

14

            <br />

15

            <Card

16

                    style={{ maxWidth: '300px' }}

17

                    title={

18

                      <Meta

19

                              title={

20

                                <Skeleton

21

                                        style={{ width: '80px' }}

22

                                        placeholder={<Title />}

23

                                        loading={loading.value}

24

                                >

25

                                  <Typography.Title heading={5}>

26

                                    Semi Doc

27

                                  </Typography.Title>

28

                                </Skeleton>

Show Error

Auto Save

带页签的卡片

可以结合 Tabs 组件，实现带页签的卡片。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

28

 

1

import { Card, Tabs, TabPane } from '@kousum/semi-ui-vue';

2

​

3

function demo() {

4

    return (

5

        <Card title='Card title'>

6

            <Tabs 

7

                type="line" 

8

                style={{

9

                    marginTop: -20,

10

                    marginBottom: -20

11

                }}

12

            >

13

                <TabPane tab="Tab 1" itemKey="1">

14

                    <p>content1</p>

15

                    <p>content1</p>

16

                    <p>content1</p>

17

                </TabPane>

18

                <TabPane tab="Tab 2" itemKey="2">

19

                    <p>content2</p>

20

                    <p>content2</p>

21

                    <p>content2</p>

22

                </TabPane>

23

            </Tabs>

24

        </Card>

25

    );

26

}

27

​

28

export default demo

Show Error

Auto Save

卡片操作区

actions 接收 ReactNode 数组，元素间将以 12px 的水平间距展示于内容区底部。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

29

 

1

import { Card, Rating } from '@kousum/semi-ui-vue';

2

​

3

function Demo() {

4

    const { Meta } = Card;

5

​

6

    return (

7

        <Card

8

            style={{ maxWidth: '300px' }}

9

            actions={[    

10

                // eslint-disable-next-line react/jsx-key

11

                <Rating size='small' defaultValue={4}/>

12

            ]}

13

            headerLine={ false }

14

            cover={ 

15

                <img 

16

                    alt="example" 

17

                    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 

18

                />

19

            }

20

        >

21

            <Meta 

22

                title="Semi Doc" 

23

                description="全面、易用、优质" 

24

            />

25

        </Card>

26

    );

27

}

Show Error

Auto Save

卡片组

CardGroup 中的卡片将呈现为等间距排列，利用 spacing 属性可以设置卡片间距大小。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

45

 

1

import { Card, CardGroup, Typography, Slider } from '@kousum/semi-ui-vue';

2

import { defineComponent, ref } from 'vue';

3

​

4

const { Text } = Typography;

5

​

6

const Demo = defineComponent(() => {

7

  const spacing = ref(12);

8

​

9

  return () => (

10

          <>

11

            <Text>滑动调节 Card 间距</Text>

12

            <Slider

13

                    defaultValue={12}

14

                    max={40}

15

                    min={10}

16

                    style={{ width: '360px' }}

17

                    onChange={v => spacing.value = (v)}

18

            />

19

            <br />

20

            <CardGroup spacing={spacing.value}>

21

              {

22

                new Array(8).fill(null).map((v, idx) => (

23

                        <Card

24

                                key={idx}

25

                                shadows='hover'

26

                                title='Card title'

27

                                headerLine={false}

28

                                style={{ width: '260px' }}

Show Error

Auto Save

网格型卡片组

使用 CardGroup 的 type 属性，可以将卡片组设置为网格型。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

30

 

1

import { Card, CardGroup, Typography } from '@kousum/semi-ui-vue';

2

​

3

function Demo() {

4

    const { Text } = Typography;

5

​

6

    return (

7

        <CardGroup type='grid'>

8

            {

9

                new Array(7).fill(null).map((v, idx)=>(

10

                    <Card 

11

                        key={idx}

12

                        shadows='hover'

13

                        title='Card title'

14

                        headerLine={false}

15

                        style={{ width: 260 }}

16

                        headerExtraContent={

17

                            <Text link>

18

                                More

19

                            </Text>

20

                        }

21

                    >

22

                        <Text>Card content</Text>

23

                    </Card>

24

                ))

25

            }     

26

        </CardGroup>

27

    );

28

}

Show Error

Auto Save

API 参考

Card

属性	说明	类型	默认值	版本
actions	卡片操作组，位于卡片内容区的底部	Array<ReactNode>	-	1.21.0
bodyStyle	卡片内容区内联样式	CSSProperties	-	1.21.0
bordered	是否设置卡片的外边框	boolean	true	1.21.0
className	卡片的样式类名	string	-	1.21.0
cover	卡片封面	ReactNode	-	1.21.0
headerExtraContent	卡片标题右侧的额外内容	ReactNode	-	1.21.0
footer	自定义卡片页脚	ReactNode	-	1.21.0
footerLine	卡片页脚区与内容区是否有边线	boolean	false	1.21.0
footerStyle	卡片页脚区内联样式	CSSProperties	-	1.21.0
header	自定义卡片头部，若传入将覆盖 title 和 headerExtraContent	ReactNode	-	1.21.0
headerLine	卡片标题区与内容区是否有边线	boolean	true	1.21.0
headerStyle	卡片标题区内联样式	CSSProperties	-	1.21.0
loading	是否设置加载时的占位	boolean	false	1.21.0
shadows	设置显示阴影的时机，如果不设置该属性则没有阴影，可选值：hover、always	string	-	1.21.0
style	卡片内联样式	CSSProperties	-	1.21.0
title	卡片标题	ReactNode	-	1.21.0

CardGroup

属性	说明	类型	默认值	版本
className	卡片组的样式类名	string	-	1.21.0
spacing	间距尺寸，支持数值或数组，数组形如: [水平间距,垂直间距]	number | number[]	12px	1.21.0
style	卡片组的内联样式	CSSProperties	-	1.21.0
type	可以把卡片组设置为网格型，设置完该属性后将覆盖 spacing 属性，可选值：grid	string	-	1.21.0

Card.Meta

属性	说明	类型	默认值	版本
avatar	头像	ReactNode	-	1.21.0
className	类名	string	-	1.21.0
description	描述	ReactNode	-	1.21.0
style	内联样式	CSSProperties	-	1.21.0
title	标题	ReactNode	-	1.21.0

Accessibility

• Card 支持传入 aria-label 来表示该 Card 作用
• Card loading 时，将开启 aria-busy
• Card 为容器型组件，卡片内部的任何元素需要遵循各自的可访问性指南

文案规范

• 卡片标题
  • 卡片标题应具有信息描述性，聚焦最重要的信息
  • 尽量将标题限制在 1 个短语或句段中
  • 卡片标题应句子大小写书写
  • 不要以标点符号结尾（除了问号）
• 正文
  • 可操作的：使用祈使句而不是“你可以”来描述正文，可以更好的告诉用户可以做什么

✅ 推荐用法	❌ 不推荐用法
Get order progress for details	You can get order progress for details

• 总是优先说最重要的信息
• 使用 “Need to”而不是”must“

设计变量

color

font

radius

motion

width

other

spacing

变量	默认值	用法
$color-card-bg-default	var(--semi-color-bg-0)	卡片背景颜色
$color-card-border	var(--semi-color-border)	卡片描边颜色
$color-card_title-text	var(--semi-color-text-0)	卡片标题文字颜色
$color-card_description-text	var(--semi-color-text-2)	卡片描述文字颜色
$color-card_extra-text	var(--semi-color-text-0)	卡片附加文字颜色
$color-card_body-text	var(--semi-color-text-1)	卡片正文文字颜色

显示第 1 条-第 6 条，共 6 条

• 1

变量	默认值	用法
$font-card_default-fontWeight	$font-weight-regular	卡片文字字重 - 默认
$font-card_extra-fontWeight	700	卡片文字字重 - 附加文字
$font-card_title-fontWeight	700	卡片文字字重 - 标题
$font-card_default-lineHeight	20px	卡片文字行高 - 默认
$font-card_title-lineHeight	22px	卡片文字行高 - 标题
$font-card_default-fontSize	$font-size-regular	卡片文字大小 - 默认
$font-card_extra-fontSize	$font-size-header-6	卡片文字大小 - 附加文字
$font-card_title-fontSize	$font-size-header-6	卡片文字大小 - 标题

显示第 1 条-第 8 条，共 8 条

• 1

变量	默认值	用法
$radius-card	var(--semi-border-radius-medium)	卡片圆角

显示第 1 条-第 1 条，共 1 条

• 1

变量	默认值	用法
$motion-card-transition_duration	300ms	卡片悬浮动画时长

显示第 1 条-第 1 条，共 1 条

• 1

变量	默认值	用法
$width-card-border	$border-thickness-control	卡片描边宽度

显示第 1 条-第 1 条，共 1 条

• 1

变量	默认值	用法
$shadow-card	var(--semi-shadow-elevated)	卡片阴影
$z-card_hover	1	悬浮后卡片 zindex

显示第 1 条-第 2 条，共 2 条

• 1

变量	默认值	用法
$spacing-card-padding	$spacing-base-loose	卡片内边距
$spacing-card-margin	$spacing-base-loose	卡片外边距
$spacing-card_avatar-marginRight	$spacing-base-tight	卡片头像右侧外边距
$spacing-cardGroup_card-margin	-1px	卡片组外边距

显示第 1 条-第 4 条，共 4 条

• 1

相关物料