折旧

此组件已移至 anypoint-web-components/awc。 。 。 .

====

这个 <anypoint-styles> 组件提供了使用任意点 CSS 样式的简单方式 在申请中。 现有进口商品如下:

1. 颜色.js数字 : 在任意点中定义的颜色的完整列表 调色板

2. 印刷学.js数字 : 任意点 字体 样式和大小

3. 主题数字 : 任何点应用程序的默认主题 .

我们建议导入每个文件,并使用样式变量 而不是总和 anypoint-styles.js 整体而言.

说明,打字法不包括字体定义( din-pro.js)档案. 它假设对象已经装入了网络应用程序 。 如果没有,则再导入 din-pro.js 文档.

使用量

安装

npm install --save @anypoint-web-components/anypoint-styles

在 html 文件内

<html>
  <head>
    <script type="module">
      import '@anypoint-web-components/anypoint-styles/default-theme.js';
    </script>
    <style>
    h1 {
      font-size: var(--font-header1-font-size);
      font-weight: var(--font-header1-font-weight);
      letter-spacing: var(--font-header1-letter-spacing);
      margin-bottom: var(--font-header1-margin-bottom);
    }
    </style>
  </head>
  <body>
    <h1>Content title</h1>
  </body>
</html>

在一个LitElement中

import { LitElement, html, css } from 'lit-element';
import '@anypoint-web-components/anypoint-styles/default-theme.js';

class SampleElement extends LitElement {
  static get styles() {
    return css`
    h1 {
      font-size: var(--font-header1-font-size);
      font-weight: var(--font-header1-font-weight);
      letter-spacing: var(--font-header1-letter-spacing);
      margin-bottom: var(--font-header1-margin-bottom);
    }`;
  }

  render() {
    return html`<h1>Content title</h1>`;
  }
}
customElements.define('sample-element', SampleElement);

发展

git clone https://github.com/anypoint-web-components/anypoint-styles
cd anypoint-styles
npm install

本地运行演示

npm start

运行测试

npm test