Element Card 카드 의 구체 적 인 사용
기초 용법
<el-card class="box-card">
<div slot="header" class="clearfix">
<span> </span>
<el-button style="float: right; padding: 3px 0" type="text"> </el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{' ' + o }}
</div>
</el-card>
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
}
</style>
단순 카드
<el-card class="box-card">
<div v-for="o in 4" :key="o" class="text item">
{{' ' + o }}
</div>
</el-card>
<style>
.text {
font-size: 14px;
}
.item {
padding: 18px 0;
}
.box-card {
width: 480px;
}
</style>
사진
<el-row>
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
<el-card :body-style="{ padding: '0px' }">
![ ](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zaGFkb3cuZWxlbWVjZG4uY29tL2FwcC9lbGVtZW50L2hhbWJ1cmdlci45Y2Y3YjA5MS01NWU5LTExZTktYTk3Ni03ZjRkMGIwN2VlZjYucG5n)
<div style="padding: 14px;">
<span> </span>
<div class="bottom clearfix">
<time class="time">{{ currentDate }}</time>
<el-button type="text" class="button"> </el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<style>
.time {
font-size: 13px;
color: #999;
}
.bottom {
margin-top: 13px;
line-height: 12px;
}
.button {
padding: 0;
float: right;
}
.image {
width: 100%;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
<script>
export default {
data() {
return {
currentDate: new Date()
};
}
}
</script>
카드 그림자
<el-row :gutter="12">
<el-col :span="8">
<el-card shadow="always">
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover">
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="never">
</el-card>
</el-col>
</el-row>
Attributes:매개 변수
유형
설명 하 다.
선택 값
기본 값
header
header 를 설정 하면 slot\#header 를 통 해 DOM 에 들 어 갈 수도 있 습 니 다.
string
―
―
body-style
바디 스타일 설정
object
―
{ padding: ‘20px' }
Element Card 카드 의 구체 적 인 사용 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Element Card 카드 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue 프로젝트에서 Element ui 주마등을 사용하여 수행할 수 없는 문제 해결1. vue 프로젝트에 elementui 도입 http://element.eleme.io/#/zh-CN/component/carousel 도입 후 HTML 섹션 JS 섹션 웹팩으로 구축된 프로젝트는 절대 경로를 직접...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.