设计系统 3.1.2

设计系统 3.1.2

测试已测试
语言语言 Obj-CObjective C
许可证 BSD-3-Clause
发布最后发布2019年1月

Maintained by Ivan Bogdanov, Joe Andolina, John Earle.



  • Salesforce.com和贡献者

Salesforce Lightning Design System 的 iOS 静态库

用于 Salesforce Lightning Design System 标记 的 iOS 静态库。

重要提示:此包目前没有添加新的标记。

当前版本:Spring ‘17

简单安装

安装CocoaPods

$ sudo gem install cocoapods

导航到您的iOS项目目录并运行

$ pod init

在项目目录的根目录创建一个Podfile

Podfile中添加以下内容到use_frameworks!

pod 'DesignSystem'

运行

$ pod install

将为您的项目创建一个工作区(以.xcworkspace结尾)

在Xcode中打开此工作区文件。未来构建请使用此工作区。

更新您的搜索路径

打开工作区后,转到您的项目→您的目标项目→构建设置→头文件搜索路径,删除除了$(inherited)非递归之外的所有内容。

手动子模块/子项目设置

更多信息请见 此处

样本应用程序

查看演示应用程序以获取库浏览器和示例代码。

Swift 使用

设置

要使用 Swift 中的 SLDS 库,导入库

import DesignSystem

SLDS 扩展和常量现在可在您的文件中访问。

示例

颜色

let backgroundColor = UIColor.sldsBackgroundColor(.colorBackground)

let borderColor = UIColor.sldsBorderColor(.colorBorderBrand)

let fillColor = UIColor.sldsFill(.brand)

let textColor = UIColor.sldsTextColor(.colorTextDefault)
颜色覆盖

设置覆盖后,像平时一样在整个应用程序中使用颜色。

UIColor.sldsOverrideBackgroundColor(.colorBackground, with: UIColor.cyan)
let backgroundColor = UIColor.sldsBackgroundColor(.colorBackground)

UIColor.sldsOverrideBorderColor(.colorBorderBrand, with: UIColor.cyan)
let borderColor = UIColor.sldsBorderColor(.colorBorderBrand)

UIColor.sldsOverrideFill(.brand, with: UIColor.cyan)
let fillColor = UIColor.sldsFill(.brand)

UIColor.sldsOverrideTextColor(.colorTextBrand, with: UIColor.cyan)
let textColor = UIColor.sldsTextColor(.colorTextDefault)

字体和文本大小

label.font = UIFont.sldsFont(.bold, with: .medium)

图标

动作图标
let icon = UIImage.sldsActionIcon(.addContact, withSize: SLDSSquareIconLarge)

let iconWithColor = UIImage.sldsActionIcon(.addContact, with: UIColor.black, andBGColor: UIColor.white, andSize: SLDSSquareIconLarge)
自定义图标
let icon = UIImage.sldsCustomIcon(.custom1, withSize: SLDSSquareIconLarge)

let iconWithColor = UIImage.sldCustomIcon(.custom1, with: UIColor.black, andBGColor: UIColor.white, andSize: SLDSSquareIconLarge)
标准图标
let icon = UIImage.sldsStandardIcon(.account, withSize: SLDSSquareIconLarge)

let iconWithColor = UIImage.sldsStandardIcon(.account, with: UIColor.black, andBGColor: UIColor.white, andSize: SLDSSquareIconLarge)
实用图标
let icon = UIImage.sldsUtilityIcon(.addContact, withSize: SLDSSquareIconLarge)

let iconWithColor = UIImage.sldsUtilityIcon(.addContact, with: UIColor.black, andBGColor: UIColor.white, andSize: SLDSSquareIconLarge)

Objective-C 使用方法

示例

颜色

#import <DesignSystem/SalesforceDesignSystem.h>

...

UIColor* backgroundColor = [UIColor sldsBackgroundColor:SLDSCardColorBackground];

UIColor* borderColor = [UIColor sldsBorderColor:SLDSColorBorderBrand];

UIColor* fillColor = [UIColor sldsFill:SLDSFillBrand];

UIColor* textColor = [UIColor sldsTextColor:SLDSColorTextBrand];

颜色覆盖

设置覆盖后,像平时一样在整个应用程序中使用颜色。

#import <DesignSystem/SalesforceDesignSystem.h>

...

UIColor sldsOverrideBackgroundColor:SLDSCardColorBackground with:UIColor.cyanColor];
UIColor* backgroundColor = [UIColor sldsBackgroundColor:SLDSCardColorBackground];

[UIColor sldsOverrideBorderColor:SLDSColorBorderBrand with:UIColor.cyanColor];
UIColor* borderColor = [UIColor sldsBorderColor:SLDSColorBorderBrand];

[UIColor sldsOverrideFill:SLDSFillBrand with:UIColor.cyanColor];
UIColor* fillColor = [UIColor sldsFill:SLDSFillBrand];

[UIColor sldsOverrideTextColor:SLDSColorTextBrand with:UIColor.cyanColor];
UIColor* textColor = [UIColor sldsTextColor:SLDSColorTextBrand];

字体和文字大小

#import <DesignSystem/SalesforceDesignSystem.h>

...

UIFont* f = [UIFont sldsFont:SLDSFontRegular withSize:SLDSFontSizeXLarge];

图标

行为图标
#import <DesignSystem/SalesforceDesignSystem.h>

...

UIImage *icon = [UIImage sldsActionIcon:SLDSIconActionNewCustom98 withSize:20.0f];
自定义图标
#import <DesignSystem/SalesforceDesignSystem.h>

...

UIImage *icon = [UIImage sldsCustomIcon:SLDSIconCustom1 withSize:20.0f];
标准图标
#import <DesignSystem/SalesforceDesignSystem.h>

...

UIImage *icon = [UIImage sldsStandardIcon:SLDSIconStandardAccount withSize:20.0f];
实用图标
#import <DesignSystem/SalesforceDesignSystem.h>

...

UIImage *icon = [UIImage sldsUtilityIcon:SLDSIconUtility3dots withSize:20.0f];

库构建(非必需)

如果您想使用自己的自定义设计令牌或扩展SLDS库,您需要重新构建生成文件夹。在修改gulp脚本后,运行以下命令。

$ npm install
$ npm start

许可证