📚
横スクロール型リスト
(1)水平リスト🔶基本的な水平リスト🔶水平リストのアップデート（2024/6/13）(2)タグリストサンプルアプリ(クローン可能）スタイル タブ(3)アバターリストサンプルアプリエレメント タブスタイル タブ
(1)水平リスト
🔶基本的な水平リスト
横スクロール型リストの基本型であり、カスタムリストやカードリストなどと異なり、横スクロールで表示させたい時に使用する。
水平リストを配置してください。
- データベースの作成
テーブルを作成し、「項目を追加」から「テキスト」タイプを選択し「タイトル」「サブタイトル」「サブタイトル2」「タグ」「フッター」計 5つの項目を作成する。
「項目を追加」から「画像」タイプを選択し「メイン画像」「アイコン」の2項目を追加する。
「レコードの追加」からテストデータを3つ以上作成する。
- エレメントの設定
水平リストを選択し、右ウインドウ「エレメント」タブを開く。「水平リスト」タブで先ほど作成したテーブルを選択する。
「画像」タブを開き、「データベース > Current リスト > メイン画像」を選択する。
「Avater画像」タブを開き、「データベース > Current リスト > アイコン」を選択する。
「タグ」タブを開き、カスタムテキストから「Current リスト > タグ」を選択する。
「タイトル」タブを開き、カスタムテキストから「Current リスト > タイトル」を選択する。
「サブタイトル」タブを開き、カスタムテキストから「Current リスト > サブタイトル」を選択する。
「サブタイトル2」タブを開き、カスタムテキストから「Current リスト > サブタイトル2」を選択する。
「フッター」タブを開き、カスタムテキストから「Current リスト > フッター」を選択する。
※PC上でプレビューを行う際は、トラックパッドでリストをスライドを行う。
または、Shiftキー + マウスのスクロールホイールでスライドを行う。
🔶水平リストのアップデート（2024/6/13）
水平リストに新しいデザインが追加されました。より洗練され使いやすくなった水平リストエレメントをぜひご利用ください。※設定は基本の水平リストと同様に行ってください。（基本の水平リストにありますアイコンとフッターはございません。）
サンプルアプリ(閲覧用）
‣
イメージ画像
(2)タグリスト
サンプルアプリ(クローン可能）
‣
タグリストは「画像」「タイトル（テキスト）」「アイコン」を横スクロール型で表示することが出来ます。ベーシックリストと同様で、予め用意されているエレメントの 表示/非表示 設定でリストの表示形式を変更できます。
スタイル タブ
- フォント・サイズ テキストのフォントとフォントサイズを選択できます。
- テキスト色 テキストカラーを選択できます。
- 塗りつぶし タグ全体の背景色を選択できます。
- 枠線・角丸 タグ全体の枠線を設定できます
- 間隔 タグ同士の間隔を設定できます。
- サイズ タグのサイズを選択できます。
- シャドウ タグ全体の影を設定できます。
- タグのスタイル 画像についての設定ができます。
(3)アバターリスト
サンプルアプリ
アバターリストは「画像」「タイトル」「サブタイトル」の3つのエレメントを横スクロール形式で表示することが出来ます。ベーシックリストと同様で、予め用意されているエレメントの 表示/非表示 設定でリストの表示形式を変更できます。
エレメント タブ
- アバターリスト 「データベースの選択」をします。
- タイトル
- テキストの位置 表示されるテキストの位置を「上部」「下部」から選択できます。
スタイル タブ
エレメント全体・タイトル・サブタイトル・アバター それぞれのスタイルを設定できます。
- 全体
- 塗りつぶし 背景色の変更が出来ます。ページに背景色や背景画像を設定している場合は「塗りつぶし」を透過させることできれいに表示できます。
- 間隔 アバター同士の間隔を設定できます。
- タイトル・サブタイトル
- フォント・サイズ フォントとフォントサイズを設定できます。
- テキスト色 テキストカラーを設定できます。
- 角丸 サブタイトルのシェイプを設定できます
- アバター
- サイズ 画像サイズの設定ができます。
- 枠線 画像の縁に枠線を追加できます。線の色と種類を設定します。
- 角丸 画像の形を設定できます。角丸を変更することで 正方形 ～ 円形 まで設定できます。
- サイズ 枠線のサイズを設定します。