如何在MWC文本字段中为高度添加mixin? [英] How to add mixin for height in mwc textfield?

问题描述

我正在使用聚合物3和发光元素(2.2.1). mwc-textfield的版本为0.13.0.我已经阅读了与此版本相关的文档.在此文档，我发现我们可以添加mixin来增加高度.我尝试了几种方法，但没有成功.可能是我使用的语法错误.我想减小文本字段的高度.这是我的文本字段

I am using polymer 3 and lit-element(2.2.1). The version of mwc-textfield is 0.13.0. I have read the documentations related to this version.In this documentation, I have found that we can add mixin for height. I had tried several ways but did not succeed. May be the syntax I am using is wrong. I want to decrease the height of my text field. This is my text field

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

应用于文本字段的默认高度为56像素.我尝试过的是

The default height applied to the text field is 56px. What I have tried is

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

和

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

，并且还在节点模块文件中添加了mixin作为 height:var(-mdc-text-field-height，56px); 并在CSS中用作

and also added mixin in the node modules file as height:var(--mdc-text-field-height,56px); and used in css as

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

任何帮助将不胜感激！预先感谢.

Any help would be greatly appreciated! Thanks in advance.

推荐答案

材料设计组件与材料Web组件

我已经阅读了与此版本有关的文档.在这个文档中，我发现我们可以添加mixin表示高度.

I have read the documentations related to this version. In this documentation, I have found that we can add mixin for height.

这里首先要注意的是，有两个不同的材料组件库:您所指的是MDC(材料设计组件，以@material/<component>的形式在npm上分发)，它是Material的SASS + JS实现.成分.另一个是MWC(作为@material/mwc-<component>分发的材料Web组件)，它是实际 WebComponents (基于以前的库).因此请记住，该文档引用的是您实际使用的MWC组件的MDC副本(<mwc-textfield>).

The first thing to note here is that there are two different libraries of material components: the one you are referring to is MDC (Material Design Components, distributed on npm as @material/<component>) which is a SASS+JS implementation of Material components. The other one is MWC (Material Web Components, distributed as @material/mwc-<component>), a collection of actual WebComponents based on the former library. So keep in mind that the documentation refers to the MDC counterpart of the MWC component you're actually using (<mwc-textfield>).

外部样式

您要在这里做什么

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

之所以不起作用，主要是因为无法在自定义元素的影子根内部进行选择(至少，

doesn't work mainly because selecting inside a custom element's shadow root is not possible (at least, not anymore); also, the element responsible for the height is the <label>, whose class is .mdc-text-field.

querySelector方式

改变我脑海中最快的高度的方法是:

The quickest way to change the height that comes to my mind is this:

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功能，例如浮动标签.

however I would really not recommend it: performance and elegance aside, it'll probably break some of mwc-textfield features such as the floating label.

扩展方式

您还可以通过扩展TextField并覆盖样式来增强高度:

You can also enforce the height by extending TextField and overriding the styles:

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>

但还是要像上面一样，使用时需要您自担风险...

but again, like the above, use at your own risk...

使用混入

我想现在使用height mixin的唯一方法是构建自定义版本的TextField，或多或少是这样的:

I guess for now the only way of using the height mixin is building a customised version of TextField which more or less goes like this:

• 克隆 MWC回购(是的，这是一个monorepo，所以您还可以获得所有其他组件，但是我敢肯定您可以删除所有未通过mwc-textfield导入的组件)
• npm安装
packages/mwc-textfield/src/mwc-textfield.scss中的
• 使用mixin:

• clone the mwc repo (yeah, it's a monorepo so you get all the other components as well, but I'm pretty sure you can delete all the ones not imported by mwc-textfield)
• npm install
• in packages/mwc-textfield/src/mwc-textfield.scss use the mixin:

@include mixins.height(45px);

大概在 npm pack 可能很方便)，然后将导入从@material/mwc-textfield更改为./path/to/custom-textfield

probably around here

npm run build

copy the mwc-textfield folder and paste it in your project (delete the source files, npm pack may be handy for this), then change the imports from @material/mwc-textfield to ./path/to/custom-textfield

在更改高度方面肯定需要做很多工作……好消息是MWC仍在开发中，不能排除的是它们将添加CSS自定义属性或其他自定义高度的方法.此外，新的密度概念正在MWC中实现(遗憾的是，目前尚未在TextField)，这可能正是您所需要的.

Certainly too much work for changing a height... The good news is MWC is still in development and it cannot be excluded that they'll add a CSS custom property or some other way to customise the height. Also, the new density concepts are being implemented in MWC (sadly not yet in TextField), which could be just what you need.

还有一个关于以下内容的公开问题这个，让我们看看他们怎么说

There is also an open issue about this, let's see what they say

这篇关于如何在MWC文本字段中为高度添加mixin?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！