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

【问题标题】：How to add outline border to item for floating ionic labels如何为浮动离子标签的项目添加轮廓边框
【发布时间】：2020-10-11 22:42:31
【问题描述】：

搜索了高低，但没有任何运气。我正在寻找离子输入的概述文本字段材料设计 - 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>

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案2】：

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

您还可以使用 ionic 内部 CSS 自定义属性，而不是向项目中添加新类。上面的代码将在 ionic 4 或 5 中工作。

【讨论】：