Skip to content

Commit d85aa19

Browse files
XutaotaotaoXutaotaotao
committed
feat: basic card
1 parent 79788cb commit d85aa19

File tree

6 files changed

+160
-57
lines changed

6 files changed

+160
-57
lines changed

‎docs/.vitepress/config/sidebars.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export const sidebar = {
3232
children:[
3333
{ text: 'Avatar', link: '/en-US/Avatar/' },
3434
{ text: 'Badge', link: '/en-US/Badge/' },
35+
{ text: 'Card', link: '/en-US/Card/' },
3536
{ text: 'Tag', link: '/en-US/Tag/' },
3637
]
3738
},

‎docs/en-US/Card/index.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Card
2+
3+
Integrate information in a card container.
4+
5+
## When To Use
6+
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.
7+
8+
## Basic use
9+
10+
A basic card containing a title, content and an extra corner content.
11+
Also header is optional, and its content distribution depends on a named slot.
12+
Supports two sizes: default and small.
13+
14+
:::demo
15+
card/basic
16+
:::

‎docs/examples/card/basic.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div>
3+
<n-card title="Default size card" >
4+
<template #extra><n-button type="link">more</n-button></template>
5+
<p>Card content</p>
6+
<p>Card content</p>
7+
<p>Card content</p>
8+
</n-card>
9+
<n-card style="margin-top: 20px;">
10+
<template #header>
11+
<div class="card-header">
12+
<span>Card name</span>
13+
<n-button>Operation button</n-button>
14+
</div>
15+
</template>
16+
<p>Card content</p>
17+
<p>Card content</p>
18+
<p>Card content</p>
19+
</n-card>
20+
<n-card style="margin-top: 20px;" size="small" title="Small size card">
21+
<p>Card content</p>
22+
<p>Card content</p>
23+
<p>Card content</p>
24+
</n-card >
25+
</div>
26+
</template>
27+
<style>
28+
.card-header {
29+
display: flex;
30+
justify-content: space-between;
31+
align-items: center;
32+
padding: 16px 0;
33+
}
34+
</style>

‎packages/n-card/index.scss

