¿Cómo agregar mixin para altura en mwc textfield?

8

Estoy usando el polímero 3 y el elemento iluminado (2.2.1). La versión de mwc-textfield es 0.13.0. He leído las documentaciones relacionadas con esta versión. En esta documentación , he descubierto que podemos agregar mixin para la altura. Lo había intentado de varias maneras pero no lo logré. Puede que la sintaxis que estoy usando esté mal. Quiero disminuir la altura de mi campo de texto. Este es mi campo de texto

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

y mi 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%;
 }

El css predeterminado aplicado es

: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;
}

La altura predeterminada aplicada al campo de texto es 56px. Lo que he intentado es

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

y

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

y también agregó mixin en el archivo de módulos de nodo como height: var (- mdc-text-field-height, 56px); y usado en css como

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

Cualquier ayuda sería muy apreciada! Gracias por adelantado.

Himabindu
fuente

Respuestas:

3

Componentes de diseño de materiales frente a componentes web de materiales

He leído las documentaciones relacionadas con esta versión. En esta documentación , descubrí que podemos agregar mixin para la altura.

Lo primero que debe tener en cuenta aquí es que hay dos bibliotecas diferentes de componentes de material: la que se refiere es MDC (Material Design Components, distribuido en npm as @material/<component>), que es una implementación SASS + JS de componentes de Material. El otro es MWC (Material Web Components, distribuido como @material/mwc-<component>), una colección de WebComponents reales basados ​​en la biblioteca anterior. Por lo tanto, tenga en cuenta que la documentación se refiere a la contraparte MDC del componente MWC que está utilizando realmente ( <mwc-textfield>).

Estilizar desde el exterior

¿Qué intentas hacer aquí?

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

no funciona principalmente porque no es posible seleccionar dentro de la raíz de sombra de un elemento personalizado (al menos, ya no ); Además, el elemento responsable de la altura es <label>, cuya clase es .mdc-text-field.

La forma querySelector

La forma más rápida de cambiar la altura que se me ocurre es esta:

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>`;
  }
}

Sin embargo, realmente no lo recomendaría: dejando de lado el rendimiento y la elegancia, probablemente romperá algunas de las mwc-textfieldcaracterísticas, como la etiqueta flotante.

La forma de extensión

También puede imponer la altura extendiendo TextFieldy anulando los estilos:

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>

pero de nuevo, como el anterior, use bajo su propio riesgo ...

Usando el mixin

Supongo que por ahora la única forma de usar el heightmixin es crear una versión personalizada de TextField que más o menos sea así:

  • clonar el repositorio de mwc (sí, es un monorepo, por lo que también obtienes todos los demás componentes, pero estoy bastante seguro de que puedes eliminar todos los no importados por mwc-textfield)
  • npm install
  • en packages/mwc-textfield/src/mwc-textfield.scssuso el mixin:
    @include mixins.height(45px);
    probablemente por aquí
  • npm run build
  • copie la carpeta mwc-textfield y péguela en su proyecto (elimine los archivos fuente, el paquete npm puede ser útil para esto), luego cambie las importaciones de @material/mwc-textfielda./path/to/custom-textfield

Ciertamente, demasiado trabajo para cambiar una altura ... La buena noticia es que MWC aún está en desarrollo y no se puede excluir que agregarán una propiedad personalizada de CSS o alguna otra forma de personalizar la altura. Además, los nuevos conceptos de densidad se están implementando en MWC (lamentablemente aún no en TextField), que podría ser justo lo que necesita.

También hay un problema abierto sobre esto, veamos qué dicen

Umbo
fuente
Lo que no quiero extender como campo de texto personalizado es porque cuando hay una actualización en los componentes web, entonces tengo que definir mi propio campo de texto personalizado una y otra vez, así que quiero usar el campo de texto original usando los mixins dados.
Himabindu
Ya veo ... Pero permítanme señalar que la mezcla que está mencionando es una mezcla sass utilizable en el contexto de componentes MDC sin compilar . En MWC no existe tal cosa: vienen con CSS precompilado; perdón si no dejé esto claro en mi respuesta. De todos modos, si no desea establecer la altura usando querySelector, ¿ha considerado cambiar a la versión MDC?
Umbo
Ok, entendí eso en su respuesta, pero estoy buscando otras alternativas en MWC en lugar de cambiar a MDC
Himabindu
Gracias @Umbo, la extensión me funcionó con pequeños cambios.
Himabindu