材质轮廓输入 - 在 Angular 中创建凹口

Question

您好，我正在尝试实现自定义材料轮廓输入，其中包括标签浮动的凹口。

我知道 Angular Material 有一个现有组件，但我需要有自己的特殊定制，因此需要构建自己的组件。

我已经在创建浮动方面取得了如此大的进展，但在创建实际的凹口时遇到了困难。我见过的解决方案只是标签后面的白色背景，但这在我的解决方案中不起作用，因为输入背景是不同的颜色。

任何最好的帮助/策略都会很棒。我同意使用 JS，只要它在多个浏览器之间保持一致，就可以工作，这才是最重要的。非常感谢。

这是我的堆栈闪电战 https://stackblitz.com/edit/angular-u5nxde-xdq3qy?file=src%2Fapp%2Fexample.component.html,src%2Fapp%2Fexample.component.ts,src%2Fapp%2Fexample.component.css,src %2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.css

预计：

代码：

     HTML 
<div class="material-textfield">
      <input placeholder=" " type="text" value="test" />
      <label class="label-container">Label</label>
    </div>

CSS
    .material-textfield {
  position: relative;
}

.label-container {
  position: absolute;
  font-size: 1rem;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  color: gray;
  padding: 0 0.3rem;
  margin: 0 0.5rem;
  transition: 0.1s ease-out;
  transform-origin: left top;
  pointer-events: none;
}
input {
  font-size: 1rem;
  outline: none;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 1rem 0.7rem;
  color: gray;
  transition: 0.1s ease-out;

  background-color: beige;
}
input:focus {
  border-color: #6200ee;
}
input:focus + .label-container {
  color: #6200ee;
  top: 0;
  transform: translateY(-50%) scale(0.9);
  border-color: #6200ee; /* Color on focus */
}

input:not(:placeholder-shown) + .label-container {
  top: 0;
  transform: translateY(-50%) scale(0.9);
  border-color: #6200ee; /* Color when input is not empty */
}

Answer 1

我尝试用最少量的代码重现凹口轮廓行为，我使用了我在之前的评论中描述的技术：三个 html 元素来构造边框。

这是我想到的：

.form-field {
  --input-pading: 16px;
  --border: solid 1px black;
  --border-radius: 4px;

  padding-left: var(--input-pading);

  min-width: 0;
  max-height: 56px;
  max-width: 248px;

  position: relative;
  box-sizing: border-box;
}

.form-field:focus-within {
  --border: solid 2px black;
}

.notched-outline {
  display: flex;
  position: absolute;

  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;

  box-sizing: border-box;
  pointer-events: none;
}

.notched-outline .leading {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  border-left: var(--border);
  border-top: var(--border);
  border-bottom: var(--border);
  width: var(--input-pading);
}

.notched-outline .notch {
  border-bottom: var(--border);
}
.notched-outline .notch .label {
  position: relative;
  transform: translateY(-50%);
  padding-left: 4px;
  padding-right: 4px;
}

.notched-outline .trailing {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  border-right: var(--border);
  border-top: var(--border);
  border-bottom: var(--border);
  width: 100%;
}

.form-field-infix {
  width: 100%;
  padding-bottom: var(--input-pading);
  padding-top: var(--input-pading);
}

.form-field-infix input {
  width: 100%;
  outline: none;
  border: none;
  background-color: transparent;
}

<div class="form-field">
  <div class="notched-outline">
    <div class="leading"></div>
    <div class="notch">
      <div class="label">Label</div>
    </div>
    <div class="trailing"></div>
  </div>
  <div class="form-field-infix">
    <input placeholder="test" type="text"/>
  </div>
</div>