Skip to content

优化 card 组件文档 ，props.shadow 类型 alway 修正为 always #1342

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 16, 2022
Merged

优化 card 组件文档 ，props.shadow 类型 alway 修正为 always #1342

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
71c5c0e
docs(card): 文档优化去除 icon css的引入，去除未使用的css样式代码。 (close #1231)
vaebe Sep 13, 2022
2e8c22c
docs(card): 文档 props：align、shadow 类型展示优化
vaebe Sep 13, 2022
f561ceb
fix(card): props.shadow 类型 alway 修正为 always
vaebe Sep 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/devui-vue/devui/card/src/card-types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const cardProps = {
default: '',
},
shadow: {
type: String as PropType<'alway' | 'hover' | 'never'>,
type: String as PropType<'always' | 'hover' | 'never'>,
default: 'hover',
},
} as const;
Expand Down
80 changes: 19 additions & 61 deletions packages/devui-vue/docs/components/card/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
</d-card>
</template>
<style lang="scss">
@import '@devui-design/icons/icomoon/devui-icon.css';

.card-demo-basic {
cursor: pointer;
Expand Down Expand Up @@ -124,7 +123,6 @@
</d-card>
</template>
<style lang="scss">
@import '@devui-design/icons/icomoon/devui-icon.css';

.card-demo-use-img {
cursor: pointer;
Expand Down Expand Up @@ -189,7 +187,6 @@
</d-card>
</template>
<style lang="scss">
@import '@devui-design/icons/icomoon/devui-icon.css';

.card-demo-custom-area {
cursor: pointer;
Expand Down Expand Up @@ -239,66 +236,13 @@

:::

<style lang="scss">
@import '@devui-design/icons/icomoon/devui-icon.css';
.card-demo-icon {
cursor: pointer;
font-size: 16px;
margin-right: 8px;
vertical-align: middle;
}
.card-demo-icon + span {
vertical-align: middle;
}
.card-block {
margin-right: 16px;
i{
cursor: pointer;
font-size: 16px;
margin-right: 8px;
vertical-align: middle;
}
i + span {
vertical-align: middle;
}
}
.d-card {
cursor: pointer;
transition:
box-shadow .3s cubic-bezier(.645,.045,.355,1),
transform .3s cubic-bezier(.645,.045,.355,1);
&:hover {
box-shadow: 0 4px 16px 0 rgba(0,0,0,.1);
transform: translateY(-5px);
}
}
.card-container {
width: 350px;
}
img {
max-width: none;
}
.action-text {
color: #8a8e99;
}
.custom-avatar {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
.custom-star-action {
font-size: 20px;
cursor: pointer;
}
}
</style>

### Card 参数

| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
| :----- | :------------------------------- | :-------- | :----------------------------------------------------------- | :------------------------ |
| src | `string` | '' | 可选，图片路径 | [使用图片](#使用图片) |
| align | `'start'\|'end'\|'spaceBetween'` | `'start'` | 可选，操作区域对齐方式，分别对应起始对齐，尾部对齐，拉伸对齐 | [自定义区域](#自定义区域) |
| shadow | `'always'\|'hover'\|'never'` | `'hover'` | 可选，设置增强阴影显示时机 | [阴影效果](#阴影效果) |
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
| :----- |:----------------------------| :-------- | :----------------------------------------------------------- | :------------------------ |
| src | `string` | '' | 可选，图片路径 | [使用图片](#使用图片) |
| align | [IAlignType](#ialigntype) | `'start'` | 可选，操作区域对齐方式，分别对应起始对齐，尾部对齐，拉伸对齐 | [自定义区域](#自定义区域) |
| shadow | [IShadowType](#ishadowtype) | `'hover'` | 可选，设置增强阴影显示时机 | [阴影效果](#阴影效果) |

### Card 插槽

Expand All @@ -310,3 +254,17 @@ img {
| title | 卡片的主要内容描述，一般定义为卡片名称 |
| subtitle | 对标题的补充，可包含标签等信息 |
| actions | 决策作用，可以包含操作文本或者操作图标 |

### Card 类型定义

#### IAlignType

```ts
type IAlignType = 'start' | 'end' | 'spaceBetween';
```

#### IShadowType

```ts
type IShadowType = 'always' | 'hover' | 'never';
```