Lines changed: 60 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,62 @@
1-
.card {
2-
margin: 0.4rem;
3-
background: #fff;
4-
overflow: hidden;
5-
border-radius: 0.3rem;
6-
padding: 0.4rem;
7-
box-shadow: 0 0 0.2rem #ccc;
8-
border-bottom: 0.1rem solid #ccc;
9-
height: 300px;
10-
width: 260px;
11-
display: inline-block;
12-
.cardmesage {
13-
font-weight: bolder;
14-
font-size: 20px;
15-
}
16-
.card-img{
17-
position: relative;
18-
width: 260px;
19-
height: 170px;
20-
}
21-
.card-title{
22-
margin: 5px;
23-
padding: 5px;
24-
font-size: 25px;
25-
}
26-
p{
27-
font-size: 12px !important;
28-
margin:0 !important;
1+
.n-card {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
color: #000000d9;
6+
font-size: 14px;
7+
font-variant: tabular-nums;
8+
list-style: none;
9+
font-feature-settings: "tnum";
10+
position: relative;
11+
background: #fff;
12+
border-radius: 2px;
13+
.n-card-head {
14+
min-height: 48px;
15+
margin-bottom: -1px;
16+
padding: 0 24px;
17+
color: #000000d9;
18+
font-weight: 500;
19+
font-size: 16px;
20+
background: transparent;
21+
border-bottom: 1px solid #f0f0f0;
22+
border-radius: 2px 2px 0 0;
23+
.n-card-head-title {
24+
display: inline-block;
25+
flex: 1;
26+
padding: 16px 0;
2927
overflow: hidden;
30-
display: block;
31-
width: 100%;
32-
overflow: hidden;
33-
padding: 10px;
28+
white-space: nowrap;
29+
text-overflow: ellipsis;
30+
}
31+
.n-card-extra{
32+
float: right;
33+
margin-left: auto;
34+
padding: 16px 0;
35+
color: #000000d9;
36+
font-weight: 400;
37+
font-size: 14px;
3438
}
35-
}
39+
}
40+
.n-card-body {
41+
padding: 24px;
42+
}
43+
}
44+
.n-card-bordered {
45+
border: 1px solid #f0f0f0;
46+
}
47+
.n-card-size-small > .n-card-head {
48+
min-height: 36px;
49+
padding: 0 12px;
50+
font-size: 14px;
51+
.n-card-head-title {
52+
display: inline-block;
53+
flex: 1;
54+
padding: 8px 0;
55+
overflow: hidden;
56+
white-space: nowrap;
57+
text-overflow: ellipsis;
58+
}
59+
}
60+
.n-card-size-small > .n-card-body {
61+
padding: 12px;
62+
}

‎packages/n-card/index.tsx

Lines changed: 44 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,52 @@
1-
import { defineComponent, App, HTMLAttributes, SetupContext } from 'vue';
2-
import './index.scss';
1+
import { defineComponent, App, PropType, SetupContext } from "vue";
2+
import classNames from "../../src/utils/className";
3+
import "./index.scss";
34

4-
export interface CardProps extends HTMLAttributes {
5-
title?: string;
6-
src?: string;
7-
description?: string;
8-
}
5+
const CardProps = {
6+
title: {
7+
type: String as PropType<string>,
8+
},
9+
size: {
10+
type: String as PropType<string>,
11+
default: "default",
12+
},
13+
bordered: {
14+
type: Boolean,
15+
default: true,
16+
},
17+
shadow: {
18+
type: String as PropType<string>,
19+
default: "never",
20+
},
21+
};
922

1023
const NCard = defineComponent({
11-
name: 'NCard',
12-
setup (_:CardProps, { attrs }:SetupContext) {
13-
const { title, src, description } = attrs as CardProps;
14-
24+
name: "NCard",
25+
props: CardProps,
26+
setup(props, { attrs, slots }: SetupContext) {
27+
console.log(slots);
28+
const classString = classNames([
29+
"n-card",
30+
props.bordered ? "n-card-bordered" : "",
31+
`n-card-size-${props.size}`,
32+
`n-card-shadow-${props.shadow}`,
33+
]);
1534
return () => (
16-
<div class="card">
17-
<img
18-
class="card-img"
19-
src={src}
20-
/>
21-
<span class="card-title">{ title }</span>
22-
<p class="card-message">
23-
{ description }
24-
</p>
25-
</div>
35+
<div class={classString}>
36+
{slots.header ? (
37+
<div class="n-card-head">
38+
{slots.header()}
39+
</div>
40+
) : (
41+
<div class="n-card-head">
42+
<div class="n-card-head-title">{props.title}</div>
43+
<div class="n-card-extra">{slots.extra && slots.extra()}</div>
44+
</div>
45+
)}
46+
<div class="n-card-body">{slots.default && slots.default()}</div>
47+
</div>
2648
);
27-
}
49+
},
2850
});
2951

3052
NCard.install = function (app: App) {

‎src/index.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import NTooltip from '../packages/n-tooltip'
1212
import NIcon from '../packages/n-icon'
1313
import NAvatar from '../packages/n-avatar'
1414
import NBadge from '../packages/n-badge'
15+
import NCard from '../packages/n-card'
1516

1617
const components = [
1718
NTag,
@@ -24,7 +25,8 @@ const components = [
2425
NTooltip,
2526
NIcon,
2627
NAvatar,
27-
NBadge
28+
NBadge,
29+
NCard
2830
]
2931

3032
const install = function (app: App) {
@@ -44,7 +46,8 @@ export {
4446
NButtonGroup,
4547
NIcon,
4648
NAvatar,
47-
NBadge
49+
NBadge,
50+
NCard
4851
}
4952

5053
export default {

0 commit comments

Comments
 (0)