如何解决如何在自定义组件中为 mat 卡创建边框,例如 mat 表单字段的轮廓
我有这个特定的设计要求,我使用 MatCardComponent 并且每张卡片内部都有表格。现在我想添加浮动在边框间隙中的标签,就像我们在 MatFormField 中一样。
像上面的图片,但不是输入,而是 MatCard 和表格。
有什么办法可以达到这个结果吗?请帮我。谢谢
解决方法
我找到了解决方法及其工作原理:
<div class="outline">
<mat-card>
<mat-card-header>
<mat-card-title class="title-overlap">test</mat-card-title>
</mat-card-header>
</mat-card>
</div>
.outline{
border-radius: 6px;
border-style: solid;
border-width: 1px;
}
.title-overlap{
position: absolute;
top: -17px;
left: 20px;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。