React漫漫學習路之 Ant Design 的使用

ANT DESIGN是由螞蟻金服體驗技術部出品的一個UI組件庫。

先來看看官方介紹：在企業級產品的研發過程中，會出現不同的設計規范和實現方式，但其中往往存在很多類似的頁面和組件，給設計師和工程師帶來很多困擾和重復建設，大大降低了產品的研發效率。我們經過大量的項目實踐和總結，沉淀出一個企業級的 Web 設計指引。旨在統一企業級產品的前端 UI 設計，屏蔽不必要的設計差異和實現成本，解放設計和前端的研發資源。

目前分為基於React實現的web組件庫--Ant Design of React和H5組件庫AlipayUI of React。本文只討論web組件庫--Ant Design of React中的TimePicker的使用，拋磚引玉，更多組件信息，請訪問官網介紹Ant Design of React。

安裝

 $ npm install antd 

 

引入樣式

 import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' 

 

示例

TimePicker時間選擇框

基本的時間選擇框

 

import { TimePicker } from 'antd';

class Demo extends React.Component {
  state = {
    value: null,
  };

  onChange = (time) => {
    console.log(time);
    this.setState({ value: time });
  }

  render() {
    return <TimePicker value={this.state.value} onChange={this.onChange} />;
  }
}

 

選擇時分

TimePicker 浮層中的列會隨着 format 變化，當略去 format 中的某部分時，浮層中對應的列也會消失。

 

import { TimePicker } from 'antd';
import moment from 'moment';

const format = 'HH:mm';

ReactDOM.render(
  <TimePicker defaultValue={moment('12:08', format)} format={format} />
, mountNode);

 

tips

TimePicker組件的value值為moment類型，在使用默認值（例如從服務器獲取的字符串數值‘21:30’）需導入moment依賴：

import moment from 'moment';
<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />

 

更多功能如禁用部分選項、禁用整個控件以及在TimePicker 選擇框底部顯示自定義的內容等請訪問完整API。