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

Question

高低搜寻，但是没有任何运气。我要去离子文本输入的概述文本字段材料设计-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;
}

<块引用>

您还可以使用 ionic 内部 CSS 自定义属性，而不是向项目添加新类。 以上代码适用于ionic 4或5。