React. Part2. ch3. 03~05 UI 라이브러리 - Ant Design UI

<React. Part2. ch3. 03>

 

○ 공식 문서 참조의 중요성

  https://ant.design/docs/react/use-with-create-react-app 

  https://ant.design/docs/react/getting-started

 

 -  공식 문서를 잘 참조하면 Use in create-react-app 사용할 경우

    아래 처럼 특정 코드를 추가해야 하는 경우가 잦으니 잘 살펴보고 초기 세팅을 해야 막힘이 없다.

  

   Add antd/dist/antd.css at the top of src/App.css.

@import '~antd/dist/antd.css';

 

 

○ Ant Design

  https://ant.design/docs/spec/introduce

 - UI library 이지만, components만 제공하는 것을 넘어 design을 만드는 철학이 들어있다.

 

○ Ant Components - Icons

  https://ant.design/components/overview/

 - npm install antd 을 했더라도, icons 을 사용하려면 세부 컴포넌트에 대한 install 과정을 거쳐야 한다.

   npm install --save @ant-design/icons

 - 원하는 아이콘 디자인 클릭 > 자동 복사(<ScissorOutlined />) > 코드에 붙여넣기 + import { } from ...

import React from 'react'
import {ScissorOutlined} from '@ant-design/icons'


export default function IconEx1() {
    return (
        <div>
            <ScissorOutlined />
        </div>
    )
}

○ Ant Components - Typoraphy
  https://ant.design/components/typography/

 

 

 

 

<React. Part2. ch3. 04>

○ Ant Components - Layout
  https://ant.design/components/layout/

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 LayoutEx2() {
    return (
        <div>
            {/* Outer Layout */}
            <Layout style={{height: "100vh"}}>
                <Header className="header">
                <div className="logo" style={{backgroundColor:"red", width: 30, height: 30,  float: "left", }}/>
                
                {/* 헤더 사이드바 */}
                <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
                    <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>

                {/* Inner Layout */}
                <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>
        </div>
    )
}

// #components-layout-demo-top-side .logo {
//     float: left;
//     width: 120px;
//     height: 31px;
//     margin: 16px 24px 16px 0;
//     background: rgba(255, 255, 255, 0.3);
//   }
  
//   .ant-row-rtl #components-layout-demo-top-side .logo {
//     float: right;
//     margin: 16px 0 16px 24px;
//   }
  
//   .site-layout-background {
//     background: #fff;
//   }

 

○ Ant Components - Grid
  https://ant.design/components/grid/

 

○ Ant Components - Pagination
  https://ant.design/components/pagination/

 

○ Ant Components - Table
  https://ant.design/components/table/

 

○ Ant Components - Pagination
  https://ant.design/components/pagination/

 

<React. Part2. ch3. 05>

○ Ant Components - Modal
  https://ant.design/components/layout/

import React from 'react'

import { Modal, Button } from 'antd';

export default function ModalEx1() {
  const [visible, setVisible] = React.useState(false);
  const [confirmLoading, setConfirmLoading] = React.useState(false);
  const [modalText, setModalText] = React.useState('Content of the modal');

  const showModal = () => {
    setVisible(true);
    setModalText('Content of the modal');
  };

  const handleOk = () => {
    setModalText('The modal will be closed after two seconds');
    setConfirmLoading(true);
    setTimeout(() => {
      setVisible(false);
      setConfirmLoading(false);
    }, 2000);
  };

  const handleCancel = () => {
    console.log('Clicked cancel button');
    setVisible(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal with async logic
      </Button>
      <Modal
        title="Title"
        visible={visible}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
      >
        <p>{modalText}</p>
      </Modal>
    </>
  );
};

 

 

○ Ant Components - Modal
  https://ant.design/components/layout/