1.ポップコンファームバブル確認ボックス
要素をクリックすると、バブルのような確認ボックスが表示されます。
2.いつ使用するか
ターゲット要素の操作にユーザーからのさらなる確認が必要な場合、フローティング レイヤー プロンプトがターゲット要素の近くにポップアップ表示され、ユーザーに確認が求められます。
確認によってポップアップ表示される全画面中央のモーダル ダイアログ ボックスと比較して、インタラクティブなフォームは軽量です。
コンポーネント コードは次から取得しています:バブル確認ボックス Popconfirm - Ant Design
3.現地検証前の準備
記事 [react project + antdComponent-demo:hello-world React project + antd component-demo:hello-world_Western Jin の no1 ブログ - CSDN ブログ]、 https://ant.design/components/popconfirm-cn を参照してください。 App2.js のすべてのコードをカバーするためにApp2.jsでローカルで使用する必要があるコードを作成し、コードを開始して現象を確認し、コードをローカルで変更します。
4.ローカル検証Popconfirmの簡単な使用法。
Popconfirm の簡単な使用法を理解するには、次の図に示されているコードをコピーします。
5.バブルの 12 方向の設定方法を表示:配置
以下の図に示されているコードをコピーして、バブルの 12 方向、つまり配置を設定する方法を学習します。
バブル ボックスの位置。オプションで、左上、右下、トップ左上、右下、左下、右左、左上、右下、右上、下。
具体的な使い方については、以下のソースコードを参照してください。
この記事ではPopconfirmコンポーネントの一部のみを紹介していますので、詳しくは公式ドキュメント「バブル確認ボックス Popconfirm - Ant Design」を参照してください。