Salesforce Lightning Design System 快速入门指南

严千旗

于 2024-08-26 09:33:07 发布

阅读量344

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00172/article/details/141553114

版权

Salesforce Lightning Design System 快速入门指南

design-system-starter-kitRapid prototyping environment using the Salesforce Lightning Design System项目地址:https://gitcode.com/gh_mirrors/de/design-system-starter-kit

项目介绍

Salesforce Lightning Design System (SLDS) 是一个用于快速原型设计的开源工具包，它基于HTML和Sass构建。该工具包旨在帮助从原型设计师到大型应用程序开发者的所有用户，在浏览器中快速启动和运行各种规模的原型。SLDS提供了一套完整的UI组件和设计模式，使得用户无需成为前端专家即可开始设计。

项目快速启动

安装步骤

克隆仓库：

git clone https://github.com/salesforce-ux/design-system-starter-kit.git

进入项目目录：
```
cd design-system-starter-kit
```
安装依赖：
```
npm install
```
启动开发服务器：
```
npm start
```

示例代码

以下是一个简单的HTML示例，展示了如何使用SLDS的组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SLDS Example</title>
    <link rel="stylesheet" href="path/to/slds/styles.css">
</head>
<body>
    <div class="slds-p-around_medium">
        <h1 class="slds-text-heading_large">Hello, SLDS!</h1>
        <button class="slds-button slds-button_brand">Click Me</button>
    </div>
</body>
</html>