接下來兩天我會以我目前較常使用到的設計系統框架做比較，看看主題抽換、格線系統以及組件設計與使用等差別。來感受這幾個框架的優缺，也給未來要選擇使用哪種框架的人參考，看看哪種風格是自己喜歡的。

Design System

Theme - Change and override

顏色與主題的抽換，Ant Design 是以 less 來複寫。

Ant Design Default LESS

Color Palettes

基本的色盤

@primary-color: @blue-6;
@info-color: @primary-color;
@success-color: @green-6;
@processing-color: @blue-6;
@error-color: @red-5;
@highlight-color: @red-5;
@warning-color: @gold-6;
@normal-color: #d9d9d9;
@white: #fff;
@black: #000;

色階的部份直接以數字分階

@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)
@primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
@primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
@primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
...

除了顏色之外，padding等內外距也是透過 less 來 override，官方範例如下：

@btn-padding-horizontal-base: @padding-md - 1px;
@btn-padding-horizontal-lg: @btn-padding-horizontal-base;
@btn-padding-horizontal-sm: @padding-xs - 1px;
...
@border-radius-base: 2px;
...

Layout - Display of content

Grid System

使用 24 格的格線系統，相較於以往的 12 格線系統可以有更細微的差異。我想之所以要切到這麼細是因為亞洲地區的習慣吧，希望資訊可以盡量在畫面中呈現（塞好塞滿）。

<Row>
  <Col span={24}>col</Col>
  <Col xs={{ span: 11 }} lg={{ span: 6 }}>RWD Col</Col>
</Row>

可參閱：Ant Design Grid

Layout

與大多數的切版一樣基本分成 Header Content Footer Sider，如果需要再切分區塊，則用 <Layout> 做區隔，以下是基本Layout的範例

<Layout>
  <Header>Header</Header>
  <Layout>
    <Content>Content</Content>
    <Sider>Sider</Sider>
  </Layout>
  <Footer>Footer</Footer>
</Layout>

切分結果如下：

Font

基本的 header 有五個級距，也都可以透過 less 去做覆寫，並用 level 控制字體大小。

<Title>h1. Ant Design</Title>
<Title level={2}>h2. Ant Design</Title>
<Title level={3}>h3. Ant Design</Title>
<Title level={4}>h4. Ant Design</Title>
<Title level={5}>h5. Ant Design</Title>

另外 Ant Design 的文字樣式算是相當豐富，範例如下。

 <Space direction="vertical">
    <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>
    <Link href="https://ant.design" target="_blank">
      Ant Design (Link)
    </Link>
  </Space>,

可參閱：Ant Design Typography

Components

組件的部分，Ant Design 很多都幫使用者處理好了，大部分情況是只要傳入一個物件，就會幫你整個組件長好長滿。雖然很方便，但也意味著行爲跟邏輯被限制，也曾經遇過在組合的過程中插入到一個<Frament />他就長壞了的情況。

Input

<Input
  addonBefore="http://"
  addonAfter=".com"
  defaultValue="mysite"
  />

基本的設計我覺得滿單純的，也滿接近bootstrap的風格。這點我算喜歡。

Table

Table 的部分我比較不滿意，原因是不能就每個 row 跟 cell 下去處理，讓我還滿不習慣的。如同前面所說，參數的設計上只丟了物件就能產生一個Table，但是為了在 data source 跟 columns 之間做 mapping 又要多指派 dataIndex 這個 key 值，個人覺得有點多餘。

const dataSource = [
  {
    key: '1',
    name: 'Mike',
    age: 32,
    address: '10 Downing Street',
  },
  {
    key: '2',
    name: 'John',
    age: 42,
    address: '10 Downing Street',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

<Table dataSource={dataSource} columns={columns} />;

Message

提示信息的部分我覺得還滿方便的，用方法就可以呼叫提示框

 message.info('This is a normal message');

不過各種客製化也要丟一堆物件進去，覺得和 React 堆積木的感覺差滿多的。

message.success({
    content: 'This is a prompt message with custom className and style',
    className: 'custom-class',
    style: {
      marginTop: '20vh',
    },
  });

小結

Ant Design 的組件以及參數相對來說很豐富，如果有很特別的需求，為求方便真的是個不錯的選擇，幾乎你想得到的他都有實作。只是個人比較不喜歡的部分他在使用上沒有像 Material UI 那種堆積木的感覺，少了很多可以調整的地方。

優點：

• 組件種類豐富。
• 使用上很方便，幫你處理掉很多事情。

缺點：

• 處理太多事情，有時候反而缺乏彈性
• 組件的堆疊有限制，要照著規則去走。
• 樣式一下 jss 控制一下 less 覆寫，缺乏統一管理的一致性。