リストとは
同じレイアウトを繰り返す場合に内容やスタイルを一括で管理できる機能です。
リストにテキストや画像などのデータをプロパティとして追加して、リスト内のボックスにプロパティを紐付けて表示します。なお、一度リスト化すると後からリスト化の解除はできません。
リストの構成と概要
リストは親ボックス (ul) と 子ボックス (li) から構成されています。
リストの親ボックス(ul)を選択した状態でレイヤーパネルを開くと、リスト全体のプロパティとデータが確認できます。
このリストアイテムにプロパティが追加でき、リスト上に表示したりリンク先として設定することができます。
リストの作成方法
選択したボックスをアイテム (li) とするリスト (ul) を以下いずれかの方法で作成できます。
キーボード操作で ⌘+L (windowsでは Ctrl+L)
右クリックメニューからリスト化を選択
ボックス設定パネル内Boxボタンをクリックし、リスト化を選択
デザイン編集
リスト化したボックスには、以下画像のように枠が表示されます。この枠の青い部分をダブルクリックするか、Enterを押下するとデザイン編集ができる状態になります。
ブール値プロパティを使用して、リストアイテムごとに要素の表示・非表示ができます。詳しくは、リストアイテムごとにデザインを変える方法をご覧ください。
リストアイテムの追加
リストの子ボックス (li) は、アイテムと呼ばれます。アイテムには画像やテキストなどのプロパティが追加できます。
新たにアイテムをリストに追加するには、設定パネルで「+New」をクリックします。
アイテムの並び替え
アイテムにカーソルを乗せると表示されるアイコンをドラッグして並び替えができます。並び替えはレイヤーパネルとスクリーン上の2箇所から行えます。
レイヤーパネル:
スクリーン:
アイテムの削除
レイヤーパネルとスクリーン上の2箇所から削除できます。
レイヤーパネル:
アイテムにカーソルを乗せると表示されるゴミ箱アイコンをクリックします。
スクリーン:
アイテムにカーソルを乗せると表示される「×」をクリックします。
プロパティの追加
「テキスト」「画像」「URL」「ブール値」「カラー」のプロパティが追加できます。
プロパティは、レイヤーパネルとボックス設定パネルの2箇所から追加でき、ボックス設定パネルからは、テキストと画像プロパティのみ追加可能です。
レイヤーパネル:
リスト右上の「+」をクリックし追加します。
ボックス設定パネル:
リストの青枠をダブルクリックし、編集モードに切り替えます。テキストまたは画像ボックスをリスト内に配置します。
配置したボックスを選択した状態で、エディタ右側のパネルを開き「+リストデータに追加」をクリックします。
自動的にリストへプロパティとして追加されます。
プロパティの編集
プロパティの内容は、スクリーン上とレイヤーパネルの2箇所から編集できます。
スクリーン:
画像とテキストは通常の画像・テキストボックスと同じようにスクリーン上で編集します。
注意:以下の場合、リスト上で直接内容変更できません。レイヤーパネルから変更してください。
カルーセル(リスト)の場合
文字列フィルターを設定している場合
テキスト欄に直接文字列の入力がある場合
レイヤーパネル:
親ボックス(ul)を選択した状態でレイヤーパネルから編集します。
また、編集モードで子ボックス(li)を選択した状態でも編集可能です。
プロパティ名の編集
レイヤーパネル上で、プロパティ名をクリックして編集します。キーボードでリターンキーまたはエンターキーを押すと変更が保存されます。
プロパティの紐付け
リストへプロパティを追加した後は、ボックスやスタイルに紐付けを行います。
紐付けは2箇所から行え、ボックス設定パネルでは、テキスト、画像、URLプロパティのみ操作可能です。
レイヤーパネル:
リストの青枠をダブルクリックし編集モードに切り替え、レイヤーパネルを開きます。
データの右横にある青い丸をドラッグしてボックスに紐付けます。
プロパティによっては、塗りや横幅などのスタイルに紐づけることができます。詳しくは、プロパティをご覧ください。 記事で紹介されるテキストプロパティの「改行あり・なし」と「参照プロパティ」はリスト側では提供していない機能です。
ボックス設定パネル:
ボックスを選択し、設定パネルを開きます。テキスト、画像、またはリンク欄をクリックすると、プロパティの選択肢が表示されるので任意のプロパティを選択してくだい。
なお、テキストプロパティには文字列フィルターが設定できます。詳しくは、プロパティの文字列フィルタをご覧ください。