ant-design-mini

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

次のような場合は、このスキルを使用してください。

• Ant Design Mini コンポーネントを使用して、Alipay または WeChat のミニプログラム UI を構築する
• ミニプログラムでフォーム、データ表示、フィードバック、ナビゲーションのコンポーネントを使用する
• CSS 変数を使って Ant Design Mini のテーマをカスタマイズする
• ミニプログラム環境でコンポーネントのイベントとライフサイクルを処理する

このスキルの使用方法

クイックスタートの例：ミニプログラムでのボタンとフォーム

<ant-button type="primary" onTap="handleClick">Submit</ant-button>

<ant-form onFinish="onFormFinish">
  <ant-form-item label="Name" name="name" required="{{true}}">
    <ant-input placeholder="Enter your name" />
  </ant-form-item>
  <ant-form-item label="Phone" name="phone">
    <ant-input type="number" placeholder="Enter phone" />
  </ant-form-item>
  <ant-button type="primary" form-type="submit">Submit</ant-button>
</ant-form>

// pages/index/index.js
Page({
  handleClick() { my.showToast({ content: 'Clicked!' }); },
  onFormFinish(values) { console.log('Form values:', values); }
});

このスキルは、Ant Design Mini の公式ドキュメントの構成（https://ant-design-mini.antgroup.com/guide/quick-start, https://ant-design-mini.antgroup.com/components/overview）に沿って整理されています。Ant Design Mini を使用する際は、次の手順に従ってください。

1. ユーザーのリクエストからトピックを特定します。

   • はじめに／クイックスタート → examples/getting-started.md
   • コンポーネント／コンポーネント → examples/components/
   • API／API ドキュメント → api/

2. examples/ ディレクトリから適切なサンプルファイルを読み込みます。

   はじめに（クイックスタート）：

   • examples/getting-started.md - インストールとセットアップ
   • examples/quick-start.md - クイックスタートガイド

   コンポーネント：

   • examples/components/overview.md - コンポーネントの概要
   • examples/components/button.md - Button コンポーネント
   • examples/components/input.md - Input コンポーネント
   • examples/components/form.md - Form コンポーネント
   • examples/components/list.md - List コンポーネント
   • examples/components/card.md - Card コンポーネント
   • examples/components/toast.md - Toast コンポーネント
   • examples/components/modal.md - Modal コンポーネント
   • examples/components/tabs.md - Tabs コンポーネント
   • examples/components/nav-bar.md - NavBar コンポーネント
   • examples/components/picker.md - Picker コンポーネント
   • examples/components/date-picker.md - DatePicker コンポーネント
   • examples/components/switch.md - Switch コンポーネント
   • examples/components/checkbox.md - Checkbox コンポーネント
   • examples/components/radio.md - Radio コンポーネント
   • examples/components/stepper.md - Stepper コンポーネント
   • examples/components/avatar.md - Avatar コンポーネント
   • examples/components/badge.md - Badge コンポーネント
   • examples/components/tag.md - Tag コンポーネント
   • examples/components/empty.md - Empty コンポーネント
   • examples/components/loading.md - Loading コンポーネント
   • examples/components/popup.md - Popup コンポーネント
   • examples/components/action-sheet.md - ActionSheet コンポーネント

3. 構文、構成、ベストプラクティスについては、サンプルファイル内の個別の指示に従います。

   重要な注意事項：

   • Ant Design Mini は Alipay ミニプログラムと WeChat ミニプログラム向けです
   • コンポーネントではミニプログラムの構文（axml/json）を使用します
   • サンプルには Alipay と WeChat の両方の構文が含まれています
   • 各サンプルファイルには、主要な概念、コード例、要点が含まれています

4. 必要に応じて、api/ ディレクトリの API ドキュメントを参照します。

   • api/component-api.md - コンポーネント API リファレンス
   • api/props-and-events.md - Props とイベントのリファレンス

5. templates/ ディレクトリのテンプレートを使用します。

   • templates/installation.md - インストール用テンプレート
   • templates/component-usage.md - コンポーネント使用用テンプレート

