@ 碳/ 网络组件
碳设计系统的Web组件.
安装
npm install @carbon/web-components
使用量
这个 @carbon/web-components 包提供了碳设计组件
系统.
要使用一个组件,可以直接从包中导入:
import '@carbon/web-components/es/components/dropdown/dropdown.js';
import '@carbon/web-components/es/components/dropdown/dropdown-item.js';
一旦导入组件模块,您就可以使用其中的组件 与本地 HTML 标记相同的方式 :
<cds-dropdown trigger-content="Select an item">
<cds-dropdown-item value="all">Option 1</cds-dropdown-item>
<cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
<cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
<cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
<cds-dropdown-item value="router">Option 5</cds-dropdown-item>
</cds-dropdown>
光盘N
CDN 文物也可以直接添加到页面中(开始)
版本时 v1.16.0:
<!doctype html>
<html>
<head>
<script
type="module"
src="https://1.www.s81c.com/common/carbon/web-components/version/v2.65.0/dropdown.min.js"></script>
<style type="text/css">
<!-- hide custom element until it has been defined //-->
cds-dropdown:not(:defined),
cds-dropdown-item:not(:defined) {
visibility: hidden;
}
</style>
</head>
<body>
<div id="app">
<cds-dropdown trigger-content="Select an item">
<cds-dropdown-item value="all">Option 1</cds-dropdown-item>
<cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
<cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
<cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
<cds-dropdown-item value="router">Option 5</cds-dropdown-item>
</cds-dropdown>
</div>
</body>
</html>
准备为 v3
下一个主要发行(v3)会改变组件的注册方式. 见 v3 迁移指南 准备.
现在可以了. 选择加入的API—— defineCustomElement
(单位:千美元)es/globals/register.js)和 static is 标签字段 – 在 v2 中可用 ,
今天你可以写出v3准备的代码.
折旧(将在v3中删除):
- 这个
carbonElement装饰 (单位:千美元)es/globals/decorators/carbon-element.js, (中文(简体) ), 用于自定义元素的作者 – 迁移到 Lit 的customElement(单位:千美元)import { customElement } from 'lit/decorators.js') (中文(简体) ). - 这个
es-custom构建 (单位:千美元)cds-custom-*元素),被自定义标签所取代 名称、前缀构建和范围登记. - 这个
custom-elements.jsonWCA 列表,替换为标准自定义 《要点宣言》.
闯入 v3 : 在 v3 中, 导入一个组件的类文件
登记其要素,例如导入 button/button.js 改为
button/index.js。使用 v3 标记 - 从
feat/web-components-v3
树枝.
文档
组成部分文件和使用指南见:
捐款
见 贡献指南。 。 。 .
许可证
凭 Apache 2.0 许可证。 。 。 .
IBM 遥测
本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 选择退出IBM遥测数据收集。 。 。 . 有关所收集数据的更多信息,请参见: IBM 遥测文档。 。 。 .