如何解决如何为一排离子网格定型?
我在离子行中有三列,其中中间列的大小为4,而第一列和第三列的大小为3。问题是中间列的填充和宽度在第一个和最后一个图标之间增加了一个间隙。我希望它们以很小的间隙(大约10-12px)粘在一起。我在检查样式中将中间列的最大宽度更改为适合内容,并且它起作用了。但是我无法在scss中对其进行样式设置。
HTML
<ion-row class="bottom-section ion-align-items-center ion-justify-content-center">
<ion-col size="3" class="col ion-text-end">
<ion-button class="delete-btn" color="light" size="large">
<ion-icon class="delete-icon" slot="icon-only" size="large" name="trash"></ion-icon>
</ion-button>
</ion-col>
<ion-col size="4" class="col col-2 ion-text-center" width-100>
<ion-button class="record-btn" color="danger" size="large">
<ion-icon class="record-icon" slot="icon-only" size="large" name="mic"></ion-icon>
</ion-button>
</ion-col>
<ion-col size="3" class="col ion-text-start">
<ion-button class="add-btn" color="light" size="large">
<ion-icon class="add-icon" slot="icon-only" size="large" name="add"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
SCSS
.col {
border: 1px solid;
}
.col-2 {
--max-width: 100px;
max-width: 100px;
}
默认样式
解决方法
当您需要对少量物品进行更好的微调控制时,我认为ion-grid
不是一个很好的解决方案。尝试这样的事情。
<div class="buttons-wrapper">
<div class="single-button">
<ion-button color="light" class="delete-btn">
<ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-button>
<ion-label>Delete</ion-label>
</div>
<div class="single-button">
<ion-button color="danger" class="record-btn">
<ion-icon slot="icon-only" name="mic"></ion-icon>
</ion-button>
<ion-label>Record</ion-label>
</div>
<div class="single-button">
<ion-button color="light" class="add-btn">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-label>Add</ion-label>
</div>
</div>
.buttons-wrapper {
display: flex;
justify-content: center;
align-items: center;
.single-button {
text-align: center;
.delete-btn,.add-btn {
margin: 0px 5px;
height: 50px;
width: 50px;
--border-radius: 50%;
display: block;
}
.record-btn {
margin: 0px 5px;
height: 70px;
width: 70px;
--border-radius: 50%;
display: block;
ion-icon {
font-size: 32px;
}
}
ion-label {
display: inline-block;
margin-top: 5px;
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。