Как добавить mixin для высоты в текстовом поле mw c?

Question

Я использую полимер 3 и горит элемент (2.2.1). Версия mw c -textfield - 0.13.0. Я прочитал документацию, относящуюся к этой версии. В этой документации я обнаружил, что мы можем добавить mixin для высоты. Я пробовал несколько способов, но безуспешно. Может быть, синтаксис, который я использую, неверен. Я хочу уменьшить высоту моего текстового поля. Это мое текстовое поле

<mwc-textfield id="textBox" .type="text" .value=${this.title} .placeholder='' minLength="10" maxLength="256"></mwc-textfield>

и мое css

 #textBox{
  text-transform: none;
   --mdc-theme-primary: transparent;
   --mdc-text-field-fill-color: #fff;
   --mdc-text-field-hover-line-color: #f5f5f5;
   --mwc-text-width: 100%;
   width:100%;
 }

По умолчанию css применяется

:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--outlined) {
    background-color: transparent;
}
.mdc-text-field:not(.mdc-text-field--disabled) {
    background-color: rgb(245, 245, 245);
}
.mdc-text-field {
    display: flex;
    width: 100%;
}
.mdc-text-field {
    height: 56px;
    display: inline-flex;
    position: relative;
    box-sizing: border-box;
    will-change: opacity, transform, color;
    border-radius: 4px 4px 0px 0px;
    overflow: hidden;
}
.mdc-text-field {
    --mdc-ripple-fg-size:  0;
    --mdc-ripple-left:  0;
    --mdc-ripple-top:  0;
    --mdc-ripple-fg-scale:  1;
    --mdc-ripple-fg-translate-end:  0;
    --mdc-ripple-fg-translate-start:  0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
user agent stylesheet
label {
    cursor: default;
}
<style>
#textfield {
    width: var(--text-field-width,80%);
    height: 100%;
    position: absolute;
    left: 0;
    top: -12px;
    text-transform: capitalize;
    --mwc-text-width: 100%;
}
<style>
mwc-textfield {
    --mdc-theme-primary: transparent;
    --mdc-text-field-ink-color: black;
    --mdc-text-field-fill-color: transparent;
    --mdc-text-field-disabled-fill-color: transparent;
}

Высота по умолчанию применяется к текстовое поле 56px. Я попробовал

 #textbox.mdc-text-field--height{
    height:45px;
    }

и

#textbox.mdc-text-field--height('45px');

, а также добавил mixin в файл модулей узла как height: var (- md c -text- field-height, 56px); и используется в css как

#textBox{
--mdc-text-field-height:45px;
}

Любая помощь будет принята с благодарностью! Заранее спасибо.

Answer 1

Компоненты дизайна материала и веб-компоненты материала

Я прочитал документацию, относящуюся к этой версии. В этой документации я обнаружил, что мы можем добавить mixin для высоты.

Первое, что следует отметить здесь, это то, что есть две разные библиотеки компонентов материала: тот, который вы имеется в виду MD C (Компоненты конструирования материала, распределенные по npm как @material/<component>), который представляет собой реализацию SASS + JS компонентов материала. Другой - MW C (Web-компоненты материалов, распространяемые как @material/mwc-<component>), набор фактических WebComponents на основе предыдущей библиотеки. Так что имейте в виду, что документация относится к аналогу MD C компонента MW C, который вы фактически используете (<mwc-textfield>).

Стилизация снаружи

То, что вы пытаетесь сделать здесь

#textbox.mdc-text-field--height {
  height: 45px;
}

не работает в основном потому, что выделение внутри тени пользовательского элемента root невозможно (по крайней мере, больше не *) 1026 *); кроме того, элементом, отвечающим за высоту, является <label>, класс которого равен .mdc-text-field.

Путь querySelector

Самый быстрый способ изменить высоту, которая мне приходит в голову следующее:

import { LitElement, html, property, customElement, css, query } from 'lit-element';
import '@material/mwc-textfield';

@customElement('my-component')
export class MyComponent extends LitElement {
  // Select the text field
  @query('mwc-textfield') textField;

  async firstUpdated() {
    // Wait for its dom to be ready
    await this.field.updateComplete;
    // Programmatically select the label
    // and change the height
    this.field
    .shadowRoot
    .querySelector('.mdc-text-field')
    .style
    .height = '45px';
  }

  render() {
    return html`<mwc-textfield></mwc-textfield>`;
  }
}

однако я бы действительно не рекомендовал бы это: если не считать производительность и элегантность, это, вероятно, сломает некоторые из mwc-textfield функций, таких как плавающие label.

Способ расширения

Вы также можете принудительно установить высоту, увеличив TextField и переопределив стили:

import {LitElement, html, customElement, css} from 'lit-element';
import {TextField} from '@material/mwc-textfield/mwc-textfield';

@customElement('my-textfield')
export class MyTextfield extends TextField {
  static styles = [TextField.styles, css`
    .mdc-text-field {
      height: 45px;
    }
  `];
}

// Then use <my-textfield> instead of <mwc-textfield>

, но снова , как и выше, используйте на свой страх и риск ...

Использование mixin

Полагаю, пока единственным способом использования height mixin является сборка настраиваемая версия TextField, которая более или менее выглядит следующим образом:

• клон mw c репо (да, это монорепо, так что вы получаете все остальные компоненты также , но я почти уверен, что вы можете удалить все те, которые не импортированы mw c -textfield)
• * 10 98 * установить
• в packages/mwc-textfield/src/mwc-textfield.scss использовать миксин:

  @include mixins.height(45px);
  

  вероятно около здесь
• npm запустить сборку
• скопировать mw c - текстовое поле и вставьте его в свой проект (удалите исходные файлы, npm pack может пригодиться для этого), затем измените импорт с @material/mwc-textfield на ./path/to/custom-textfield

Конечно, слишком много работы для изменения высоты ... Хорошая новость в том, что MW C все еще находится в разработке, и нельзя исключать, что они добавят пользовательское свойство CSS или другой способ настройки. высота. Кроме того, новые концепции плотность реализуются в MW C (к сожалению, еще не в TextField), что может быть именно то, что вам нужно.

Существует также открытый выпуск об этом, посмотрим что они скажут