当前位置：文江博客 Node Package Readme @adidas/yarn-plugin-choicesjs-stencil 中文文档教程

@adidas/yarn-plugin-choicesjs-stencil 中文文档教程

发布于 6年前浏览 1 项目主页更新于 3年前

ChoicesJS Web Component plugin

这个插件是 choicesjs-stencil Web 组件。

它通过添加 .choicesjs-stencil 类扩展 adidas YARN 设计系统库作为 .yarn 主类的一部分。

查看所有文档页面。

Use cases

该插件仅通过 CSS 类自定义 choicesjs-stencil Web 组件。它可以与 adidas YARN 一起使用，以增强选择和多选组件。

Requirements and dependencies

NodeJS 和 NPM 需要使用存储库。

它需要 adidas YARN 主库（依赖于 YARN 图标字体），以及 Web 组件和 [ChoicesJS][choicesjs] 库。

Installation and running

In development mode:

  npm install

Run time:

  npm install choices.js choicesjs-stencil @adidas/yarn-design-system @adidas/yarn-plugin-choicesjs-stencil

在应用程序的 HTML 中加载样式表文件和依赖项：

<!-- YARN core and icons -->
<link rel="stylesheet" href="node_modules/@adidas/yarn-design-system/dist/yarn.css"/>
<link rel="stylesheet" href="node_modules/@adidas/yarn-design-system/dist/yarn-icon.css"/>

<!-- plugin -->
<link rel="stylesheet" href="node_modules/@adidas/yarn-plugin-choicesjs-stencil/dist/yarn-plugin-choicesjs-stencil.css"/>

<!-- plugin dependencies -->
<script src="node_modules/choices.js/public/assets/scripts/choices.min.js"></script>
<script src="node_modules/choicesjs-stencil/dist/choicesjsstencil.js"></script>

或者使用 @import 将它们导入预处理的 CSS 文件中：

@import '~@adidas/yarn-design-system/dist/yarn.css';
@import '~@adidas/yarn-design-system/dist/yarn-icon.css';
@import '~@adidas/yarn-plugin-choicesjs-stencil/dist/yarn-plugin-choicesjs-stencil.css';

Use of the plugin

该插件可以使用或不使用 YARN，但在这两种情况下都需要 main .yarn 类在顶部或父元素中。

只需将类 .choicesjs-stencil 添加到 Web 组件：

<div class="yarn">
  <choicesjs-stencil class="choicesjs-stencil" type="text"/>
</div>

对于多行输入框，还添加类 .choicesjs-stencil--multiline：

<div class="yarn">
  <choicesjs-stencil class="choicesjs-stencil choicesjs-stencil--multiline" type="text"/>
</div>

检查如何使用 Web ChoicesJS Stencil 文档上的组件。

Building

该库由两部分组成：

The style source code, which is code of the library itself.
The example to show the different parts of the library.

两者都是独立的，并且它们有不同的脚本来运行它们。

Library:

  npm run build

Example:

  npm run build:example

该库在 dist 文件夹中编译，而示例在 docs 文件夹中创建。

Example as Single Page Application

该示例可以作为单页应用程序使用脚本 npm run build:example:spa，在构建库后执行。它接受两个环境变量：

HOSTNAME: host where the application will be deployed, the protocol should be omitted.
BASE: path where the application will be available.

在 https://name.domain:port/app 中部署应用程序的示例：

HOSTNAME=//name.domain:port BASE=app npm run build:example:spa

Documentation

文档是使用生成示例的脚本 doc 生成的在 SPA 模式下。它还接受环境变量。

HOSTNAME=//name.domain:port BASE=app npm run doc

Development

开发这个项目的脚本必须在不同的终端中执行，因为它们必须持续运行以检查更改。

Library:

  npm run start:lib

Example:

  npm run start:example

库准备就绪并构建示例后，应用程序就在本地主机中准备就绪：http://localhost:3000。

脚本正在等待源代码中的更改以重建库和示例。每次更改准备就绪时，浏览器都会使用热模块替换更新页面而不重新加载它.

Working with the library

库源代码位于 src 文件夹中。

一切都是从主 main.less 文件导入的。

Style Guide

YARN 库遵循 adidas 编码风格指南。

Working with the example

示例代码是使用 Nuxt 编写的，它是 Vue.JS。

该代码位于 example 文件夹中，并遵循 Nuxt 指南。

这些文档位于 example/locales 中，以便能够以不同的语言显示页面。 .md 文件包含整页的内容，而 [lang].json 文件只有标题和常用词。

Code linting

LESS 和 Vue 源代码使用 adidas stylelint 和 ESLint< /a> linter 配置分别。

有单独的脚本来检查不同的来源，还有一个全局的脚本一起执行：

npm run lint

注意在推送代码之前必须解决所有问题。

FAQ

所有关于维护者、贡献者和许可证的信息都可以在根 README 文件中找到。

License

麻省理工学院

[adidas-yarn-plugins-documentation]：http://adidas.github.io/adidas-yarn-design-system-plugins/

原文

ChoicesJS Web Component plugin

