Como adicionar mixin para altura no campo de texto mwc?

8

Estou usando o polímero 3 e o elemento lit (2.2.1). A versão do mwc-textfield é 0.13.0. Eu li as documentações relacionadas a esta versão. Nesta documentação , descobri que podemos adicionar mixin para altura. Eu tentei de várias maneiras, mas não tive sucesso. Pode ser que a sintaxe que estou usando esteja errada. Quero diminuir a altura do meu campo de texto. Este é o meu campo de texto

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

e meu 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%;
 }

O css padrão aplicado é

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

A altura padrão aplicada ao campo de texto é 56px. O que eu tentei é

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

e

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

e também adicionou mixin no arquivo de módulos do nó como height: var (- mdc-text-field-height, 56px); e usado em css como

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

Qualquer ajuda seria muito apreciada! Desde já, obrigado.

Himabindu
fonte

Respostas:

3

Componentes de design de materiais vs Componentes da Web de materiais

Eu li as documentações relacionadas a esta versão. Nesta documentação , descobri que podemos adicionar mixin para altura.

A primeira coisa a observar aqui é que existem duas bibliotecas diferentes de componentes de material: a que você está se referindo é o MDC (Material Design Components, distribuído em npm as @material/<component>), que é uma implementação SASS + JS de componentes de material. O outro é o MWC (Material Web Components, distribuído como @material/mwc-<component>), uma coleção de WebComponents reais com base na biblioteca anterior. Portanto, lembre-se de que a documentação se refere à contraparte do MDC do componente MWC que você está usando ( <mwc-textfield>).

Estilo do lado de fora

O que você está tentando fazer aqui

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

não funciona principalmente porque a seleção dentro da raiz de sombra de um elemento personalizado não é possível (pelo menos, não é mais ); Além disso, o elemento responsável pela altura é o <label>, cuja classe é .mdc-text-field.

A maneira querySelector

A maneira mais rápida de alterar a altura que me vem à mente é 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>`;
  }
}

no entanto, eu realmente não recomendaria: desempenho e elegância à parte, provavelmente quebrará alguns mwc-textfieldrecursos, como o rótulo flutuante.

O caminho da extensão

Você também pode impor a altura estendendo TextFielde substituindo os 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>

mas, novamente, como acima, use por sua conta e risco ...

Usando o mixin

Acho que, por enquanto, a única maneira de usar o heightmixin é criar uma versão personalizada do TextField, que é mais ou menos assim:

  • clone o repo mwc (sim, é um monorepo para que você obtenha todos os outros componentes também, mas tenho certeza que você pode excluir todos os não importados pelo mwc-textfield)
  • instalação npm
  • em packages/mwc-textfield/src/mwc-textfield.scssuso o mixin:
    @include mixins.height(45px);
    provavelmente por aqui
  • npm run build
  • copie a pasta mwc-textfield e cole-a no seu projeto (exclua os arquivos de origem, o pacote npm pode ser útil para isso) e altere as importações de @material/mwc-textfieldpara./path/to/custom-textfield

Certamente muito trabalho para alterar uma altura ... A boa notícia é que o MWC ainda está em desenvolvimento e não pode ser excluído que eles adicionem uma propriedade customizada CSS ou alguma outra maneira de personalizar a altura. Além disso, os novos conceitos de densidade estão sendo implementados no MWC (infelizmente ainda não no TextField), que pode ser exatamente o que você precisa.

Há também uma questão em aberto sobre isso, vamos ver o que eles dizem

Umbo
fonte
A única coisa que eu não quero estender como campo de texto personalizado é porque Quando há uma atualização nos componentes da web, tenho que definir meu próprio campo de texto personalizado repetidamente. Portanto, quero usar o campo de texto original usando os mixins fornecidos.
Himabindu
Entendo ... Mas deixe-me salientar que a mixagem que você está mencionando é uma mistura sass utilizável no contexto de componentes MDC não compilados . No MWC não existe: eles vêm com CSS pré-compilado; desculpe se eu não deixei isso claro na minha resposta. De qualquer forma, se você não deseja definir a altura usando querySelector, já pensou em mudar para a versão MDC?
Umbo 9/03
Ok, eu entendi isso na sua resposta, mas estou
procurando
Obrigado @Umbo, a parte da extensão funcionou para mim com pequenas alterações.
Himabindu 18/03