@accordant/components 中文文档教程

Question

accordant-components

Setup

git clone git@bitbucket.org:accordant/components.git
cd components
npm i

Run a development site

npm start

然后导航到 http://localhost:8081

Testing and Use-cases

有一个功能可以代表您生成一些简单的用例。

这是基础知识。

Import the loader

在 ./your-component/index.html 中，找到/创建您的模块脚本标签并导入您的组件（和其他依赖组件）并包含它。
然后调用加载器，并将 location.pathname 中的方法作为参数解析。

location.pathname 假设您正在相对地访问您的 index.html 页面。
即：http://localhost:8081/your-component/
这里的绝对路径是行不通的。

import loader from '/scripts/example-loader.js';
loader(location.pathname);

一个基本示例如下所示。

<script type="module">
    import '.'; // your module
    import '../other-comp';
    import loader from '/scripts/example-loader.js';
    loader(location.pathname);
</script>

您也可以对路径进行硬编码，但如果更改组件名称，请记住进行更新。

<script type="module">
    import '.'; // your module
    import '../other-comp';
    import loader from '/scripts/example-loader.js';
    loader('/your-component/');
</script>

Create examples

在组件文件夹中创建一个文件并创建一个新文件，并将其命名为 examples.js

这种格式应该只是一个数组。

export default [] // <ExampleDescription[]>

ExampleDescription

每个项目都应该是一个代表示例的对象。

{
    tag: <String|TemplateLiteral>,
    innerHTML: <String|TemplateLiteral>,
    attributes: <AttributeDescription[]>,
    events: <EventDescription[]>,
    [any]: <any>
}

标签：字符串或模板文字。 这是必需的。
它表示要生成的标签名称。

innerHTML：字符串或模板文字。 这是可选的。
中使用它来描述子内容

在 light dom attributes：属性描述数组。 这是可选的。
每个属性描述都会向示例组件添加一个具有指定值的属性。

events：一组事件描述。 这是可选的。
每个事件描述都会根据指定的事件名称将事件处理程序绑定到示例组件。

AttributeDescription

{
    name: <String>,
    value: <any>
}

名称：一个字符串。 这是必需的。
属性的名称。

值：任何值类型。 这是必需的
应用于组件的值。

EventDescription

{
    name: <String>,
    handler: <Function>
}

名称：事件名称。 这是必需的。
应该绑定的事件名称。

处理程序：一个函数。 这是必需的。
当事件被触发时，如何对事件做出反应。

### 在组件中使用颜色

组件库当前正在观察以下css 变量结构。

ACCORDANT COLOR PALLETTE 尽可能

    --impact-low-color: rgb(84, 201, 248);
    --impact-high-color: rgb(0, 0, 54);
    --clear-audience-color: #fff;

    --primary-brand-color: #0279C8;
    --secondary-brand-color:   #7FC4FD;
    --active-color: #2999FB;
    --tertiary-brand-color: #00335B;
    --background-color: #f1f9ff;

    --button-secondary: #db3907;
    --button-secondary-active: #af2d06;

    --main-text-color: var(--primary-brand-color);
    --secondary-text-color: var(--tertiary-brand-color);
    --light-text-color: #f8f8f8;
    --hero-text-color: #f8f8f8;

使用这些动态变量。

基本一致样式存在于用于本地测试的示例项目中。

如果在受众目录/数字杂志的实例中没有提供变量，请使用一致的十六进制代码作为默认备份值。

您还可以使用下面提供的 Ubank 调色板进行测试，以确保您的颜色是动态的。

注意，对于观众目录影响颜色，它们必须是 RGB - 这样表格就可以计算 & 根据建模数据集插入颜色值。

UBANK 调色板

    --impact-low-color: rgb(139,193,69);
    --impact-high-color: rgb(0,130,40);
    --clear-audience-color: #fff;

    --primary-brand-color: #008228;
    --secondary-brand-color: #8BC145;
    --active-color: #2D2D2D;
    --tertiary-brand-color: #EEECEB;
    --background-color: #EEECEB;

    --button-secondary: #2D2D2D;
    --button-secondary-active: #4C4C4C;

    --main-text-color: var(--primary-brand-color);
    --secondary-text-color: var(--active-color);
    --light-text-color: #f8f8f8;
    --hero-text-color: #f8f8f8;