角度材料:自定义形式场控制-移动浮动标签(向下)

Question

我已经为角8创建了一个自定义表单字段控件，它与反应表单、和角材料兼容。但是，它是一个简化的富文本编辑器，它有一个带有各种按钮的标题，该按钮为用户提供操作。

如何将占位符标签移至输入控件的标题下方的实际文本区域？

当前占位符标签放置

Answer 1

既然没有人真正回答我的问题，我会发布我自己的解决方案，一个更简单的(解决方案2)和一个我认为正确的(解决方案2，虽然在我看来不是这样)。

编辑:解决方案2:正确的方法

嗯，我试图使我的代码稍微更容易配置，因此我在更改代码时犯了一个小错误--我将一个变量更改为静态变量，这个变量用于声明MatFormField在其内部的类定义中使用的ID，我们可以使用它来自定义组件的外观。

即controlType.使用这个变量，我们可以按照命名约定mat-form-field-type-<controlType>，通过直接类名来识别我们的组件何时在使用。因此，由于我的controlType = "app-text-editor"，我可以这样使用它：

.mat-form-field-type-app-text-editor:not(.mat-form-field-should-float) .mat-form-field-label-wrapper > .mat-form-field-label {
    margin-top: 2.5rem;
    padding: .5em;
}

原文:解决方案1: Hacky-方法

我所做的是将组件更改为encapsulation: ViewEncapsulation.None，使用css中组件的选择器作为我的主要标识符(在我的示例中为app-text-editor)，然后使用CSS兄弟级选择器来选择浮动标签和占位符，为my TextEditor标头设置偏移量，并在标签浮动后将其重置为默认值。生成的CSS如下所示：

app-text-editor {
  // Styling for actual TextEditor

  &.floating ~ .mat-form-field-label-wrapper > .mat-form-field-label {
    margin-top: initial;
    padding: initial;
  }
  & ~ .mat-form-field-label-wrapper > .mat-form-field-label {
    margin-top: 2.5rem;
    padding: .5em; // Used to properly align the content inside my contenteditable
}

或者就像纯CSS一样，看起来像：

app-text-editor.floating ~ .mat-form-field-label-wrapper > .mat-form-field-label {
  margin-top: initial;
  padding: initial;
}
app-text-editor ~ .mat-form-field-label-wrapper > .mat-form-field-label {
  margin-top: 2.5rem;
  padding: .5em; /* Used to properly align the content inside my contenteditable */
}

奇怪的是，即使是动画的过渡看起来很顺利，尽管我使用了这样一种麻木不仁的方法来重新定位它。

如果您不介意使用高级CSS选择器(我可以用：)，解决方案甚至可以更干净：

SCSS

app-text-editor {
  // Styling for the actual TextEditor

  &:not(.floating) ~ .mat-form-field-label-wrapper > .mat-form-field-label {
    margin-top: 2.5rem;
    padding: .5em; // Used to properly align the content inside my contenteditable
}

纯CSS

app-text-editor:not(.floating) ~ .mat-form-field-label-wrapper > .mat-form-field-label {
  margin-top: 2.5rem;
  padding: .5em; /* Used to properly align the content inside my contenteditable */
}