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
许可证
- 源代码受BSD 3-Clause许可
- 所有图标和图片受Creative Commons Attribution-NoDerivatives 4.0许可
- The Salesforce Sans字体受我们的字体许可证