如何为浮动离子标签的项目添加轮廓边框

Question

搜索了高低但没有任何运气。我要去轮廓文本字段 material 设计寻找离子输入 - https://material.io/components/text-fields#outlined-text-field

<ion-item>
  <ion-label position="floating" color="primary">Text 1</ion-label>
  <ion-input></ion-input>
</ion-item>

Answer 1

将此 css 添加到您的 variable.css 或 global.css :

.box {
        border-color: #403E39;
        border-width: thin;
        border-style: solid;
        border-radius: 3px;
    }

并在 html 中调用 css :

<ion-item class="box">
  <ion-label position="floating" color="primary">Text 1</ion-label>
  <ion-input></ion-input>
</ion-item>

Answer 2

ion-item {
    --border-width: 2px;
    --border-color: #403E39;
    --border-radius: 8px;
}

You can also use ionic internal CSS custom properties instead of adding a new class to the project. The above code will work in ionic 4 or 5.

How to add outline border to item for floating ionic labels