將 Ant Design 與 React 結合使用的綜合指南

Ant Design (AntD) 是一個受歡迎的設計系統和 React UI 元件庫。它提供了一組高品質、預先設計和可自訂的 UI 元件，用於在 React 應用程式中建立優雅且用戶友好的介面。 Ant Design 遵循 Material Design 原則，為現代 Web 應用程式提供一致且有凝聚力的設計語言。

Ant Design 的主要特點：

1. 全面的元件庫：Ant Design 提供了廣泛的元件，例如按鈕、輸入、表單、模態框、表格、日期選擇器等。這些組件的設計重點是易用性和一致的樣式。

2. 可自訂：Ant Design 透過主題提供自訂選項，讓您調整顏色、字體、間距等樣式。您可以使用內建主題或對其進行自訂以適合您專案的品牌。

3. 響應式設計：Ant Design 中的元件預設是響應式的，可以輕鬆建立適合行動裝置的佈局。 Ant Design 提供了諸如網格系統之類的實用程式來幫助您組織跨不同螢幕尺寸的佈局。

4. 國際化（i18n）：Ant Design 支援國際化，並為元件提供內建的多語言支援，包括日期格式、數位格式等。

5. 輔助功能：Ant Design 組件在設計時考慮了輔助功能，為殘障使用者提供鍵盤導航和螢幕閱讀器支援。

6. 豐富的生態系：Ant Design 還包含一套工具和庫，例如Ant Design Pro（企業應用的鷹架）和Ant Design用於可視化資料表示的圖表。

7. TypeScript 支援：Ant Design 提供了出色的 TypeScript 支持，確保更好的類型安全性並增強開發者體驗。

8. 設計指南：Ant Design 遵循一套清晰的設計原則和模式來創建統一一致的使用者體驗。對於想要在應用程式中保持一致外觀的開發人員來說，它是理想的選擇。

如何在 React 中開始使用 Ant Design：

1. 在 React 中安裝 Ant Design

要安裝Ant Design，請使用npm或yarn將其新增至您的React專案。

npm install antd

然後，在 index.js 或 App.js 中匯入 CSS 檔案來套用 Ant Design 的全域樣式：

npm install antd

2. 在 React 中使用 Ant Design 元件

Ant Design 安裝完成後，您就可以開始使用它的組件了。以下是一些例子：

範例1：螞蟻設計鈕

import 'antd/dist/antd.css';

1. 建立 craco.config.js 檔案：

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

function App() {
  return (
    <div>



<p>In this example, we import the Button component from antd and use it in our React component. You can easily change the button type (primary, danger, default, etc.) and apply additional styling or functionality.</p>

<h5>
  
  
  Example 2: Ant Design Grid System
</h5>

<p>Ant Design comes with a flexible grid system that makes it easy to create responsive layouts. Here's an example of a responsive layout using Ant Design’s Row and Col components:<br>
</p>

<pre class="brush:php;toolbar:false">import React from 'react';
import { Row, Col } from 'antd';

function App() {
  return (
    <div>



<p>In this example:</p>

<ul>
<li>
Row is used to define a flex container for the columns.</li>
<li>
Col is used to define individual columns.</li>
<li>The gutter prop adds space between the columns.</li>
<li>The xs, sm, and md props make the layout responsive across different screen sizes.</li>
</ul>

<h5>
  
  
  Example 3: Ant Design Modal
</h5>

<p>Ant Design's Modal component allows you to easily create modal dialogs.<br>
</p>

<pre class="brush:php;toolbar:false">import React, { useState } from 'react';
import { Button, Modal } from 'antd';

function App() {
  const [visible, setVisible] = useState(false);

  const showModal = () => setVisible(true);
  const hideModal = () => setVisible(false);

  return (
    <div>



<p>In this example, we use useState to control the visibility of the modal. The Button triggers the modal, and Modal displays the dialog with an <strong>OK</strong> and <strong>Cancel</strong> button.</p>

<h4>
  
  
  3. <strong>Customizing the Ant Design Theme</strong>
</h4>

<p>Ant Design allows you to customize its default theme to fit your project’s branding by modifying variables.</p>

<h5>
  
  
  Example: Customizing Button Color
</h5>

<p>You can use a <strong>Less</strong> file to modify Ant Design’s default theme. To do this, you'll need to configure your webpack or use tools like <strong>Create React App</strong> with <strong>craco</strong> or <strong>customize-cra</strong>.</p>

<ol>
<li>Install <strong>craco</strong>:
</li>
</ol>

<pre class="brush:php;toolbar:false">   npm install @craco/craco

這會將 Ant Design 元件（例如按鈕）的主色變更為 #1DA57A。

4. 使用 Ant Design 圖示

Ant Design 提供了大量 SVG 圖示 來增強應用程式的 UI。您可以直接在組件中使用它們。

   module.exports = {
     style: {
       less: {
         modifyVars: {
           '@primary-color': '#1DA57A',
         },
         javascriptEnabled: true,
       },
     },
   };

然後，匯入並使用圖示：

從'react'導入React；
從'antd'導入{按鈕}；
從 '@ant-design/icons' 導入 { SmileOutlined }；

函數應用程式（）{
  返回 （
    <div>



<p>在此範例中，我們使用 @ant-design/icons 套件中的 SmileOutlined 圖示並將其新增至 Button 元件中。 </p>

<h3>
  
  
  結論
</h3>

<p>Ant Design 是一個強大而全面的設計系統，提供了一組廣泛的 UI 元件，用於建立現代的、響應式的 React 應用程式。它的可自訂性、輔助功能和一致的設計原則使其成為那些想要創建精美、用戶友好的介面而又不想在設計上花費太多時間的開發人員的絕佳選擇。 </p>

<p>憑藉對國際化的內建支援、響應式網格系統和輕鬆定制，Ant Design 是創建企業級應用程式或小型專案的絕佳工具。 </p>


          </div>

            
        

以上是將 Ant Design 與 React 結合使用的綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！