1. Ant Design Mini について

Ant Design Mini は、Ant Design のデザイン仕様に準拠した、Alipay ミニプログラムおよび WeChat ミニプログラム向けの UI コンポーネントライブラリです。

主な概念：

• ミニプログラムのサポート：Alipay と WeChat のミニプログラム
• デザインシステム：Ant Design のデザイン言語に準拠
• 豊富なコンポーネント：Button、Form、List、Modal など
• テーマのカスタマイズ：テーマのカスタマイズに対応
• i18n：国際化に対応

2. インストール

npm を使用する場合：

npm install antd-mini

yarn を使用する場合：

yarn add antd-mini

pnpm を使用する場合：

pnpm add antd-mini

3. 基本設定

// app.json (Alipay Mini Program)
{
  "usingComponents": {
    "ant-button": "antd-mini/es/Button/index"
  }
}

<ant-button type="primary" onTap="handleTap">Button</ant-button>

ドキュメントの対応関係（公式ドキュメントと1対1で対応）

ガイド（指南）：

• examples/guide/ または examples/getting-started/ のガイドファイルを参照 → https://ant-design-mini.antgroup.com/guide/quick-start

コンポーネント（组件）：

• examples/components/ のコンポーネントファイルを参照 → https://ant-design-mini.antgroup.com/components/overview

サンプルとテンプレート

このスキルには、公式ドキュメントの構成に合わせて整理された詳細なサンプルが含まれています。すべてのサンプルは examples/ ディレクトリにあります（上記の対応関係を参照）。

サンプルを使用するには：

• ユーザーのリクエストからトピックを特定します
• 上記の対応関係をもとに、適切なサンプルファイルを読み込みます
• そのファイルの手順、構文、ベストプラクティスに従います
• コードサンプルを具体的なユースケースに合わせて調整します

テンプレートを使用するには：

• よくあるひな形については、templates/ ディレクトリのテンプレートを参照します
• テンプレートを必要性やコーディングスタイルに合わせて調整します

API リファレンス

詳細な API ドキュメントは api/ ディレクトリにあり、公式の Ant Design Mini API ドキュメントの構成に合わせて整理されています。

コンポーネント API（api/component-api.md）

• コンポーネントの props とイベント
• コンポーネントのメソッド
• コンポーネントのスロット

Props とイベント（api/props-and-events.md）

• 共通の props
• 共通のイベント
• イベント処理

API リファレンスを使用するには：

1. 確認が必要な API を特定します
2. api/ ディレクトリから対応する API ファイルを読み込みます
3. API のシグネチャ、パラメーター、戻り値の型、サンプルを確認します
4. 詳細な使用パターンについては、リンク先のサンプルファイルを参照します
5. すべての API ファイルには、examples/ ディレクトリ内の関連するサンプルファイルへのリンクが含まれています

ベストプラクティス

1. コンポーネントを登録する：app.json または page.json にコンポーネントを登録します
2. 正しい構文を使用する：Alipay では axml、WeChat では wxml を使用します
3. イベントを処理する：Alipay では onTap、WeChat では bindtap を使用します
4. テーマをカスタマイズする：カスタマイズにはテーマ変数を使用します
5. デザイン仕様に従う：Ant Design のデザイン仕様に従います

リソース

• 公式ドキュメント：https://ant-design-mini.antgroup.com/
• クイックスタート：https://ant-design-mini.antgroup.com/guide/quick-start
• コンポーネント：https://ant-design-mini.antgroup.com/components/overview
• GitHub リポジトリ：https://github.com/ant-design/ant-design-mini

キーワード

Ant Design Mini, ant-design-mini, antd-mini, ミニプログラム, Alipay ミニプログラム, WeChat ミニプログラム, 小程序, 支付宝小程序, 微信小程序, 组件库, UI コンポーネント, Button, Form, List, Modal, Toast, Tabs, NavBar, 按钮, 表单, 列表, 弹窗, 提示, 标签页, 导航栏