Skip to content

Commit

Permalink
feat(Card): 增加 footer (#834)
Browse files Browse the repository at this point in the history
  • Loading branch information
1zumii committed Jun 11, 2024
1 parent ba888dd commit febfa0d
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 17 deletions.
9 changes: 9 additions & 0 deletions components/card/card.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
<div :class="`${prefixCls}__body`" :style="bodyStyle">
<slot />
</div>
<div v-if="$slots.footer" :class="footerClasses">
<slot name="footer" />
</div>
</div>
</template>

Expand Down Expand Up @@ -35,10 +38,16 @@ export default defineComponent({
'no-divider': !props.divider,
}));
const footerClasses = computed(() => ({
[`${prefixCls}__footer`]: true,
'no-divider': !props.divider,
}));
return {
prefixCls,
classes,
headerClasses,
footerClasses,
};
},
});
Expand Down
18 changes: 15 additions & 3 deletions components/card/style/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,16 @@
border-color: var(--f-border-color-split);
}

&__header {
&__header, &__footer {
box-sizing: border-box;
padding: var(--f-card-padding);
color: var(--f-font-color-base);
font-weight: @font-weight-medium;
font-size: @font-size-head;
border-bottom: var(--f-border-width-base) var(--f-border-style-base)
transparent;
}

&__header {
border-bottom: var(--f-border-width-base) var(--f-border-style-base) transparent;
border-bottom-color: var(--f-border-color-split);

&.no-divider {
Expand All @@ -38,6 +40,16 @@
}
}

&__footer {
border-top: var(--f-border-width-base) var(--f-border-style-base) transparent;
border-top-color: var(--f-border-color-split);

&.no-divider {
padding-top: 0;
border-top-color: transparent;
}
}

&__body {
padding: var(--f-card-padding);
color: var(--f-font-color-base);
Expand Down
17 changes: 17 additions & 0 deletions docs/.vitepress/components/card/customFooter.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<template>
<div class="card-wrapper">
<FCard header="这里是标题">
卡片内容,以描述性为主,可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
<template #footer>
<FButton size="small">操作</FButton>
<FButton size="small" style="margin-left: 8px;">按钮</FButton>
</template>
</FCard>
</div>
</template>

<style scoped>
.card-wrapper {
width: 350px;
}
</style>
49 changes: 35 additions & 14 deletions docs/.vitepress/components/card/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,47 +14,67 @@ app.use(FCard);

### 基础用法

--BASIC
:::demo
basic.vue
:::

### 投影效果

--SHADOW
:::demo
shadow.vue
:::

### 设置大小

--SIZE
:::demo
size.vue
:::

### 是否显示边框

--BORDERED
:::demo
bordered.vue
:::

### 是否有标题

--HASHEADER
:::demo
hasHeader.vue
:::

### 是否有分割线

--DIVIDER
:::demo
divider.vue
:::

### 自定义标题

--CUSTOMHEADER
:::demo
customHeader.vue
:::

### 自定义内容
### 自定义底栏

:::demo
customFooter.vue
:::

--CUSTOMCONTENT
### 自定义内容

--CODE
:::demo
customContent.vue
:::

## Card Props

| 属性 | 说明 | 类型 | 默认值 |
| --------- | ----------------------------------------------------------------------------------- | ----------------------- | -------- |
| 属性 | 说明 | 类型 | 默认值 |
|-----------|----------------------------------------------------------------------------------|-------------------------|----------|
| header | 卡片的标题 你既可以通过设置 header 来修改标题,也可以通过 slot#header 传入 DOM 节点 | string | - |
| divider | 若有 header,则是否显示分割线 | boolean | `true` |
| bodyStyle | body 的 CSS 样式 | object\<CSSProperties\> | - |
| bodyStyle | body 的 CSS 样式 | object\<CSSProperties\> | - |
| shadow | 设置阴影显示时机,可选值为 `always` `never` `hover` | string | `always` |
| bordered | 是否有边框 | boolean | `true` |
| bordered | 是否有边框 | boolean | `true` |
| size | 设置卡片大小,可选值为 `small` `middle` `large` | string | `middle` |

## Card Slots
Expand All @@ -63,3 +83,4 @@ app.use(FCard);
| ------- | -------------- |
| default | 自定义默认内容 |
| header | 卡片标题内容 |
| footer | 卡片底栏内容 |

0 comments on commit febfa0d

Please sign in to comment.