Wix Blocks:ウィジェットのアクションバーボタン用にカスタムパネルをデザインする
読了時間:7分
Wix Blocks はすべての Wix Studio ユーザー様にリリースされました。Wix Blocks にアクセスするには、Wix Studio に参加してください。
Wix Blocks を使用すると、ウィジェットとその要素のアクションバーにカスタムパネルを作成できます。サイト制作者がアクションボタン(「設定」ボタンなど)をクリックすると、デフォルトパネルの代わりにカスタムパネルが開きます。
カスタムパネルを作成すると、サイト制作者がウィジェットを操作する際の選択肢が増え、ユーザビリティが向上し、サイト上でより簡単にカスタマイズすることができます。
パネルの作成には 3つの主要な段階で構成されています:
1. パネルをデザインする
2. パネルにコードを追加して動作させる
パネルを作成する
パネルを作成する方法は 2通りあります。
「パネル」タブからパネルを作成する
「設定」タブからパネルを作成する
パネルに要素を追加する
パネルは、ボタン、区切り線、入力フィールドなどのパネル要素で構成されています。
パネル要素のリストを表示する
「+パーツを追加」をクリックし、パネルに追加したい要素を選択します。同じ要素を複数回追加することもできます。次に、ラベルのテキストとスタイルをカスタマイズし、デフォルトと値を設定します。
パネルをカスタマイズする
パネル内の要素には、いくつかのカスタマイズオプションがあります。ラベルテキストを変更したり、ツールチップを追加したり、デフォルトと値を設定したりできます。これは、各要素に接続されたアクションバーを使用して行います。
設定オプション
要素をクリックします。「設定」または アイコンを選択して、パネルをカスタマイズします。以下にいくつかのオプションを示します:
フィールド名を追加する(詳細はこちら)
ツールチップを追加する(詳細はこちら)
要素を「読み取り専用」として定義する(詳細はこちら)
初期テキストオプションを設定する(詳細はこちら)
パターン検証を追加する(詳細はこちら)
多肢選択要素
チェックボックス、ラジオボタン、ドロップダウンリストなど、複数のオプションを持つ要素を追加する場合は、要素を選択すると表示されるアクションバーの「選択肢を管理」ボタンを使用して設定することができます。
選択肢の名前を変更(詳細はこちら)
その他のアクション(詳細はこちら)
パネルをデザインしたら、コードを追加して機能させる必要があります。その後、アクションボタンに追加して、動作を確認することができます。パネルのコーディングに関する詳細はこちら(英語)
パネルの名前を変更・複製・削除する
- 「パネル」ページの左下にある「マイパネル」セクションでパネル名にマウスオーバーします。
- 「その他のアクション」アイコン をクリックします。
- 「名前を変更」、「複製」、または「削除」を選択します。
パネルをアクションボタンに接続する
パネルを作成したら、ウィジェットまたは要素のアクションバーのボタンに接続する必要があります。
- 「設定」タブをクリックします。
- 「ウィジェット」パネルから適切なウィジェットを選択します。
- 「アクションバーの編集」メニューで、パネルを接続したいボタンにマウスオーバーします。たとえば、「設定」パネルの場合は、「設定」ボタンを選択します。「デザイン」パネルの場合は、「デザイン」ボタンを選択します。また、新しいボタンを追加し、名前を付けてパネルに接続することもできます。
- 「アクションボタンの設定」 をクリックします。
5.「マイパネル」セクションからパネルを選択します。
パネルをデザインしたら、コードを追加して機能させる必要があります。詳細はこちら
「設定」タブからパネルを接続する
パネルのデザインとコーディングは「パネル」タブで行います。どのパネルをどのボタンで表示するかは「設定」タブで選択します。「設定」タブをまだ使用したことがない場合は、ウィジェットのアクションバーを設定する方法をご覧ください。
お役に立ちましたか?
|