目錄
一：什么是Ant Design？
二：開始使用
三：布局
四：表格
一：什么是Ant Design？
? ? ? ? Ant Design是阿里螞蟻金服團隊基于React開發(fā)的ui組件，主要用于中后臺系統(tǒng)的使用。
? ? ? ? 官網(wǎng)：https://ant.design/index-cn
?
設(shè)計語言：隨著商業(yè)化的趨勢，越來越多的企業(yè)級產(chǎn)品對更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目 標，我們（螞蟻金服體驗技術(shù)部）經(jīng)過大量的項目實踐和總結(jié)，逐步打磨出一個服務(wù)于企業(yè)級產(chǎn)品的設(shè)計體系 Ant Design 。基于『確定』和『自然』的設(shè)計價值觀，通過模塊化的解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計者專注于更好的用戶體驗。
特性：
- 提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風(fēng)格。
- 開箱即用的高質(zhì)量 React 組件。
- 使用 TypeScript 構(gòu)建，提供完整的類型定義文件。
- 全鏈路開發(fā)和設(shè)計工具體系。
二：開始使用
引入 Ant Design
? ? ? ? ? Ant Design
是一個服務(wù)于企業(yè)級產(chǎn)品的設(shè)計體系，組件庫是它的
React
實現(xiàn)，
antd
被發(fā)布為一個
npm
包方便開 發(fā)者安裝并使用。
? ? ? ? ? 在
umi
中，你可以通過在插件集
umi-plugin-react
中配置
antd
打開
antd
插件，
antd
插件會幫你引入
antd
并實現(xiàn)按需編譯。
在
confifig.js
文件中進行配置：
export default {
plugins: [
['umi-plugin-react', {
dva: true, // 開啟dva功能
antd: true // 開啟Ant Design功能
}]
]
};小試牛刀
? ? ?接下來，我們開始使用
antd
的組件，以
tabs
組件為例，地址
https://ant.design/components/tabs-cn/
效果：
?看下官方給出的使用示例：
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
function callback(key) {
console.log(key);
}
ReactDOM.render(
<Tabs defaultActiveKey="1" onChange={callback}>
<TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
</Tabs>,
mountNode);
下面我們參考官方給出的示例，進行使用：
創(chuàng)建
MyTabs.js
文件：
import React from 'react'
import {Tabs} from 'antd'
const TabPane = Tabs.TabPane;
const callback = (key) => {
console.log(key);
}
class MyTabs extends React.Component {
render() {
return (
<Tabs defaultActiveKey="1" onChange={callback}>
<TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
</Tabs>
)
}
}
export default MyTabs;
效果：
? ? ? ?到此，我們已經(jīng)掌握了antd組件的基本使用。
三：布局
? ? ? ?antd
布局：
https://ant.design/components/layout-cn/
? ? ? ?在后臺系統(tǒng)頁面布局中，往往是經(jīng)典的三部分布局，像這樣：
下面，我們通過antd組件來完成這個布局。
組件概述
- Layout ：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
- Header ：頂部布局，自帶默認樣式，其下可嵌套任何元素，只能放在 Layout 中。
- Sider ：側(cè)邊欄，自帶默認樣式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。
- Content ：內(nèi)容部分，自帶默認樣式，其下可嵌套任何元素，只能放在 Layout 中。
- Footer ：底部布局，自帶默認樣式，其下可嵌套任何元素，只能放在 Layout 中。
搭建整體框架
? ?在
src
目錄下創(chuàng)建
layouts
目錄，并且在
layouts
目錄下創(chuàng)建
index.js
文件，寫入內(nèi)容：
import React from 'react'
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
class BasicLayout extends React.Component{
render(){
return (
<Layout>
<Sider>Sider</Sider>
<Layout>
<Header>Header</Header>
<Content>Content</Content>
<Footer>Footer</Footer>
</Layout>
</Layout>
);
}
}
export default BasicLayout;? ? ?需要特別說明的是，在 umi 中約定的目錄結(jié)構(gòu)中， layouts/index.js 文件將被作為全局的布局文件。
接下來，配置路由：（非必須）
confifig.js
文件：
export default {
plugins: [
['umi-plugin-react', {
dva: true, // 開啟dva功能
antd: true // 開啟Ant Design功能
}]
],
routes: [{
path: '/',
component: '../layouts' //配置布局路由
}]
};
進行頁面訪問：
?可以看到，布局已經(jīng)生成，只是樣式優(yōu)點丑。
子頁面使用布局
? ? ? ? ? ?前面所定義的布局是全局布局，那么，在子頁面中如何使用這個全局布局呢？
? ? ? ? ? ?首先，需要在布局文件中，將
Content
內(nèi)容替換成
{this.props.children}
，意思是引入傳遞的內(nèi)容。
import React from 'react'
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
class BasicLayout extends React.Component{
render(){
return (
<Layout>
<Sider>Sider</Sider>
<Layout>
<Header>Header</Header>
<Content>{this.props.children}</Content>
<Footer>Footer</Footer>
</Layout>
</Layout>
);
}
}
export default BasicLayout;
接下來配置路由（注意，在布局路由下面進行配置）：
? ? ? ? ? ? ?說明：下面的路由配置，是表明你需要通過手動配置的方式上進行訪問頁面，而不采用 umi 默認的路由方式。
export default {
plugins: [
['umi-plugin-react', {
dva: true, // 開啟dva功能
antd: true // 開啟Ant Design功能
}]
],
routes: [{
path: '/',
component: '../layouts', //配置布局路由
routes: [ //在這里進行配置子頁面
{
path: '/myTabs',
component: './myTabs'
}
]
}]
};
進行訪問測試：
?可以看到，在MyTabs組件中已經(jīng)應(yīng)用了全局的布局。其他子頁面也就同理了。
美化頁面
接下來，對頁面做一些美化的工作：
import React from 'react'
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
class BasicLayout extends React.Component{
render(){
return (
<Layout>
<Sider width={256} style={{ minHeight: '100vh', color: 'white' }}>
Sider
</Sider>
<Layout>
<Header style={{ background: '#fff', textAlign: 'center', padding:
0 }}>Header</Header>
<Content style={{ margin: '24px 16px 0' }}>
<div style={{ padding: 24, background: '#fff', minHeight: 360
}}>
{this.props.children}
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>后臺系統(tǒng) ?2022 Created by 大唐霸業(yè)</Footer>
</Layout>
</Layout>
);
}
}
export default BasicLayout;
效果：
?
引入導(dǎo)航條
? ? ?使用
Menu
組件作為導(dǎo)航條：
https://ant.design/components/menu-cn/
import React from 'react'
import {Layout, Menu, Icon} from 'antd';
const {Header, Footer, Sider, Content} = Layout;
const SubMenu = Menu.SubMenu;
class BasicLayout extends React.Component {
constructor(props){
super(props);
this.state = {
collapsed: false,
}
}
render() {
return (
<Layout>
<Sider width={256} style={{minHeight: '100vh', color: 'white'}}>
<div style={{ height: '32px', background: 'rgba(255,255,255,.2)',
margin: '16px'}}/>
<Menu
defaultSelectedKeys={['2']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
inlineCollapsed={this.state.collapsed}
>
<Menu.Item key="1">
<Icon type="pie-chart"/>
<span>Option 1</span>
</Menu.Item>
<Menu.Item key="2">
<Icon type="desktop"/>
<span>Option 2</span>
</Menu.Item>
<Menu.Item key="3">
<Icon type="inbox"/>
<span>Option 3</span>
</Menu.Item>
<SubMenu key="sub1" title={<span><Icon type="mail"/>
<span>Navigation One</span></span>}>
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="appstore"/>
<span>Navigation Two</span></span>}>
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</SubMenu>
</Menu>
</Sider>
<Layout>
<Header style={{background: '#fff', textAlign: 'center', padding:
0}}>Header</Header>
<Content style={{margin: '24px 16px 0'}}>
<div style={{padding: 24, background: '#fff', minHeight: 360}}>
{this.props.children}
</div>
</Content>
<Footer style={{textAlign: 'center'}}>后臺系統(tǒng) ?2018 Created by 大唐霸業(yè)</Footer>
</Layout>
</Layout>
);
}
}
export default BasicLayout;
效果：
?
為導(dǎo)航添加鏈接
? ? ? ? ?下面，我們對左側(cè)的導(dǎo)航條添加鏈接，點擊相應(yīng)的鏈接在右側(cè)進行相應(yīng)頁面的顯示。
? ? ? ? ? 在
src
目錄下創(chuàng)建
user
目錄，并且在
user
目錄下創(chuàng)建
UserAdd.js
和
UserList.js
文件，用于模擬實現(xiàn)新增用戶和查詢用戶列表功能。
?
UserAdd.js
：
import React from 'react'
class UserAdd extends React.Component{
render(){
return (
<div>新增用戶</div>
);
}
}
export default UserAdd;
UserList.js
：
import React from 'react'
class UserList extends React.Component{
render(){
return (
<div>用戶列表</div>
);
}
}
export default UserList;
接下來，配置路由：
export default {
plugins: [
['umi-plugin-react', {
dva: true, // 開啟dva功能
antd: true // 開啟Ant Design功能
}]
],
routes: [{
path: '/',
component: '../layouts', //配置布局路由
routes: [
{
path: '/myTabs',
component: './myTabs'
},
{
path: '/user',
routes: [
{
path: '/user/list',
component: './user/UserList'
},
{
path: '/user/add',
component: './user/UserAdd'
}
]
}
]
}]
};
為菜單添加鏈接：
import React from 'react'
import {Layout, Menu, Icon} from 'antd';
import Link from 'umi/link';
const {Header, Footer, Sider, Content} = Layout;
const SubMenu = Menu.SubMenu;
class BasicLayout extends React.Component {
constructor(props){
super(props);
this.state = {
collapsed: false,
}
}
render() {
return (
<Layout>
<Sider width={256} style={{minHeight: '100vh', color: 'white'}}>
<div style={{ height: '32px', background: 'rgba(255,255,255,.2)',
margin: '16px'}}/>
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
inlineCollapsed={this.state.collapsed}
>
<SubMenu key="sub1" title={<span><Icon type="user"/><span>用戶管
理</span></span>}>
<Menu.Item key="1">
<Link to="/user/list">用戶列表</Link>
</Menu.Item>
<Menu.Item key="2">
<Link to="/user/add">新增用戶</Link>
</Menu.Item>
</SubMenu>
</Menu>
</Sider>
<Layout>
<Header style={{background: '#fff', textAlign: 'center', padding:
0}}>Header</Header>
<Content style={{margin: '24px 16px 0'}}>
<div style={{padding: 24, background: '#fff', minHeight: 360}}>
{this.props.children}
</div>
</Content>
<Footer style={{textAlign: 'center'}}>后臺系統(tǒng) ?2018 Created by 大唐霸業(yè)</Footer>
</Layout>
</Layout>
);
}
}
export default BasicLayout;注意：這里使用了 umi 的 link 標簽，目的是出現(xiàn)記錄點擊的菜單。
測試：
?
四：表格
基本用法
參考官方文檔進行實現(xiàn)：
https://ant.design/components/table-cn/
改造
UserList.js
頁面：
import React from 'react'
import {Table, Divider, Tag, Pagination } from 'antd';
const {Column} = Table;
const data = [{
key: '1',
name: '張三',
age: 32,
address: '上海市',
tags: ['程序員', '帥氣'],
}, {
key: '2',
name: '李四',
age: 42,
address: '北京市',
tags: ['屌絲'],
}, {
key: '3',
name: '王五',
age: 32,
address: '杭州市',
tags: ['高富帥', '富二代'],
}];
class UserList extends React.Component {
render() {
return (
<div>
<Table dataSource={data} pagination=
{{position:"bottom",total:500,pageSize:10, defaultCurrent:3}}>
<Column
title="姓名"
dataIndex="name"
key="name"
/>
<Column
title="年齡"
dataIndex="age"
key="age"
/>
<Column
title="地址"
dataIndex="address"
key="address"
/>
<Column
title="標簽"
dataIndex="tags"
key="tags"
render={tags => (
<span>
{tags.map(tag => <Tag color="blue" key={tag}>{tag}
</Tag>)}
</span>
)}
/>
<Column
title="操作"
key="action"
render={(text, record) => (
<span>
<a href="javascript:;">編輯</a>
<Divider type="vertical"/>
<a href="javascript:;">刪除</a>
</span>
)}
/>
</Table>
</div>
);
}
}
export default UserList;
實現(xiàn)效果：
?
將數(shù)據(jù)分離到 model 中
model
的實現(xiàn)：
UserListData.js
import request from "../util/request";
export default {
namespace: 'userList',
state: {
list: []
},
effects: {
*initData(params, sagaEffects) {
const {call, put} = sagaEffects;
const url = "/ds/user/list";
let data = yield call(request, url);
yield put({
type : "queryList",
data : data
});
}
},
reducers: {
queryList(state, result) {
let data = [...result.data];
return { //更新狀態(tài)值
list: data
}
}
}
}
修改
UserList.js
中的邏輯：
import React from 'react';
import { connect } from 'dva';
import {Table, Divider, Tag, Pagination } from 'antd';
const {Column} = Table;
const namespace = 'userList';
@connect((state)=>{
return {
data : state[namespace].list
}
}, (dispatch) => {
return {
initData : () => {
dispatch({
type: namespace + "/initData"
});
}
}
})
class UserList extends React.Component {
componentDidMount(){
this.props.initData();
}
render() {
return (
<div>
<Table dataSource={this.props.data} pagination=
{{position:"bottom",total:500,pageSize:10, defaultCurrent:3}}>
<Column
title="姓名"
dataIndex="name"
key="name"
/>
<Column
title="年齡"
dataIndex="age"
key="age"
/>
<Column
title="地址"
dataIndex="address"
key="address"
/>
<Column
title="標簽"
dataIndex="tags"
key="tags"
render={tags => (
<span>
{ tags.map(tag => <Tag color="blue" key={tag}>{tag}
</Tag>)}
</span>
)}
/>
<Column
title="操作"
key="action"
render={(text, record) => (
<span>
<a href="javascript:;">編輯</a>
<Divider type="vertical"/>
<a href="javascript:;">刪除</a>
</span>
)}
/>
</Table>
</div>
);
}
}
export default UserList;
mock
數(shù)據(jù)：
MockListData.js
export default {
'get /ds/list': function (req, res) {
res.json({
data: [1, 2, 3, 4],
maxNum: 4
});
},
'get /ds/user/list': function (req, res) {
res.json([{
key: '1',
name: '張三1',
age: 32,
address: '上海市',
tags: ['程序員', '帥氣'],
}, {
key: '2',
name: '李四',
age: 42,
address: '北京市',
tags: ['屌絲'],
}, {
key: '3',
name: '王五',
age: 32,
address: '杭州市',
tags: ['高富帥', '富二代'],
}]);
}
}
測試結(jié)果：
文章來源：http://www.zghlxwxcb.cn/news/detail-781786.html
?
文章來源地址http://www.zghlxwxcb.cn/news/detail-781786.html
到了這里，關(guān)于Ant Design入門的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
