Ant Design Vue笔记——卡片Card
1. 卡片标题上添加图标给卡片里面元素身上加slot属性,值等于title,需要取消组件a-card的title属性,不然无效。<a-card><div slot="title"><a-icon type="smile" />卡片标题</div><p>卡片内容</p></a-card>2.修改卡片标题样式给<
·
1. 卡片标题上添加图标
给卡片里面元素身上加slot属性,值等于title,需要取消组件a-card的title属性,不然无效。
<a-card>
<div slot="title"><a-icon type="smile" />卡片标题</div>
<p>卡片内容</p>
</a-card>
2.修改卡片标题样式
给<a-card>添加自定义标题区域样式headStyle
<a-card class='middle' :head-style='hstyle'></a-card>
<script>
export default {
data() {
return {
hstyle:{"font-size": "18px","color":"#666"}
}
}
}
</script>
3.去除卡片内容区域默认内边距
去除内容区内边距方法: 添加内容区域自定义样式 bodyStyle,将padding值设为0
<a-card :body-style='{padding:0}'>
</a-card>
更多推荐
已为社区贡献1条内容
所有评论(0)