Ant Design: Form

>>[Wstępny zarys/szkielet]<<

Tworzenie projektu przy pomocy CRA + instalacja ANTD

Ant Design jest biblioteką do stylowania komponentów Reactowych (współpracuje również z VUE oraz Angularem (NG-ZORRO)) utrzymywana przez Grupę Alibaba

Stworzenie projektu

npx create-react-app antd_form

Dodanie zależności -> antd

npm add antd

Zaimportowanie do App.js odpowiedniego komponentu oraz CSS do App.css

// App.css - dodanie 1 linijki treści na samej górze
@import '~antd/dist/antd.css';
[...]

Zaimportowanie komponentu oraz jego zastosowanie

//App.js
import { Button } from 'antd';
import './App.css';

function App() {
  return (
    <div>
      <Button type="primary">Button</Button>
    </div>
  );
}

export default App;

ANT DESIGN PRO

ANT DESIGN PRO jest biblioteką UI należącą do ANT DESIGN reklamującą się jako rozwiązanie dla projektów komercyjnych (przedsiębiorczych/enterprise), ale z dalszego jej opisu możemy się dowiedzieć, że została stworzona pod kątem interfejsów adminowskich.

Pozycjonowanie elementów

Siatka - Grid

System/Pole jest podzielony na 24 sekcje/kolumny (nazwane 'box')

1 - należy zdefiniować zestaw kolumn oraz zdefiniować rząd:

  <Row>
      <Col span={12}>col-12</Col>
      <Col span={12}>col-12</Col>
  </Row>

2 - siatka/grid jest oparta o display: flex

3 - istnieje możliwość zdefiniowania odstępów/gutter -> <Row gutter={16}>

4 - offset/odsunięcie również jest definiowane w nawiązaniu do sekcji/kolumn <Col span={8} offset={8}>

5 - Nawiązując (parafrazując) do właściwości flexboxa istnieje możliwość ułożenie "dzieci" w poziomie wykorzystując właściwość align

<Row justify="start"> / <Row justify="space-between"> / <Row justify="center">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
</Row>

6- ułożenie dzieci w pionie wykorzystuje właściwość align

<Row justify="space-around" align="middle">
      <Col span={4}>
      </Col>
</Row>

7 - istnieje możliwość wypełnienie całości stosując właściwość flex oraz definiowania relacji pomiędzy obiektami

<Row>
      <Col flex={2}>2 / 5</Col>
      <Col flex={3}>3 / 5</Col>
</Row>

8 - można również wykorzystać wartości znane z bootstrapa

See the Pen Playground - antd@4.9 by Mikołaj Kostyrko (@mkostyrko) on CodePen.

Źródła:

Ant Design - Form

SO - Correctly creating an antd Form using the extends React.Component mechanism

Code with Bibek - React Ant Design Project - Tech Website

Redux Form + antd

Use Form of Ant Design V4 in React Hooks

Chinese Material Design This Chinese Design Language will Make You Want to Switch.

YT

Coding the World - 1 - Getting Started - Building a Contact Management System With React and Ant Design Library

Code with Bibek - React Ant Design Project - Tech Website