Meteor + ReactJS 學習筆記(三)使用 Salesforce Lightning Design System

除了上一篇 Meteor + ReactJS 學習筆記(二)使用 Semantic UI 所介紹的 Semantic UI,也可以選擇 Salesforce 所開發的 Salesforce Lightning Design System   來作為 ReactJS Web 應用中的 UI 元件。要讓 Meteor + ReactJS 搭配使用 Lighting Design System 有兩種方法,一種是直接使用官方的 design-system-react ,另一個方法是使用 Propertybase 這家公司基於官方的 Salesforce Lighting Design System  所開發的   React LDS 。

使用官方 Salesforce Lightning Design System for React

Step 1: 建立一個 Meteor + ReactJS project

meteor create --react meteor-slds-demo
cd meteor-slds-demo

Step 2: 安裝 Salesforce Lightning Design System for React

meteor npm install --save @salesforce-ux/design-system @salesforce/design-system-react 

Step 3: 複製 CSS 檔

cp node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css client/

Step 4: 複製 Lightning Design System 所需要的圖示及字型檔

mkdir public
cp -r node_modules/@salesforce-ux/design-system/assets/icons public/
cp -r node_modules/@salesforce-ux/design-system/assets/fonts public/

Step 5: 使用方式範例

必須在 client/main.jsx 中引入 salesforce-lightning-design-system.min.css
於 client/main.jsx 一開頭,加入以下程式碼

client/main.jsx
import "./salesforce-lightning-design-system.min.css";

可使用元件及範例可參考官方網站的說明文件
以下是使用 Icon Button 的範例

imports/ui/App.jsx
import React from "react";
import { Button, IconSettings } from "@salesforce/design-system-react";
const App = () => (
<div>
<IconSettings iconPath="/icons">
<Button
iconCategory="utility"
iconName="download"
iconPosition="left"
label="Click Me"
/>
</IconSettings>
</div>
);
export default App;

Step 6: 啟動 meteor 專案

meteor

於瀏覽器瀏覽 http://localhost:3000 會得到以下使用 Button UI 的畫面

使用 Propertybase React Lightning Design System

Step 1: 建立一個 Meteor + ReactJS project

meteor create --react meteor-plds-demo
cd meteor-plds-demo

Propertybase React Lightning Design System 跑在 Meteor 1.8.1 之前的版本會有些問題,所以需要把 Meteor 升級到至少 1.8.2 版,升級的指令如下(目前(2019/09) 1.8.2 還只有 beta 版)

meteor update --release 1.8.2-beta.16

Step 2: 安裝相關模組

meteor npm install --save react-dom moment moment-timezone moment-range
meteor npm install --save react-lds

Step 3: 複製 CSS 檔

cp node_modules/react-lds/react-lds/assets/styles/salesforce-lightning-design-system.min.css client/

Step 4: 複製 Lightning Design System 所需要的圖示及字型檔

mkdir public
cp -r node_modules/react-lds/react-lds/assets/icons public/
cp -r node_modules/react-lds/react-lds/assets/fonts public/

Step 5: 使用方式範例

必須在 client/main.jsx 中引入 salesforce-lightning-design-system.min.css
於 client/main.jsx 一開頭,加入以下程式碼

client/main.jsx
import "./salesforce-lightning-design-system.min.css";

可使用元件及範例可參考官方網站的說明文件
以下是使用 Icon Button 的範例

imports/ui/App.jsx
import React from "react";
import { Button, Badge } from "react-lds";
import AssetPathProvider from "./AssetPathProvider.jsx";
const App = () => (
<div>
<h1>Welcome to Meteor!</h1>
<AssetPathProvider>
<Button icon="download" sprite="utility" title="Hover Me">
Click Me
</Button>
<Badge theme="warning">1234</Badge>
</AssetPathProvider>
</div>
);
export default App;

imports/ui/AssetPathProvider.jsx
import { Component } from "react";
import React from "react";
import PropTypes from "prop-types";
class AssetPathProvider extends Component {
getChildContext() {
return {
assetBasePath: "assets/"
};
}
render() {
const { children } = this.props;
return <div>{children}</div>;
}
}
AssetPathProvider.propTypes = {
children: PropTypes.node.isRequired
};
AssetPathProvider.childContextTypes = {
assetBasePath: PropTypes.string
};
export default AssetPathProvider;

Step 6: 啟動 meteor 專案

meteor

於瀏覽器瀏覽 http://localhost:3000 會得到以下使用 Button UI 的畫面

Facebook Comments