暮光JS Web组件

为Salla商店设计的一套现成的js web组件。
浏览我们的博客»

报告错误 · 请求功能 . < /萨拉开发者> . 官方文档

概述

《暮光之城》 为Salla商店提供了一套现成的设计和风格的网络组件。例如，准备好显示登录表单、产品可用性部分、搜索栏、本地化菜单等的组件。 暮光JS Web组件 是高级构建块和可重用web组件的集合，可以一起构建，以快速开发自定义Salla主题的UI，由明确的指导方针管理。

开始使用

JS Web组件 我们从头开始构建，以简单的学习和使用，具有各种精心构建的用户界面组件。正如文档所解释的那样，它与主题的结构和体系结构的完全兼容性使其易于自定义。

暮光JS Web组件列表

下面是一个现成的暮光JS Web组件列表，可以很容易地使用。接下来，在文档的这一部分中，将详细解释每个组件。

每个web组件都附带一个列表 属性和事件 使组件可定制。此外，每个web组件使用 暮光JS SDK 从后端获取任何所需的数据。

（回到顶部）

好处

干净、简单、标准化。

开发人员将遵循标准，让用户爱上现成组件和美丽（但多变）主题的用户体验。开发人员可以使用风格指南和功能设计来创建带有UI组件模块的大型主题。

使用暮光JS SDK

暮光Web组件使用 暮光JS SDK，它允许使用特定的REST API在前端和后端之间进行通信。

生态系统

暮光Web组件由一个全职核心团队和一个由开发人员和贡献者组成的大型社区维护。这是因为《暮光之城》帮助开发者合作。

（回到顶部）

注意事项：

值得注意的是 顺风CSS框架 的默认基础是 暮光网组件．未来的计划可能会包括其他CSS框架。

安装

要使用这些组件，开发人员需要加载一个CSS文件和一些JavaScript。CSS文件包括字体和设计令牌。

《暮光之城》的主题

在使用 暮光网组件 在《暮光之城》主题中，开发者不需要包含 暮光网组件 在你的bundle或html中， 暮光之城主题引擎 会不会注入最新版本的 暮光网组件 在页面中

打包机/ ES模块

开发人员需要安装这两个 node . js 和 顺风CSS，然后通过执行以下命令之一安装Twiligh web组件：

npm install @salla.sa/twilight-components --save

yarn add @salla.sa/twilight-components

之后，在javascript代码库中，开发人员可以像下面这样导入：

import {
  applyPolyfills, 
  defineCustomElements as TwilightWebComponents
} from '@salla.sa/twilight-components/loader';

applyPolyfills().then(() => {
    TwilightWebComponents(window);
});

HTML / CDN

另一种加载暮光Web组件的方法是使用托管在CDN上的版本。组件可以通过 <script> 标记在HTML文档的头部

<script
  type="module"
  src="https://unpkg.com/@salla.sa/twilight-components@latest/dist/twilight-components/twilight-components.esm.js"
></script>

启用了JIT的

顺风 增加了一个 即时编译器，它在开发人员编写主题时生成样式，而不是在初始构建时提前生成所有内容。

由于JIT模式通过扫描模板文件按需生成CSS，因此配置 content 选项。 tailwind.config.d.ts 否则你的CSS将是空的

...
  content: [
    // theme views
    "views/**/*.twig",
    // list of classes which required by twilight web components
    "node_modules/@salla.sa/twilight-tailwind-theme/safe-list-css.txt"
  ],
...

以前, 提到 这个文件 tailwind.config.d.ts 已经与 暮光之城启动主题 文件。

（回到顶部）

使用

安装完成后，可以很容易地将组件添加到基本的HTML标记中，如下所示：

// Salla Button component
<salla-button fill="outline" color="dark">Hello World 👋</salla-button>

// Salla Telephone Input component
<salla-tel-input onclick="telInput.isValid()" country-code="sa"
   country-key="+966" mobile="555555555">

// Salla Product Availability component
<salla-product-availability channels="sms,mobile,email" is-subscribed="false">
</salla-product-availability>

事件

我们建议使用DOM事件，但我们也提供自定义事件来帮助处理特定的事件类型。所有自定义事件总是记录在每个组件各自的文档页面上。

// Save reference to the modal component below
var modal = document.querySelector("salla-modal");

// Listen for open events
modal.addEventListener("modalVisibilityChanged", function (isOpened) {
    console.log("Modal Opened");
});

此外，开发人员可以检测组件何时被加载，因为Twilight使用标准Web组件API的CustomElementsRegistry对象注册它的组件。该对象还提供了一个 whenDefined 函数，它接受一个组件名并返回一个promise。当组件被定义时，承诺将被实现：

window.customElements.whenDefined("salla-button").then(() => {
    console.log("Salla Button is defined!");
});

（回到顶部）

支持

团队总是在这里帮助你。碰巧遇到了问题？想要报告bug？你可以在Github上提交一个 问题跟踪器。如果您还有任何问题，请通过电子邮件与我们联系 电报机器人 或加入全球开发者社区 电报.

（回到顶部）

贡献

贡献使开源社区成为一个学习、启发和创造的神奇场所。 你做的任何贡献都是 极大的赞赏.

如果你有一个更好的建议，请fork repo并创建一个pull request。 你也可以简单地打开一个带有“增强”标签的问题。别忘了给这个项目打个星！再次感谢!

1. 分岔项目
2. 创建特性分支(git checkout -b feature/AmazingFeature）
3. 提交更改(git commit -m 'Add some AmazingFeature'）
4. 推至分行(git push origin feature/AmazingFeature）
5. 打开拉取请求

（回到顶部）

学分

• 萨拉
• 所有贡献者

（回到顶部）

许可证

麻省理工学院许可证（MIT）。请参阅 许可文件 了解更多信息。

（回到顶部）