Wix Blocks：ウィジェットのアクションバーボタン用にカスタムパネルをデザインする | サポートセンター

Wix Blocks：ウィジェットのアクションバーボタン用にカスタムパネルをデザインする

読了時間：7分

Wix Blocks はすべての Wix Studio ユーザー様にリリースされました。Wix Blocks にアクセスするには、Wix Studio に参加してください。

Wix Blocks を使用すると、ウィジェットとその要素のアクションバーにカスタムパネルを作成できます。サイト制作者がアクションボタン（「設定」ボタンなど）をクリックすると、デフォルトパネルの代わりにカスタムパネルが開きます。

カスタムパネルを作成すると、サイト制作者がウィジェットを操作する際の選択肢が増え、ユーザビリティが向上し、サイト上でより簡単にカスタマイズすることができます。

パネルの作成には 3つの主要な段階で構成されています：

注意：

パネルを作成する方法は 2通りあります。

「パネル」タブからパネルを作成する

「設定」タブからパネルを作成する

パネルは、ボタン、区切り線、入力フィールドなどのパネル要素で構成されています。

パネル要素のリストを表示する

「＋パーツを追加」をクリックし、パネルに追加したい要素を選択します。同じ要素を複数回追加することもできます。次に、ラベルのテキストとスタイルをカスタマイズし、デフォルトと値を設定します。

パネル内の要素には、いくつかのカスタマイズオプションがあります。ラベルテキストを変更したり、ツールチップを追加したり、デフォルトと値を設定したりできます。これは、各要素に接続されたアクションバーを使用して行います。

要素をクリックします。「設定」または settings icon

アイコンを選択して、パネルをカスタマイズします。以下にいくつかのオプションを示します：

フィールド名を追加する（詳細はこちら）

ツールチップを追加する（詳細はこちら）

要素を「読み取り専用」として定義する（詳細はこちら）

初期テキストオプションを設定する（詳細はこちら）

パターン検証を追加する（詳細はこちら）

チェックボックス、ラジオボタン、ドロップダウンリストなど、複数のオプションを持つ要素を追加する場合は、要素を選択すると表示されるアクションバーの「選択肢を管理」ボタンを使用して設定することができます。

選択肢の名前を変更（詳細はこちら）

その他のアクション（詳細はこちら）

パネルをデザインしたら、コードを追加して機能させる必要があります。その後、アクションボタンに追加して、動作を確認することができます。パネルのコーディングに関する詳細はこちら（英語）

パネルを作成したら、ウィジェットまたは要素のアクションバーのボタンに接続する必要があります。

「設定」タブをクリックします。
「ウィジェット」パネルから適切なウィジェットを選択します。
「アクションバーの編集」メニューで、パネルを接続したいボタンにマウスオーバーします。たとえば、「設定」パネルの場合は、「設定」ボタンを選択します。「デザイン」パネルの場合は、「デザイン」ボタンを選択します。また、新しいボタンを追加し、名前を付けてパネルに接続することもできます。
「アクションボタンの設定」をクリックします。

5.「マイパネル」セクションからパネルを選択します。

パネルをデザインしたら、コードを追加して機能させる必要があります。詳細はこちら

「設定」タブからパネルを接続する

パネルのデザインとコーディングは「パネル」タブで行います。どのパネルをどのボタンで表示するかは「設定」タブで選択します。「設定」タブをまだ使用したことがない場合は、ウィジェットのアクションバーを設定する方法をご覧ください。

この記事では下記を説明します：