CSS 在 Polymer 中有条件地添加 CSS 类

在本文中，我们将介绍如何在 Polymer 中条件地添加 CSS 类。Polymer 是一个用于构建 Web 组件的前端框架，它提供了强大的样式化功能，允许我们根据不同的条件来动态地添加或修改元素的样式。

阅读更多：CSS 教程

条件添加 CSS 类

在 Polymer 中，我们可以通过使用 classList.add() 和 classList.remove() 来添加或移除 CSS 类。这两个方法接受一个参数，即要添加或移除的 CSS 类名。

例如，我们有一个 paper-button 组件，并且希望在用户点击按钮时添加一个名为 active 的 CSS 类。可以使用 Polymer 的事件监听器来实现这个效果，代码如下：

<template>
  <paper-button on-click="toggleClass">Click Me</paper-button>
</template>

<script>
  class MyButton extends Polymer.Element {
    static get is() { return 'my-button'; }

    toggleClass() {
      this.$.button.classList.toggle('active');
    }
  }

  customElements.define(MyButton.is, MyButton);
</script>

在这个例子中，<paper-button> 元素被包装在自定义的 <my-button> 组件中。当用户点击按钮时，toggleClass 方法会被触发。这个方法使用 classList.toggle() 来切换 active 类的存在。如果该类已经存在，则会被移除；如果不存在，则会被添加。

根据条件添加 CSS 类

除了简单地添加或移除 CSS 类，Polymer 还提供了更灵活的方式来根据条件动态地添加 CSS 类。我们可以使用属性绑定和计算属性来实现这个功能。

假设我们有一个表单输入组件 <my-input>，并且希望在输入框中的内容超过 10 个字符时添加一个 long-text 的 CSS 类。可以使用如下代码来实现：

<template>
  <input value="{{inputValue::input}}" class$="[[_computeClass(inputValue)]]">
</template>

<script>
  class MyInput extends Polymer.Element {
    static get is() { return 'my-input'; }

    _computeClass(inputValue) {
      return inputValue.length > 10 ? 'long-text' : '';
    }
  }

  customElements.define(MyInput.is, MyInput);
</script>

在这个例子中，<input> 元素通过双向数据绑定将输入的值存储在 inputValue 属性中。通过使用 class$ 属性绑定，我们可以将计算属性 _computeClass 的返回值作为元素的 CSS 类名。

_computeClass 方法根据 inputValue 的长度来判断是否添加 long-text 类。如果长度大于 10，就返回 long-text；否则返回空字符串。

示例说明

以上是关于在 Polymer 中条件地添加 CSS 类的基本示例，下面是一个更复杂的示例来说明如何通过条件添加 CSS 类来实现组件的样式变化。

假设我们有一个登陆表单组件 <my-login-form>，其中包含一个用户名输入框和一个密码输入框。要求当用户名和密码都不为空时，按钮才启用，否则按钮禁用。

通过条件地添加 CSS 类，我们可以实现按钮在不同状态下的样式变化。代码如下：

<template>
  <input type="text" value="{{username::input}}">
  <input type="password" value="{{password::input}}">
  <paper-button class$="[[_computeButtonClass(username, password)]]">Login</paper-button>
</template>

<script>
  class MyLoginForm extends Polymer.Element {
    static get is() { return 'my-login-form'; }

    _computeButtonClass(username, password) {
      return username && password ? 'enabled' : 'disabled';
    }
  }

  customElements.define(MyLoginForm.is, MyLoginForm);
</script>

在这个例子中，输入框的值通过双向数据绑定分别存储在 username 和 password 属性中。按钮的 CSS 类通过 _computeButtonClass 方法来计算，当 username 和 password 都不为空时，返回 enabled；否则返回 disabled。

通过在 CSS 文件中定义 enabled 和 disabled 类的样式，我们可以实现按钮在不同状态下的样式变化。