最近搜索
Card 卡片 页面容器 页面模块
管理员
2024-12-05 09:51
1 2 3 4 5 6 7 8 9 10 11 | <template> <el-card style="max-width: 480px"> <template #header> <div class="card-header"> <span>Card name</span> </div> </template> <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p> <template #footer>Footer content</template> </el-card></template> |
1 2 3 4 5 | <template> <el-card style="max-width: 480px"> <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p> </el-card></template> |
1 2 3 4 5 6 7 8 9 | <template> <el-card style="max-width: 480px"> <template #header>Yummy hamburger</template> <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="width: 100%" /> </el-card></template> |
1 2 3 4 5 6 7 | <template> <div class="flex flex-wrap gap-4"> <el-card style="width: 480px" shadow="always">Always</el-card> <el-card style="width: 480px" shadow="hover">Hover</el-card> <el-card style="width: 480px" shadow="never">Never</el-card> </div></template> |
API
Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| header | 卡片的标题 你既可以通过设置 header 来修改标题，也可以通过 slot#header 传入 DOM 节点 | string | — |
| footer 2.4.3 | 卡片页脚。 你既可以通过设置 footer 来修改卡片底部内容，也可以通过 slot#footer 传入 DOM 节点 | string | — |
| body-style | body 的 CSS 样式 | object | — |
| body-class 2.3.10 | body 的自定义类名 | string | — |
| shadow | 卡片阴影显示时机 | enum | always |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |
| header | 卡片标题内容 |
| footer | 卡片页脚内容 |
联系站长
站长微信:xiaomao0055
站长QQ:14496453
按分类分组
按日期分组