流体设计系统 Vanilla JS
流线 是Engie的设计系统,是用于建造Engie数字产品的可再使用的组件和样式的集合.
以下是在您打字计划中从 Fluid 组件和样式中受益的软件包 .
折旧通知
@engie-group/fluid-design-system 已贬值。 载有这一通知的释放是Vanilla JS图书馆的最后释放。 之后将不提供新特性、错误修正、安全更新或发布.
迁移到 @engie-group/fluid-design-system-webcomponents,支持的后继者。 这不是临时替换:请咨询 Web 组件文档 每个组件的标记和API.
npm install @engie-group/fluid-design-system-webcomponents @engie-group/fluid-design-tokens
为什么改变?
- 增强互操作性:Web组件与所有现代框架(React,Angular,Vue等)本土相容,无需任何框架即可被使用.
- 简化维修:为所有环境建立单一的代码基础,减少技术债务并让未来的演化更加容易.
- 标准化:采用网络标准可确保更好的可持续性和可扩展性.
对于迁移支持,请查阅Web组件文档或联系Fluid团队.
版本
QQ 本套件不遵循语义化的版本,在小版本中引入了断开的修改.
版本结构如下: GLOBAL.BREAKING.MINOR 其中:
GLOBAL这是 流体设计系统的全球版本 (出:活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活 我们现在是Fluid 6。 。 。 .BREAKING逐一递增 中断更改 (组件 API 更改,布局更改等).MINOR为错误递增 修正、特征和非突破性更改。 。 。 .
我们建议 使用 ~ semver 范围 以避免打破影响应用程序的更改.
此外,我们建议检查 变化 在发布后更新软件包.
开始
这个包可以直接安装在国家预防机制或通过CDN安装.
国家预防机制的安装
您可以通过 无数字 :
# Using npm
npm install @engie-group/fluid-design-system @engie-group/fluid-design-tokens
# Using pnpm
pnpm add @engie-group/fluid-design-system @engie-group/fluid-design-tokens
# Using yarn
yarn add @engie-group/fluid-design-system @engie-group/fluid-design-tokens
支助科
组件造型基于CSS类和一些CSS变量(被称作"设计符"). 要按预期提供每个组件, 您需要将 CSS 文件作为全局样式表纳入您的工程 .
您应该把它们包含在您的 HTML <head>数字 :
<!-- tokens.css = Styles to import tokens needed by components -->
<link
href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-tokens/lib/css/tokens.css"
rel="stylesheet"
/>
<!-- fluid-design-system.css = Styles of all components -->
<link
href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/fluid-design-system.css"
rel="stylesheet"
/>
或在您的 JavaScript 条目文件中 :
import '@engie-group/fluid-design-tokens/css';
import '@engie-group/fluid-design-system/css';
或 CSS 条目文件中 :
@import '@engie-group/fluid-design-tokens/css';
@import '@engie-group/fluid-design-system/css';
i️ 我们建议将流体设计系统 CSS 包含在您自己的样式表之前,以避免任何冲突.
Javascript
一些组件需要JavaScript代码才能正常工作.
当您的 DOM 实现时, 动态组件需要初始化才能正常工作 .
为此,您必须先用一个将初始化所有组件的全局脚本,或者单独初始化每个组件.
全球初始化
您可以使用自动初始化脚本同时初始化所有组件.
在关闭前, 在页面的末尾添加以下脚本 </body> 标签 :
<script
type="module"
src="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/auto-init.js"
></script>
个人初始化
您也可以在 JavaScript 中单独初始化每个组件, 通过调用静态 init 组件方法.
例如,要初始化您页面上的所有选择组件,您可以使用以下代码:
// In a JS file or script tag called right before the end of the body
import { Select } from '@engie-group/fluid-design-system';
Select.init();
CDN 安装
通过CDN可以使用流体设计系统. 这是推荐使用流体的方法,如果您没有构建过程,或者您想在一个工程中快速测试流体.
与国家预防机制的安装一样,您需要将一些CSS和JavaScript文件纳入您的项目。 安装非常相似.
支助科
组件造型基于CSS类和一些CSS变量(被称作"设计符"). 要按预期提供每个组件, 您需要将 CSS 文件作为全局样式表纳入您的工程 .
您应该把它们包含在您的 HTML <head>数字 :
<!-- tokens.css = Styles to import tokens needed by components -->
<link
href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-tokens@<VERSION>/lib/css/tokens.css"
rel="stylesheet"
/>
<!-- fluid-design-system.css = Styles of all components -->
<link
href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@<VERSION>/lib/fluid-design-system.css"
rel="stylesheet"
/>
i️ 我们建议将流体设计系统 CSS 包含在您自己的样式表之前,以避免任何冲突.
Javascript
一些组件需要JavaScript代码才能正常工作.
要访问您的代码中的组件, 我们导出一个全局 NJ 包含所有组件的常数.
要提供, 您必须在使用任何组件之前设定此脚本 :
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@<VERSION>/lib/fluid-design-system.js"
></script>
当您的 DOM 实现时, 动态组件需要初始化才能正常工作 .
为此,您必须先用一个将初始化所有组件的全局脚本,或者单独初始化每个组件.
全球初始化
您可以使用自动初始化脚本同时初始化所有组件.
在关闭前, 在页面的末尾添加以下脚本 </body> 标签 :
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@<VERSION>/lib/auto-init.js"
></script>
个人初始化
您也可以在 JavaScript 中单独初始化每个组件, 通过调用静态 init 组件方法.
例如,要初始化您页面上的所有选择组件,您可以使用以下代码:
// In a JS file or script tag called right before the end of the body
NJ.Select.init();
文件和使用情况
为了更好地理解这些部件及其用途,我们建议检查我们的 故事书 文档.
对于流体整体文档,你可以检查我们 流体文档。 。 。 .
如果您已经正确跟踪安装步骤, 您应该可以在您的工程中使用 Fluid 组件 .
<body>
<!-- basic Fluid button component -->
<button type="button" class="nj-btn">Fluid button</button>
<!-- basic Fluid select component -->
<div class="nj-form-item nj-form-item--select">
<div class="nj-form-item__field-wrapper">
<select class="nj-form-item__field" id="exampleSelect">
<optgroup label="Group 1">
<option>Item 1</option>
<option>Item 2</option>
</optgroup>
<optgroup label="Group 2">
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</optgroup>
</select>
<label for="exampleSelect" class="nj-form-item__label">Example</label>
<div class="nj-form-item__trailing">
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
</div>
</div>
</div>
<script
type="module"
src="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/auto-init.js"
></script>
</body>
解决问题和专题请求
如果您遇到任何问题, 或者您想要执行任何组件或功能, 请为我们创建一个问题或功能请求 GitHub 仓库。 。 。 .