This plugin is a CSS customization for the choicesjs-stencil Web Component.

It extends adidas YARN Design System library by adding the class .choicesjs-stencil as part of .yarn main class.

Check all ion the documentation page.

Use cases

The plugin just customize the choicesjs-stencil Web Component via CSS classes. It can be used along with adidas YARN to have enhanced select and multiselect components.

Requirements and dependencies

NodeJS and NPM are required to work with the repository.

It requires adidas YARN main library (YARN icons font dependency), as well as the Web Component and the [ChoicesJS][choicesjs] library.

Installation and running

In development mode:

  npm install

Run time:

  npm install choices.js choicesjs-stencil @adidas/yarn-design-system @adidas/yarn-plugin-choicesjs-stencil

Load the stylesheet files and the dependencies in the HTML of your application:

<!-- YARN core and icons -->
<link rel="stylesheet" href="node_modules/@adidas/yarn-design-system/dist/yarn.css"/>
<link rel="stylesheet" href="node_modules/@adidas/yarn-design-system/dist/yarn-icon.css"/>

<!-- plugin -->
<link rel="stylesheet" href="node_modules/@adidas/yarn-plugin-choicesjs-stencil/dist/yarn-plugin-choicesjs-stencil.css"/>

<!-- plugin dependencies -->
<script src="node_modules/choices.js/public/assets/scripts/choices.min.js"></script>
<script src="node_modules/choicesjs-stencil/dist/choicesjsstencil.js"></script>

Or import them in your preprocessed CSS files with @import:

@import '~@adidas/yarn-design-system/dist/yarn.css';
@import '~@adidas/yarn-design-system/dist/yarn-icon.css';
@import '~@adidas/yarn-plugin-choicesjs-stencil/dist/yarn-plugin-choicesjs-stencil.css';

Use of the plugin

The plugin can be used with or without YARN, but in both cases it requires main .yarn class in the top or in a parent element.

Just add the class .choicesjs-stencil to the Web Component:

<div class="yarn">
  <choicesjs-stencil class="choicesjs-stencil" type="text"/>
</div>

For multiline input box add also the classs .choicesjs-stencil--multiline:

<div class="yarn">
  <choicesjs-stencil class="choicesjs-stencil choicesjs-stencil--multiline" type="text"/>
</div>

Check how to work with the Web Component on ChoicesJS Stencil documentation.

Building

The library consists of two parts:

The style source code, which is code of the library itself.
The example to show the different parts of the library.

Both are independent and they have different scripts to run them.

Library:

  npm run build

Example:

  npm run build:example

The library is compiled in the dist folder, whereas the example is created in the docs folder.

Example as Single Page Application

The example can be delivered as Single Page Application using the script npm run build:example:spa, executed after building the library. It accepts two environment variables:

HOSTNAME: host where the application will be deployed, the protocol should be omitted.
BASE: path where the application will be available.

Example deploying the application in https://name.domain:port/app:

HOSTNAME=//name.domain:port BASE=app npm run build:example:spa

Documentation

The documentation is generated using the script doc, which generates the example in SPA mode. It also accepts the environment variables.

HOSTNAME=//name.domain:port BASE=app npm run doc

Development

The script to develop this project have to be executed in different terminals because they have to be continuously running checking changes.

Library:

  npm run start:lib

Example:

  npm run start:example

Once the library is ready, and the example has been built, the application is ready in localhost: http://localhost:3000.

The scripts are waiting for changes in the source code to rebuild the library and the example. Each time a change is ready, the browser will update the page without reloading it, using Hot Module Replacement.

Working with the library

The library source code is inside the src folder.

Everything is imported from the main main.less file.

Style Guide

YARN library follows the adidas coding style guidelines.

Working with the example

The example code has been written using Nuxt, which is the Server Side Rendering framework of Vue.JS.

The code is located in the example folder and follows the Nuxt guidelines.

The documents are located in example/locales to be able to show the page in different languages. The .md files contain the content of full pages, while the [lang].json files have only titles and common words.

Code linting

The LESS and the Vue source code are linted using the adidas stylelint and ESLint linter configurations respectively.

There are separated scripts to lint the different sources and a global one to execute all together:

npm run lint

Note: it is mandatory to fix all the issues before pushing the code.

FAQ

All the information about maintainers, contributing and license can be found in the root README file.

License

MIT

[adidas-yarn-plugins-documentation]: http://adidas.github.io/adidas-yarn-design-system-plugins/

友情链接

文江博客

@adidas/yarn-plugin-choicesjs-stencil 中文文档教程

ChoicesJS Web Component plugin

Use cases

Requirements and dependencies

Installation and running

Use of the plugin

Building

Example as Single Page Application

Documentation

Development

Working with the library

Style Guide

Working with the example

Code linting

FAQ

License

ChoicesJS Web Component plugin

Use cases

Requirements and dependencies

Installation and running

Use of the plugin

Building

Example as Single Page Application

Documentation

Development

Working with the library

Style Guide

Working with the example

Code linting

FAQ

License

你可能也喜欢

友情链接