Ant Design

企業級產品的標準語言：從「設計手冊」到「工業級組件」

• 高品質 React 組件庫: 內建超過 60 個開箱即用的高品質組件，涵蓋從基礎按鈕到複雜表格、圖表與導覽架構，完美適配 TypeScript 開發環境。
• 強大的主題自定義 (Design Token): 採用現代化的 CSS-in-JS 技術，開發者可透過配置 Design Tokens 輕鬆調整品牌色、圓角、間距等，實現無縫的樣式自定義。
• 卓越的國際化支援: 原生支援數十種語言，並內建對 RTL（從右到左）佈局的支援，是開發全球化企業軟體的首選框架。

主要功能、特點

• 介紹: Ant Design 是一個服務於企業級產品的設計體系，它不僅提供了一套 React 組件實現，更定義了一套完整的「設計語言」，旨在幫助開發者與設計師建立更高質量的 UI 介面。

• 特色服務:

  • 全方位的設計工具: 提供配套的 Sketch/Figma 設計資源檔案，確保設計稿與最終開發出的頁面達到像素級的同步。
  • 高效能與 Tree-shaking: 支援按需加載（Tree-shaking），確保您的生產環境包（Bundle）僅包含實際使用到的代碼。
  • 無障礙存取 (Accessibility): 嚴格遵循 WAI-ARIA 規範，確保開發出的組件具備良好的螢幕閱讀器相容性。
  • 動態樣式引擎: 支援在不刷新頁面的情況下即時切換「暗黑模式」或「緊湊模式」，滿足不同用戶的視覺需求。

快速啟動範例 (React)

安裝 Ant Design 及其圖標庫：

npm install antd @ant-design/icons

在 React 專案中使用按鈕組件：

import React from 'react';
import { Button, ConfigProvider } from 'antd';

const App = () => (
  <ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
    <Button type="primary">歡迎使用 Ant Design</Button>
  </ConfigProvider>
);

export default App;

產品說明

Ant Design 憑藉著其極其豐富的組件深度（如功能強大的 Table 與 Form）以及穩定的企業級更新節奏，依然是銀行、金融與電商後台開發的標準配備。對於需要「快速交付」且「介面專業」的團隊來說，Ant Design 是最省心的選擇。