Salesforce Lightning Design System 组件开发指南：从零创建新组件

林菁琚

于 2025-06-11 09:02:33 发布

阅读量383

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00805/article/details/148575347

Salesforce Lightning Design System 组件开发指南：从零创建新组件

design-system Salesforce Lightning Design System 项目地址: https://gitcode.com/gh_mirrors/de/design-system

前言

Salesforce Lightning Design System (SLDS) 是一套企业级的设计系统，为开发者提供了一套完整的UI组件库和设计规范。本文将深入讲解如何在SLDS中创建全新的组件，帮助开发者理解SLDS的组件架构和开发流程。

组件开发基础概念

在SLDS中，每个组件都遵循严格的结构化设计原则，主要包含三个核心部分：

文档规范：通过SCSS注释形式定义组件的用途、使用场景和限制条件
HTML结构：定义组件的DOM结构和交互状态
样式定义：实现组件的视觉呈现和变体样式

组件创建详细步骤

第一步：创建组件目录结构

首先需要为新建的组件创建专用目录。以创建按钮组件为例：

cd ui/components
mkdir button

这一步骤建立了组件的根目录，所有相关文件都将存放在此目录下。

第二步：创建必要文件

每个SLDS组件至少需要三个核心文件：

_doc.scss - 组件文档定义文件
example.jsx - 组件HTML结构定义
_index.scss - 组件样式定义

创建命令示例：

cd button
touch _doc.scss
mkdir base
cd base
touch example.jsx
touch _index.scss

最终形成的目录结构如下：

button
├── _doc.scss
└── base
    ├── _index.scss
    └── example.jsx

第三步：定义HTML结构

在example.jsx中，我们需要定义组件的基本HTML结构。SLDS使用React组件形式定义UI：

import React from 'react';

export default [
  {
    id: 'default',
    label: 'Default',
    element: (
      // 这里放置组件的HTML结构
      <button className="slds-button">
        Click me
      </button>
    )
  }
];

这种结构允许我们定义组件的不同状态和变体，便于在文档中展示。

第四步：编写组件文档

SLDS采用特殊的注释语法来定义组件文档，这些注释会被解析并生成正式文档：

/**
 * 按钮是用户界面的基础交互元素，用于触发特定操作。
 * 
 * 按钮应当清晰可见，具有明确的视觉反馈，并且标签应当准确描述其功能。
 *
 * @summary 用于触发用户操作的交互元素
 *
 * @base
 * @name button
 * @selector .slds-button
 */

关键注释标签说明：

@summary：组件简短描述
@name：组件名称
@selector：组件主CSS选择器

第五步：定义样式和变体

在_index.scss中，我们需要定义组件的样式和变体规则：

/**
 * 基础按钮样式定义
 *
 * @summary 标准按钮样式
 *
 * @variant
 * @name base
 * @selector .slds-button
 * @restrict button, a
 */
.slds-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    // 更多样式定义...
}

变体注释说明：