ant-design-mobile

このスキルを使用するタイミング

ユーザーが次のことを希望する場合は、いつでもこのスキルを使用してください。

• Ant Design Mobile のコンポーネントを使って React モバイルアプリケーションを構築する
• モバイル UI コンポーネント（Button、Form、List、Card、Modal、Tabs など）を使用する
• モバイル固有の機能（プルして更新、無限スクロール、ジェスチャー）を実装する
• CSS 変数を使って Ant Design Mobile のテーマをカスタマイズする
• ConfigProvider を使って国際化を設定する

このスキルの使用方法

ワークフロー

1. インストール - npm install antd-mobile を実行し、CSS をインポートします
2. コンポーネントを選択 - UI のニーズに合ったコンポーネントを以下のリファレンスから選びます
3. サンプルファイルを読み込む - 各コンポーネントの詳細なサンプルは examples/components/ にあります
4. テーマをカスタマイズ - ConfigProvider または CSS 変数を使ってテーマを設定します

クイックスタート例：バリデーション付きモバイルフォーム

import { Button, Form, Input, Toast } from 'antd-mobile';

function LoginForm() {
  const [form] = Form.useForm();

  const onSubmit = async () => {
    const values = await form.validateFields();
    Toast.show({ content: `Welcome, ${values.username}!` });
  };

  return (
    <Form form={form} layout="horizontal" footer={
      <Button block type="submit" color="primary" onClick={onSubmit}>
        Login
      </Button>
    }>
      <Form.Item name="username" label="Username" rules={[{ required: true }]}>
        <Input placeholder="Enter username" />
      </Form.Item>
      <Form.Item name="password" label="Password" rules={[{ required: true }]}>
        <Input type="password" placeholder="Enter password" />
      </Form.Item>
    </Form>
  );
}

コンポーネントのカテゴリ

カテゴリ	コンポーネント	サンプルファイル
ナビゲーション	NavBar, TabBar, Tabs, SideBar	examples/components/nav-bar.md, tabs.md
データ入力	Input, Form, Picker, DatePicker, Switch, Checkbox	examples/components/form.md, picker.md
データ表示	List, Card, Badge, Tag, Avatar, Image	examples/components/list.md, card.md
フィードバック	Modal, Toast, Dialog, ActionSheet, Loading	examples/components/modal.md, toast.md
ジェスチャー	PullToRefresh, InfiniteScroll, Swiper	examples/components/pull-to-refresh.md

API リファレンス

• api/components.md - すべてのコンポーネントの props と API
• api/config-provider.md - グローバル設定とテーマ

ベストプラクティス

1. 最初に CSS をインポートする - エントリーファイルに import 'antd-mobile/es/global' を追加します
2. ConfigProvider でラップする - アプリのルートでロケールとテーマを設定します
3. テーマ設定には CSS 変数を使用する - --adm-color-primary などを上書きして、ブランドに合わせてカスタマイズします
4. インポートをツリーシェイクする - 個別のコンポーネントをインポートします（import { Button } from 'antd-mobile'）。これによりバンドルサイズを小さくできます
5. 実機でテストする - モバイルのタッチ動作は、デスクトップブラウザーのエミュレーションとは異なります

リソース

• 公式ウェブサイト: https://ant-design-mobile.antgroup.com/
• GitHub: https://github.com/ant-design/ant-design-mobile

キーワード

antd-mobile, Ant Design Mobile, React モバイル, モバイル UI, モバイル端末, コンポーネントライブラリ, Button, Form, List, Modal, Tabs, PullToRefresh, InfiniteScroll, Toast, NavBar, TabBar, モバイルコンポーネント