test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-05 04:37:47 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs(docs): fix style of demo card header (#1405)

Browse Source 
* docs(docs): fix style of card header

* docs: update
This commit is contained in:
kooriookami 2021-02-01 00:48:26 -06:00 committed by GitHub
parent f7ed9ca68c
commit 09dad70cfb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 160 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
website/demo-styles/card.scss
View File

@ -1,4 +1,10 @@
.demo-block.demo-card {
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.text {
font-size: 14px;
}
@ -11,15 +17,22 @@
.bottom {
margin-top: 13px;
line-height: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
margin-bottom: 18px;
&:last-child {
margin-bottom: 0;
}
}
.button {
padding: 0;
float: right;
min-height: auto;
}
.image {

1
website/demo-styles/index.scss
View File

@ -46,3 +46,4 @@
@import "./avatar.scss";
@import "./drawer.scss";
@import "./skeleton.scss";
@import "./space.scss";

12
website/demo-styles/skeleton.scss vendored
View File

@ -1,9 +1,14 @@
.demo-block.demo-skeleton {
.el-card {
margin-bottom: 16px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.time {
font-size: 13px;
color: #999;
@ -16,14 +21,15 @@
.button {
padding: 0;
float: right;
min-height: auto;
}
.image {
&.multi-content {
width: 400px;
height: 267px;
height: 267px;
}
width: 100%;
display: block;
}

12
website/demo-styles/space.scss Normal file
View File

@ -0,0 +1,12 @@
.demo-block.demo-space {
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.button {
padding: 0;
min-height: auto;
}
}

36
website/docs/en-US/card.md
View File

@ -9,9 +9,9 @@ Card includes title, content and operations.
```html
<el-card class="box-card">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -20,6 +20,12 @@ Card includes title, content and operations.
</el-card>
<style>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.text {
font-size: 14px;
}
@ -28,15 +34,6 @@ Card includes title, content and operations.
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
}
@ -84,7 +81,7 @@ Display richer content by adding some configs.
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
<div style="padding: 14px;">
<span>Yummy hamburger</span>
<div class="bottom clearfix">
<div class="bottom">
<time class="time">{{ currentDate }}</time>
<el-button type="text" class="button">Operating</el-button>
</div>
@ -102,27 +99,20 @@ Display richer content by adding some configs.
.bottom {
margin-top: 13px;
line-height: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.button {
padding: 0;
float: right;
min-height: auto;
}
.image {
width: 100%;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
<script>

8
website/docs/en-US/skeleton.md
View File

@ -104,7 +104,7 @@ When `Loading` ends, we always need to show the real UI with data to our end use
/>
<div style="padding: 14px;">
<span>Delicious hamberger</span>
<div class="bottom clearfix">
<div class="bottom card-header">
<span class="time">{{ currentDate }}</span>
<el-button type="text" class="button">Operation button</el-button>
</div>
@ -173,7 +173,7 @@ We do not recommend rendering lots of fake UI to the browser, it will still caus
<img :src="item.imgUrl" class="image multi-content" />
<div style="padding: 14px;">
<span>{{ item.name }}</span>
<div class="bottom clearfix">
<div class="bottom card-header">
<span class="time">{{ currentDate }}</span>
<el-button type="text" class="button">Operation button</el-button>
</div>
@ -266,7 +266,7 @@ Sometimes API responds very quickly, when that happens, the skeleton just gets r
/>
<div style="padding: 14px;">
<span>Delicious hamberger</span>
<div class="bottom clearfix">
<div class="bottom card-header">
<span class="time">{{ currentDate }}</span>
<el-button type="text" class="button">operation button</el-button>
</div>
@ -316,4 +316,4 @@ export default defineComponent({
| Name | Description |
| ---- | ----------- |
| default | Real rendering DOM |
| template | Custom rendering skeleton template |
| template | Custom rendering skeleton template |

24
website/docs/en-US/space.md
View File

@ -11,11 +11,9 @@ The basic use case is using this component to provide unified space between each
<el-space wrap>
<el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -37,11 +35,9 @@ Using `direction` attribute to control the layout, we use `flex-direction` to im
<el-space direction="vertical">
<el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -75,11 +71,9 @@ You can also using customized size to override it. Refer to the next part.
<el-space wrap :size="size">
<el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -114,11 +108,9 @@ Sometimes built-in sizes could not meet the business needs, we can use custom si
<el-space wrap :size="size">
<el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">

36
website/docs/es/card.md
View File

@ -10,9 +10,9 @@ Muestra información dentro de un contenedor `card`
```html
<el-card class="box-card">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -21,6 +21,12 @@ Muestra información dentro de un contenedor `card`
</el-card>
<style>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.text {
font-size: 14px;
}
@ -29,15 +35,6 @@ Muestra información dentro de un contenedor `card`
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
}
@ -86,7 +83,7 @@ Muestre un contenido más rico añadiendo algunas configuraciones.
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
<div style="padding: 14px;">
<span>Yummy hamburger</span>
<div class="bottom clearfix">
<div class="bottom">
<time class="time">{{ currentDate }}</time>
<el-button type="text" class="button">Operating</el-button>
</div>
@ -104,27 +101,20 @@ Muestre un contenido más rico añadiendo algunas configuraciones.
.bottom {
margin-top: 13px;
line-height: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.button {
padding: 0;
float: right;
min-height: auto;
}
.image {
width: 100%;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
<script>

8
website/docs/es/skeleton.md
View File

@ -104,7 +104,7 @@ When `Loading` ends, we always need to show the real UI with data to our end use
/>
<div style="padding: 14px;">
<span>Delicious hamberger</span>
<div class="bottom clearfix">
<div class="bottom card-header">
<span class="time">{{ currentDate }}</span>
<el-button type="text" class="button">Operation button</el-button>
</div>
@ -173,7 +173,7 @@ We do not recommend rendering lots of fake UI to the browser, it will still caus
<img :src="item.imgUrl" class="image multi-content" />
<div style="padding: 14px;">
<span>{{ item.name }}</span>
<div class="bottom clearfix">
<div class="bottom card-header">
<span class="time">{{ currentDate }}</span>
<el-button type="text" class="button">Operation button</el-button>
</div>
@ -266,7 +266,7 @@ Sometimes API responds very quickly, when that happens, the skeleton just gets r
/>
<div style="padding: 14px;">
<span>Delicious hamberger</span>
<div class="bottom clearfix">
<div class="bottom card-header">
<span class="time">{{ currentDate }}</span>
<el-button type="text" class="button">operation button</el-button>
</div>
@ -316,4 +316,4 @@ export default defineComponent({
| Name | Description |
| ---- | ----------- |
| default | Real rendering DOM |
| template | Custom rendering skeleton template |
| template | Custom rendering skeleton template |

24
website/docs/es/space.md
View File

@ -11,11 +11,9 @@ The basic use case is using this component to provide unified space between each
<el-space wrap>
<el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -37,11 +35,9 @@ Using `direction` attribute to control the layout, we use `flex-direction` to im
<el-space direction="vertical">
<el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -75,11 +71,9 @@ You can also using customized size to override it. Refer to the next part.
<el-space wrap :size="size">
<el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -114,11 +108,9 @@ Sometimes built-in sizes could not meet the business needs, we can use custom si
<el-space wrap :size="size">
<el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">

36
website/docs/fr-FR/card.md
View File

@ -10,9 +10,9 @@ Le composant Card comprend un titre, un contenu et des opérations.
```html
<el-card class="box-card">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text">Bouton</el-button>
<el-button class="button" type="text">Bouton</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -21,6 +21,12 @@ Le composant Card comprend un titre, un contenu et des opérations.
</el-card>
<style>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.text {
font-size: 14px;
}
@ -29,15 +35,6 @@ Le composant Card comprend un titre, un contenu et des opérations.
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
}
@ -85,7 +82,7 @@ Affichez un contenu plus riche grâce à la configuration.
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
<div style="padding: 14px;">
<span>Yummy hamburger</span>
<div class="bottom clearfix">
<div class="bottom">
<time class="time">{{ currentDate }}</time>
<el-button type="text" class="button">Operating</el-button>
</div>
@ -103,27 +100,20 @@ Affichez un contenu plus riche grâce à la configuration.
.bottom {
margin-top: 13px;
line-height: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.button {
padding: 0;
float: right;
min-height: auto;
}
.image {
width: 100%;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
<script>

8
website/docs/fr-FR/skeleton.md
View File

@ -104,7 +104,7 @@ When `Loading` ends, we always need to show the real UI with data to our end use
/>
<div style="padding: 14px;">
<span>Delicious hamberger</span>
<div class="bottom clearfix">
<div class="bottom card-header">
<span class="time">{{ currentDate }}</span>
<el-button type="text" class="button">Operation button</el-button>
</div>
@ -173,7 +173,7 @@ We do not recommend rendering lots of fake UI to the browser, it will still caus
<img :src="item.imgUrl" class="image multi-content" />
<div style="padding: 14px;">
<span>{{ item.name }}</span>
<div class="bottom clearfix">
<div class="bottom card-header">
<span class="time">{{ currentDate }}</span>
<el-button type="text" class="button">Operation button</el-button>
</div>
@ -266,7 +266,7 @@ Sometimes API responds very quickly, when that happens, the skeleton just gets r
/>
<div style="padding: 14px;">
<span>Delicious hamberger</span>
<div class="bottom clearfix">
<div class="bottom card-header">
<span class="time">{{ currentDate }}</span>
<el-button type="text" class="button">operation button</el-button>
</div>
@ -316,4 +316,4 @@ export default defineComponent({
| Name | Description |
| ---- | ----------- |
| default | Real rendering DOM |
| template | Custom rendering skeleton template |
| template | Custom rendering skeleton template |

24
website/docs/fr-FR/space.md
View File

@ -11,11 +11,9 @@ The basic use case is using this component to provide unified space between each
<el-space wrap>
<el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -37,11 +35,9 @@ Using `direction` attribute to control the layout, we use `flex-direction` to im
<el-space direction="vertical">
<el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -75,11 +71,9 @@ You can also using customized size to override it. Refer to the next part.
<el-space wrap :size="size">
<el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -114,11 +108,9 @@ Sometimes built-in sizes could not meet the business needs, we can use custom si
<el-space wrap :size="size">
<el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">

36
website/docs/jp/card.md
View File

@ -9,9 +9,9 @@ cardはタイトル、内容、操作を含む。
```html
<el-card class="box-card">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -20,6 +20,12 @@ cardはタイトル、内容、操作を含む。
</el-card>
<style>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.text {
font-size: 14px;
}
@ -28,15 +34,6 @@ cardはタイトル、内容、操作を含む。
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
}
@ -84,7 +81,7 @@ cardはタイトル、内容、操作を含む。
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
<div style="padding: 14px;">
<span>Yummy hamburger</span>
<div class="bottom clearfix">
<div class="bottom">
<time class="time">{{ currentDate }}</time>
<el-button type="text" class="button">Operating</el-button>
</div>
@ -102,27 +99,20 @@ cardはタイトル、内容、操作を含む。
.bottom {
margin-top: 13px;
line-height: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.button {
padding: 0;
float: right;
min-height: auto;
}
.image {
width: 100%;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
<script>

8
website/docs/jp/skeleton.md
View File

@ -104,7 +104,7 @@ When `Loading` ends, we always need to show the real UI with data to our end use
/>
<div style="padding: 14px;">
<span>Delicious hamberger</span>
<div class="bottom clearfix">
<div class="bottom card-header">
<span class="time">{{ currentDate }}</span>
<el-button type="text" class="button">Operation button</el-button>
</div>
@ -173,7 +173,7 @@ We do not recommend rendering lots of fake UI to the browser, it will still caus
<img :src="item.imgUrl" class="image multi-content" />
<div style="padding: 14px;">
<span>{{ item.name }}</span>
<div class="bottom clearfix">
<div class="bottom card-header">
<span class="time">{{ currentDate }}</span>
<el-button type="text" class="button">Operation button</el-button>
</div>
@ -266,7 +266,7 @@ Sometimes API responds very quickly, when that happens, the skeleton just gets r
/>
<div style="padding: 14px;">
<span>Delicious hamberger</span>
<div class="bottom clearfix">
<div class="bottom card-header">
<span class="time">{{ currentDate }}</span>
<el-button type="text" class="button">operation button</el-button>
</div>
@ -316,4 +316,4 @@ export default defineComponent({
| Name | Description |
| ---- | ----------- |
| default | Real rendering DOM |
| template | Custom rendering skeleton template |
| template | Custom rendering skeleton template |

24
website/docs/jp/space.md
View File

@ -11,11 +11,9 @@ The basic use case is using this component to provide unified space between each
<el-space wrap>
<el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -37,11 +35,9 @@ Using `direction` attribute to control the layout, we use `flex-direction` to im
<el-space direction="vertical">
<el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -75,11 +71,9 @@ You can also using customized size to override it. Refer to the next part.
<el-space wrap :size="size">
<el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -114,11 +108,9 @@ Sometimes built-in sizes could not meet the business needs, we can use custom si
<el-space wrap :size="size">
<el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">

36
website/docs/zh-CN/card.md
View File

@ -10,9 +10,9 @@
```html
<el-card class="box-card">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>卡片名称</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
<el-button class="button" type="text">操作按钮</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -21,6 +21,12 @@
</el-card>
<style>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.text {
font-size: 14px;
}
@ -29,15 +35,6 @@
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
}
@ -85,7 +82,7 @@
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
<div style="padding: 14px;">
<span>好吃的汉堡</span>
<div class="bottom clearfix">
<div class="bottom">
<time class="time">{{ currentDate }}</time>
<el-button type="text" class="button">操作按钮</el-button>
</div>
@ -103,27 +100,20 @@
.bottom {
margin-top: 13px;
line-height: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.button {
padding: 0;
float: right;
min-height: auto;
}
.image {
width: 100%;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
<script>

6
website/docs/zh-CN/skeleton.md
View File

@ -106,7 +106,7 @@ ElementPlus 提供的排版模式有时候并不满足要求, 当您想要用自
/>
<div style="padding: 14px;">
<span>好吃的汉堡</span>
<div class="bottom clearfix">
<div class="bottom card-header">
<span class="time">{{ currentDate }}</span>
<el-button type="text" class="button">操作按钮</el-button>
</div>
@ -174,7 +174,7 @@ ElementPlus 提供的排版模式有时候并不满足要求, 当您想要用自
<img :src="item.imgUrl" class="image multi-content" />
<div style="padding: 14px;">
<span>{{ item.name }}</span>
<div class="bottom clearfix">
<div class="bottom card-header">
<span class="time">{{ currentDate }}</span>
<el-button type="text" class="button">操作按钮</el-button>
</div>
@ -272,7 +272,7 @@ ElementPlus 提供的排版模式有时候并不满足要求, 当您想要用自
/>
<div style="padding: 14px;">
<span>好吃的汉堡</span>
<div class="bottom clearfix">
<div class="bottom card-header">
<span class="time">{{ currentDate }}</span>
<el-button type="text" class="button">操作按钮</el-button>
</div>

24
website/docs/zh-CN/space.md
View File

@ -11,11 +11,9 @@
<el-space wrap>
<el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -37,11 +35,9 @@
<el-space direction="vertical">
<el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -75,11 +71,9 @@
<el-space wrap :size="size">
<el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
@ -114,11 +108,9 @@ export default {
<el-space wrap :size="size">
<el-card class="box-card" style="width: 250px" v-for="i in 2" :key="i">
<template #header>
<div class="clearfix">
<div class="card-header">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text"
>Operation button</el-button
>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">