반응형
2021.1.28 (금) +5days
AntDesign
Installation
$ npm install antdUsage
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'Getting Started
import React, { useState } from "react";
import { Alert, DatePicker, message } from "antd";
export default function GetStart() {
const [date, setDate] = useState(null);
const handleChange = (value) => {
message.info(
`Selected Date: ${value ? value.format("YYYY-MM-DD") : "None"}`
);
setDate(value);
};
return (
<div style={{ width: 400, margin: "100px auto" }}>
<DatePicker onChange={handleChange} />
<div style={{ marginTop: 16 }}>
<Alert
message="Selected Date"
description={date ? date.format("YYYY-MM-DD") : "None"}
/>
</div>
</div>
);
}
with create-react-app
https://ant.design/docs/react/use-with-create-react-app
App.css에
@import "~antd/dist/antd.css";
Components
Icon
Semantic vector graphics. Before use icons, you need to install @ant-design/icons package:
npm install --save @ant-design/icons
antd는 자체적으로 아이콘을 지원한다.
import { CameraOutlined } from "@ant-design/icons/lib/icons";
import React from "react";
export default function IconExample() {
return (
<div>
<CameraOutlined />
</div>
);
}API
Typography
Basic text writing, including headings, body text, lists, and more.
import { Space, Typography } from "antd";
import React from "react";
export default function TypographyExample() {
const { Text, Link, Title } = Typography;
return (
<Space direction="vertical">
<Title></Title>
<Text>Ant Design (default)</Text>
<Text type="secondary">Ant Design (secondary)</Text>
<Text type="success">Ant Design (success)</Text>
<Text type="warning">Ant Design (warning)</Text>
<Text type="danger">Ant Design (danger)</Text>
<Text disabled>Ant Design (disabled)</Text>
<Text mark>Ant Design (mark)</Text>
<Text code>Ant Design (code)</Text>
<Text keyboard>Ant Design (keyboard)</Text>
<Text underline>Ant Design (underline)</Text>
<Text delete>Ant Design (delete)</Text>
<Text strong>Ant Design (strong)</Text>
<Text italic>Ant Design (italic)</Text>
<Text editable>Ant Design (editable)</Text>
<Text copyable>Ant Design (copyable)</Text>
<Link href="https://ant.design" target="_blank">
Ant Design (Link)
</Link>
</Space>
);
}Layout
전체 화면 구조를 처리한다.
API
<Layout>
<Header>header</Header>
<Layout>
<Sider>left sidebar</Sider>
<Content>main content</Content>
<Sider>right sidebar</Sider>
</Layout>
<Footer>footer</Footer>
</Layout>
breakpoint width
{
xs: '480px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
xxl: '1600px',
}
Example
Code
import React from "react";
import { Layout, Menu, Breadcrumb } from "antd";
import {
UserOutlined,
LaptopOutlined,
NotificationOutlined,
} from "@ant-design/icons";
const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;
export default function LayoutExample() {
return (
<Layout style={{ height: "100vh" }}>
<Header className="header">
<div
className="logo"
style={{
backgroundColor: "orange",
width: 30,
height: 30,
float: "left",
}}
/>
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={["2"]}>
<Menu.Item key="1">nav 1</Menu.Item>
<Menu.Item key="2">nav 2</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
</Menu>
</Header>
<Content style={{ padding: "0 50px" }}>
<Breadcrumb style={{ margin: "16px 0" }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<Layout
className="site-layout-background"
style={{ padding: "24px 0" }}
>
<Sider className="site-layout-background" width={200}>
<Menu
mode="inline"
defaultSelectedKeys={["1"]}
defaultOpenKeys={["sub1"]}
style={{ height: "100%" }}
>
<SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
<Menu.Item key="1">option1</Menu.Item>
<Menu.Item key="2">option2</Menu.Item>
<Menu.Item key="3">option3</Menu.Item>
<Menu.Item key="4">option4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
<Menu.Item key="5">option5</Menu.Item>
<Menu.Item key="6">option6</Menu.Item>
<Menu.Item key="7">option7</Menu.Item>
<Menu.Item key="8">option8</Menu.Item>
</SubMenu>
<SubMenu
key="sub3"
icon={<NotificationOutlined />}
title="subnav 3"
>
<Menu.Item key="9">option9</Menu.Item>
<Menu.Item key="10">option10</Menu.Item>
<Menu.Item key="11">option11</Menu.Item>
<Menu.Item key="12">option12</Menu.Item>
</SubMenu>
</Menu>
</Sider>
<Content style={{ padding: "0 24px", minHeight: 280 }}>
Content
</Content>
</Layout>
</Content>
<Footer style={{ textAlign: "center" }}>
Ant Design ©2018 Created by Ant UED
</Footer>
</Layout>
);
}Grid
Design concept
Outline
In the grid system, we define the frame outside the information area based on row and column, to ensure that every area can have stable arrangement.
Following is a brief look at how it works:
- Establish a set of column in the horizontal space defined by row (abbreviated col).
- Your content elements should be placed directly in the col, and only col should be placed directly in row.
- The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by <Col span={8} />.
- If the sum of col spans in a row are more than 24, then the overflowing col as a whole will start a new line arrangement.
Our grid systems base on Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using order.
Layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.
Pagination
Checkbox
Table
...
정리
Ant Design
- React ⇒ React 베이스
- Day.js ⇒ Moment.js 제거 추천
- Design 철학 ⇒ 단순한 컴포넌트 제공 + @
- Typography ⇒ 다양한 사이즈의 Text
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다
반응형
댓글