Ant Design 範例

使用 Ant Design 元件的範例，廣泛應用於企業級 React 應用程式。

基本下拉選單

使用 Ant Design Select 的簡單國家下拉選單。

Select a country

常用國家置頂

常用國家分組顯示在頂部。

Select a country

可搜尋下拉選單

核心功能！輸入英文即可篩選中文國家名稱。試著輸入「united」來找到美國和英國。

Type in English to filter...

自動完成

使用 Ant Design AutoComplete 的另一種可搜尋元件。

Type in English to filter...

排序選項

可切換筆畫順序、英文字母順序或注音順序排序。

Sort by:

Chinese Stroke Order

Type in English to filter...

國旗開關

切換國旗表情符號的顯示與隱藏。

Show flag emoji

Type in English to filter...

國家白名單

限制只顯示特定國家（例如：亞洲國家）。

Showing only Asian countries (13 countries)

Type in English to filter...

自動完成加白名單

結合白名單功能的自動完成元件。

Showing only Asian countries (13 countries)

Type in English to filter...

程式碼範例

import { useCountryList } from 'use-country-list-zh';
import { Select } from 'antd';

function CountrySelect() {
  const {
    countries,
    query,
    setQuery,
    selectedCountry,
    setSelectedCountry,
    getDisplayText,
  } = useCountryList({
    showFlag: true,
    topList: ['TW', 'US', 'JP'],
  });

  const topCountries = countries.filter((c) => c.isTop);
  const otherCountries = countries.filter((c) => !c.isTop);

  const options = [
    {
      label: 'Popular',
      options: topCountries.map((country) => ({
        value: country.code,
        label: getDisplayText(country),
      })),
    },
    {
      label: 'All Countries',
      options: otherCountries.map((country) => ({
        value: country.code,
        label: getDisplayText(country),
      })),
    },
  ];

  return (
    <Select
      showSearch
      placeholder="Type in English to filter..."
      value={selectedCountry?.code}
      onChange={(value) => setSelectedCountry(value)}
      searchValue={query}
      onSearch={setQuery}
      options={options}
      filterOption={false} // Use hook's filtering
    />
  );
}