エレメントリファレンス.

DXPR Builderを学ぶリファレンスエレメントとCSS

DXPR Builderには22のコンテンツエレメントと6のレイアウトエレメントが あります。このページでは各エレメントのマシン名と設定モーダルのフィールドを 挙げます。レイアウト部では各ロー内のColumnも挙げます。ビルダーがエレメント として提供するDrupalブロックとビューは扱いません。

このページの読み方

各エレメントの最初の表はGeneralアコーディオンのフィールドを 挙げます。他のアコーディオンのフィールドはそのアコーディオン名の別表に 載ります。Labelはモーダルの表示通りのフィールドラベルで、インターフェイスの 米国表記です。Parameterはエレメント定義のparam_nameです。選択肢は value (Label) と読みます。

次の2つのGeneralフィールドは全エレメントにあり、表では繰り返しません。

Label Parameter Control Default Allowed values Description
HTML ID hash text empty。生成IDをプレースホルダーに表示します 先頭は文字、以降は文字、数字、ハイフン、アンダースコア エレメントのカスタムIDです。
HTML classes el_class multi-select empty。新しいセクションにはpy-5 Bootstrap 5ユーティリティークラスと有効テーマが宣言するクラス。Edit as textは任意のクラスを受け付けます エレメントの追加CSSクラスです。

全エレメントにはStyleとHover styleアコーディオンもあり、 スタイルタブページで 説明します。ColumnとTabs、Collapse panel、Carousel内のパネルを除く全エレメントには Animationアコーディオンもあり、 アニメーションタブページで 説明します。

Controlカラムはモーダルの表示物を名指します。各コントロールはエレメント定義の パラメーターtypeから来ます。

Control Code type
text textfield
number numericfield
link link
radio dropdown (7未満の選択肢)
select dropdown (7以上の選択肢)
toggle checkbox (1つの選択肢)
checkboxes checkbox (複数の選択肢)
slider dxb_slider
colour colorpicker
icon, image, images, video, datetime 同名のtypeのもの
ckeditor textarea
ace html
social social_links

オンのトグルはAllowed valuesセルの値を格納します。オフのトグルはnoか 空値を格納します。チェックボックスはチェックした値をカンマ区切りの一覧で 格納します。emptyとある選択肢は空文字列で格納します。モーダルではその ラジオボタンがキーdxpr-defaultを持ちます。

Imageとimagesフィールドには画像スタイル選択もあります。存在すればサイトの optimizeスタイルが先頭、次にOriginal image (No resizing)と 他の画像スタイルです。一部フィールドは他のフィールドが一致する値を持つまで 隠れたままです。Descriptionカラムがその依存を名指します。

コンテンツエレメント

Text

CKEditorで編集するリッチテキストです。マシン名: az_text。

Label Parameter Control Default Allowed values Description
Text content ckeditor プレースホルダーの見出しと段落 HTML テキストコンテンツです。

Image

単一の画像です。リンクで包むこともできます。マシン名: az_image。

Label Parameter Control Default Allowed values Description
Image image image empty メディアブラウザーの画像 表示する画像です。
Image width width text 100% CSS長さ。例: 100pxや50% 裸の数値はピクセル扱いです。
Image height height text empty CSS長さ、例: 100px 裸の数値はピクセル扱いです。
Image link link link empty URLまたは内部パス 画像をリンクで包みます。
Image link target link_target radio _self (Same window) _self (Same window)、_blank (New window) リンクの開き先です。link設定時に表示します。

以下はSEOアコーディオンのフィールドです。

Label Parameter Control Default Allowed values Description
Alt attribute alt text empty 任意のテキスト 画像の代替テキストです。
Title attribute title text empty 任意のテキスト 画像のtitle属性です。

複数画像のBootstrapスライドショーです。マシン名: az_images_carousel。

Label Parameter Control Default Allowed values Description
Images images images empty メディアブラウザーの画像 画像ごとに1スライドです。
Interval interval slider 5000 0から10000まで、刻み1 スライド間の時間 (ミリ秒)。0ではスライドが自動で進みません。
Hide hide checkboxes none ticked pagination_control (Hide pagination control)、prev_next_buttons (Hide prev/next buttons) インジケーター、矢印、または両方を隠します。

以下はSEOアコーディオンのフィールドです。

Label Parameter Control Default Allowed values Description
Alt attribute alt text empty 任意のテキスト 画像の代替テキストです。
Title attribute title text empty 任意のテキスト 画像のtitle属性です。

Video

YouTubeまたはVimeo動画の埋め込みです。マシン名: az_video。

Label Parameter Control Default Allowed values Description
Video link link text empty YouTubeまたはVimeoのURL 埋め込む動画です。
Video width width text 100% CSS長さ。例: 100pxや50% 裸の数値はピクセル扱いです。
Image image image empty メディアブラウザーの画像 カバー画像です。訪問者のクリックでプレーヤーが読み込まれます。
Themed play button play toggle off yes (オンの場合) 動画の上にテーマ付き再生ボタンを表示します。

Local video

自前の動画ファイルをHTML5プレーヤーで再生します。マシン名: az_video_local。

Label Parameter Control Default Allowed values Description
Video video video empty MP4、WEBM、OGG、OGVファイル。サイトのアップロード上限まで 動画ファイルです。
Start playing automatically autoplay toggle off autoplay (オンの場合) ページ読み込みで再生開始します。自動再生は常にミュートします。
Muted muted toggle off muted (オンの場合) 動画をミュートします。autoplayオフ時に表示します。
Controls controls toggle off controls (オンの場合) プレーヤーコントロールを表示します。
Loop loop toggle off loop (オンの場合) 終了時に動画を最初から再生します。
Video width width text 100% CSS長さ。例: 100pxや50% プレーヤーの幅です。
Image image image empty メディアブラウザーの画像 再生前に表示するポスター画像です。

HTML

コードエディターで編集する素のHTMLです。マシン名: az_html。

Label Parameter Control Default Allowed values Description
Raw HTML content ace プレースホルダーメッセージ「Click the edit button to change this HTML」 HTML HTMLコンテンツです。

Jumbotron

タイトルとリード文付きの大きなバナーです。他のエレメントを中に落とせます。 マシン名: az_jumbotron。

Label Parameter Control Default Allowed values Description
Title title text empty 任意のテキスト バナータイトルです。
Lead lead text empty 任意のテキスト タイトル下に表示するサブタイトルテキストです。
Type type select bg-light (Light) bg-light (Light)、text-white bg-primary (Primary)、text-white bg-secondary (Secondary)、text-white bg-success (Success)、text-white bg-info (Info)、text-white bg-warning (Warning)、text-white bg-danger (Danger)、text-white bg-dark (Dark)、none (Default) 背景と文字色のクラスです。
Padding padding radio p-5 (Large) p-5 (Large)、p-4 (Medium)、p-3 (Small) パディングサイズです。

Button

URLへリンクするBootstrapボタンです。マシン名: az_button。

Label Parameter Control Default Allowed values Description
Title title text Click to add text 任意のテキスト ボタンのテキストです。
Link link link empty URLまたは内部パス ボタンのリンクです。
Link target link_target radio _self (Same window) _self (Same window)、_blank (New window) リンクの開き先です。link設定時に表示します。
Type type select primary (Primary) primary、secondary、success、info、warning、danger、link、light、dark。各ラベルは値を大文字はじめにしたもの Bootstrapボタンスタイルです。
Block button block toggle off btn-block (オンの場合) 全幅ボタンです。
Outline style outlined toggle off outline (オンの場合) 描画はbtn-*ではなくbtn-outline-*です。
Size size radio empty (Normal) empty (Normal)、btn-lg (Large)、btn-sm (Small) ボタンサイズです。

中のエレメントを1つのリンクで包むコンテナーです。マシン名: az_link。

Label Parameter Control Default Allowed values Description
Link link link empty URLまたは内部パス コンテンツリンクです。
Link target link_target radio _self (Same window) _self (Same window)、_blank (New window) リンクの開き先です。link設定時に表示します。

以下はSEOアコーディオンのフィールドです。

Label Parameter Control Default Allowed values Description
Title attribute title text empty 任意のテキスト リンクのtitle属性です。
Tell search engines not to follow nofollow toggle off nofollow (オンの場合) リンクにrel="nofollow"を付けます。

Alert

Bootstrapアラートメッセージです。マシン名: az_alert。

Label Parameter Control Default Allowed values Description
Message content ckeditor プレースホルダーテキスト HTML メッセージです。
Type type radio alert-success (Success) alert-success (Success)、alert-info (Info)、alert-warning (Warning)、alert-danger (Danger) アラート色です。

Card

任意のヘッダーとタイトル付きBootstrapカードコンテナーです。マシン名: az_card。

Label Parameter Control Default Allowed values Description
Header header text empty 任意のテキスト カードヘッダーテキストです。
Title title text empty 任意のテキスト カードタイトルです。
Type type select empty (Default) empty (Default)、text-white bg-primary (Primary)、text-white bg-secondary (Secondary)、text-white bg-success (Success)、text-white bg-info (Info)、text-white bg-warning (Warning)、text-white bg-danger (Danger)、text-white bg-dark (Dark)、bg-light (Light) カード色クラスです。

Panel

タイトルバー付きパネルコンテナーです。マシン名: az_panel。

Label Parameter Control Default Allowed values Description
Title title text empty 任意のテキスト パネルタイトルです。
Type type select panel-dxpr (DXPR) panel-dxpr (DXPR)、panel-default (Default)、panel-primary (Primary)、panel-success (Success)、panel-info (Info)、panel-warning (Warning)、panel-danger (Danger) パネルスタイルです。

Block quote

任意の引用元付き引用です。マシン名: az_blockquote。

Label Parameter Control Default Allowed values Description
Text content ckeditor プレースホルダーテキスト HTML 引用テキストです。
Cite cite text empty 任意のテキスト 引用の下に表示する引用元です。
Reverse reverse toggle off blockquote-reverse (オンの場合) 引用を行末に寄せます (text-end)。

プロフィールページへリンクするソーシャルネットワークアイコンの列または段です。 マシン名: st_social。

Label Parameter Control Default Allowed values Description
Social links st_social_links social FacebookとYouTubeの行 アイコンごとに1行。ブランドとプロフィールURL アイコンとそのリンクです。
Layout st_type radio inline (Inline) inline (Inline)、stacked (Stacked) アイコンレイアウトです。
Style st_style radio empty (None) empty (None)、rounded (Rounded)、circle (Circle)、square (Square) アイコン背景の形です。
Size st_size radio lg (Large) lg (Large)、empty (Small)、2x、3x、4x、5x。最後の4つのラベルは値と同じ アイコンサイズです。
CSS3 hover effects st_css3_hover_effects radio empty (None) empty (None)、disc (Disc)、pulse (Pulse) ホバー効果です。効果を付けるとアイコンが円形になります。

以下はIcon colorsアコーディオンのフィールドです。

Label Parameter Control Default Allowed values Description
Color st_theme_color radio custom (Custom) brand (Brand color)、custom (Custom)、inherit (Inherit) アイコン色の出どころです。
Color st_color colour none 任意の色 カスタムアイコン色です。st_theme_colorがcustomのときに表示します。
Background color st_theme_bgcolor radio custom (Custom) brand (Brand color)、custom (Custom)、inherit (Inherit) アイコン背景色の出どころです。
Background color st_bgcolor colour none 任意の色 カスタム背景色です。st_theme_bgcolorがcustomのときに表示します。

Number counter

開始値から終了値まで数える数字です。マシン名: az_counter。

Label Parameter Control Default Allowed values Description
Start start number 0 数値 数えはじめる数値です。
End end number 100 数値 数え上げる数値です。
Font size fontsize slider 30 0から200まで、刻み1 数字のフォントサイズ (ピクセル) です。
Speed speed slider 2000 0から10000まで、刻み1 数え終わるまでの時間 (ミリ秒) です。
Thousands separator seperator radio empty (None) empty (None)、, (Comma)、. (Dot)、半角スペース (Space) 最終数値の千単位を区切ります。コードはこの綴りです。
Prefix prefix text empty 任意のテキスト 数字の前の文字です (例: $)。
Suffix postfix text empty 任意のテキスト 数字の後の文字です (例: %)。

Circle counter

任意のテキスト、情報行、中央アイコン付きの円形プログレス表示です。 マシン名: az_circle_counter。

Label Parameter Control Default Allowed values Description
Foreground color fgcolor colour #333333 任意の色 プログレス弧の色です。
Background color bgcolor colour #999999 任意の色 弧の後ろの軌道の色です。
Fill color fill colour none 任意の色 円の中の塗り色です。
Percent percent slider 50 0から100まで、刻み1 プログレス値です。
Dimension dimension slider 250 100から500まで、刻み1 円の直径 (ピクセル) です。
Foreground width width slider 10 1から100まで、刻み1 弧の線幅です。
Animation animation toggle on yes (オンの場合) 弧をアニメーションさせます。
Animation duration duration slider 1500 0から5000まで、刻み1 ミリ秒です。animationオン時に表示します。
Animation delay delay slider 0 0から5000まで、刻み1 ミリ秒です。animationオン時に表示します。
Animation in-viewport in_viewport toggle on yes (オンの場合) エレメントがビューに入ったスクロールでアニメーションを開始します。animationオン時に表示します。

以下はCircle contentアコーディオンのフィールドです。Show progress以降の 全フィールドはオフの間だけ表示します。

Label Parameter Control Default Allowed values Description
Show progress show_progress toggle off yes (オンの場合) 独自テキストとアイコンの代わりにパーセントを表示します。
Text text text empty 任意のテキスト 中央テキストです。
Font size fontsize slider 16 0から100まで、刻み1 中央テキストのサイズ (ピクセル) です。
Text color text_color colour none 任意の色 中央テキストの色です。
Info info text empty 任意のテキスト 2番目の情報行です。
Info font size info_fontsize slider 14 0から100まで、刻み1 情報行のサイズ (ピクセル) です。
Info color info_color colour none 任意の色 情報行の色です。
Icon icon icon empty ビルダープロファイルが許可するセットのアイコン 中央アイコンです。
Icon size icon_size slider 16 0から100まで、刻み1 アイコンのフォントサイズ (ピクセル) です。
Icon color icon_color colour none 任意の色 アイコンの色です。

Progress bar

ラベル付きの水平Bootstrapプログレスバーです。マシン名: az_progress_bar。

Label Parameter Control Default Allowed values Description
Label label text Click to add text 任意のテキスト バー内のテキストです。
Progress width slider 50 0から100まで、刻み1 パーセントのプログレスです。
Bar height height slider 45 0から100まで、刻み1 バーの高さ (ピクセル) です。
Back color bgcolor colour #e9ecef 任意の色 バーの後ろの軌道色です。
Front color fcolor colour #284ed9 任意の色 バーの色です。
Grow animation grow_animation toggle off yes (オンの場合) バーを0から値までアニメーションさせます。
Stripes options checkboxes none ticked progress-bar-striped (Add striped pattern to bar)、progress-bar-animated (Animate stripes (requires striped pattern)) 縞模様と動く縞です。

Countdown timer

日付、時刻、繰り返し間隔の終わりまで数えます。マシン名: az_countdown。

Label Parameter Control Default Allowed values Description
Countdown style countdown_style radio plain (Plain) plain (Plain)、style1 (Grid)、style6 (3D flip)、style9 (Disc)、style10 (Airport style)、style12 (Transparent) 見た目のスタイルです。
Date / Time Limitations counter_scope radio date (Specify date only) date (Specify date only)、date_time (Specify date and time)、repeating (Specify time only (repeating every day))、resetting (Resetting counter (set interval up to 24 hours)) タイマーが数える対象です。
Date date datetime empty 日付はd.m.Y形式 目標日です。counter_scopeがdateのときに表示します。
Date / Time date_time datetime empty 日付はd.m.Y形式、時間は (H) 形式 目標日時です。counter_scopeがdate_timeのときに表示します。
Time time datetime empty 時間は (H) 形式 毎日の目標時です。counter_scopeがrepeatingのときに表示します。
Reset in hours reset_hours slider 0 0から24まで、刻み1 間隔の時間数です。counter_scopeがresettingのときに表示します。
Reset in minutes reset_minutes slider 0 0から60まで、刻み1 間隔の分数です。counter_scopeがresettingのときに表示します。
Reset in seconds reset_seconds slider 0 0から60まで、刻み1 間隔の秒数です。counter_scopeがresettingのときに表示します。
Page referrer referrer link empty URLまたは内部パス カウントダウン満了時に開くページです。counter_scopeがrepeatingかresettingのときに表示します。
Automatic restart restart toggle off yes (オンの場合) 間隔の終わりに再開します。counter_scopeがresettingのときに表示します。
Display options display checkboxes all five ticked years (Show remaining years)、days (Show remaining days)、hours (Show remaining hours)、minutes (Show remaining minutes)、seconds (Show remaining seconds) 表示する単位です。

Marquee

止まらずスクロールする画像の水平帯です。マシン名: az_marquee。

Label Parameter Control Default Allowed values Description
Images images images DXPRロゴの3つの複製 メディアブラウザーの画像 帯の画像です。
Speed speed slider 3 1から5まで、刻み1 スクロール速度です。1が最も遅く、5が最も速いです。
Height height slider 50 10から200まで、刻み1 画像の高さ (ピクセル) です。
Image layout image_layout radio fh (Fixed height images) fh (Fixed height images)、fw (Fixed width images) 画像が高さを共有するか幅を共有するかです。
Image width width slider 400 50から500まで、刻み1 画像の幅 (ピクセル) です。image_layoutがfwのときに表示します。
Gray scale grayscale toggle off apply (オンの場合) 画像をグレースケールで表示します。
Fade edges fade_edges toggle off apply (オンの場合) 帯の両端をフェードさせます。

以下はSEOアコーディオンのフィールドです。

Label Parameter Control Default Allowed values Description
Alt attribute alt text empty 任意のテキスト 画像の代替テキストです。
Title attribute title text empty 任意のテキスト 画像のtitle属性です。

Map

住所用の埋め込みGoogle Mapです。マシン名: az_map。

Label Parameter Control Default Allowed values Description
Address address text empty 住所 表示する場所です。
Map width width text 100% CSS長さ。例: 100pxや50% 裸の数値はピクセル扱いです。
Map height height text 400px CSS長さ、例: 100px 裸の数値はピクセル扱いです。

Icon

単一のアイコンです。リンク付きもできます。マシン名: az_icon。 モジュールは14のアイコンセットを付属します。テーマとモジュールが追加でき、 ビルダープロファイルがユーザーの見るセットを制限できます。

Label Parameter Control Default Allowed values Description
Icon icon icon bi bi-heart ビルダープロファイルが許可するセットのアイコン アイコンです。
Size size radio fa-lg (Large) normal (Normal)、fa-lg (Large)、fa-2x (Extra Large (2x))、fa-3x (Very Large (3x))、fa-4x (Huge (4x))、fa-5x (Gigantic (5x)) アイコンサイズです。
Link link link empty URLまたは内部パス アイコンのリンクです。
Link target link_target radio _self (Same window) _self (Same window)、_blank (New window) リンクの開き先です。link設定時に表示します。

以下はIcon utilitiesアコーディオンのフィールドです。

Label Parameter Control Default Allowed values Description
Style st_style radio empty (None) empty (None)、stbe-util-icon-rounded (Rounded)、stbe-util-icon-circle (Circle)、stbe-util-icon-square (Square) 背景の形です。
Icon animation animation radio empty (No) empty (No)、fa-spin (Spin)、fa-pulse (Pulse) アイコンのアニメーションです。
Icon orientation orientation radio empty (Normal) empty (Normal)、fa-rotate-90 (Rotate 90)、fa-rotate-180 (Rotate 180)、fa-rotate-270 (Rotate 270)、fa-flip-horizontal (Flip horizontal)、fa-flip-vertical (Flip vertical) 回転または反転です。

Divider

水平罫線です。マシン名: az_separator。

Label Parameter Control Default Allowed values Description
Color bgcolor colour none 任意の色 線の色です。
Thickness thickness radio auto (Theme default) auto (Theme default)、custom (Custom thickness) テーマの太さを上書きするかどうかです。
Thickness custom_thickness slider 3 0から20まで、刻み1 線の太さ (ピクセル) です。thicknessがcustomのときに表示します。
Length width radio auto (Theme default) auto (Theme default)、custom (Custom width) テーマの長さを上書きするかどうかです。
Width custom_width slider 100 0から500まで、刻み10 線の長さ (ピクセル) です。0で全幅になります。widthがcustomのときに表示します。
Align align radio left (Left) left (Left)、center (Center)、right (Right) 水平方向の配置です。widthがcustomのときに表示します。

レイアウトエレメント

Section

ロー用の最上位コンテナーです。全幅、全高、背景効果の選択肢付きです。 マシン名: az_section。新しいセクションはクラスpy-5が HTML classesに付きます。

Label Parameter Control Default Allowed values Description
Full width fluid toggle off yes (オンの場合) 全幅コンテナー (container-fluid) を使います。
100% height fullheight toggle off yes (オンの場合) セクションが画面の高さいっぱいになります。
Vertical centering vertical_centering toggle off yes (オンの場合) コンテンツを垂直中央に寄せます。

以下はBackground effectsアコーディオンのフィールドです。Background effect以外は その値に依存します。Descriptionカラムの通りです。

Label Parameter Control Default Allowed values Description
Background effect effect radio empty (Simple image) empty (Simple image)、fixed (Fixed image)、parallax (Parallax image)、gradient (Gradient)、youtube (YouTube video) 背景効果です。
Parallax speed parallax_speed slider 0 0から100まで、刻み1 パララックスのスクロール速度です。effectがparallaxのときに表示します。
Parallax mode parallax_mode radio fixed (Fixed) fixed (Fixed)、scroll (Local) 画像の背景固定です。effectがparallaxのときに表示します。
Disable on mobile parallax_mobile_disable toggle off yes (オンの場合) 481ピクセル未満の画面でパララックスをオフにします。effectがparallaxのときに表示します。
Start color gradient_start_color colour none 任意の色 グラデーション開始色です。effectがgradientのときに表示します。
End color gradient_end_color colour none 任意の色 グラデーション終了色です。effectがgradientのときに表示します。
Gradient direction gradient_direction slider 180 1から360まで、刻み1 グラデーション角度 (度) です。effectがgradientのときに表示します。
Start position gradient_start slider 0 0から100まで、刻み1 開始色の位置 (パーセント) です。effectがgradientのときに表示します。
End position gradient_end slider 100 0から100まで、刻み1 終了色の位置 (パーセント) です。effectがgradientのときに表示します。
Video options video_options checkboxes none ticked disMobile (Disable on mobile devices)、loop (Loop)、audio (Unmute (Not reliable when auto-playing due to recent browser policy updates))、noCrop (Disable cropping out player)、resizeSection (Resize section to match video)、showControls (Show controls) YouTube背景の選択肢です。effectがyoutubeのときに表示します。
YouTube video URL video_youtube text empty YouTubeのURL YouTube背景動画です。effectがyoutubeのときに表示します。
Start time in seconds video_start text 0 秒数 動画の開始時間です。effectがyoutubeのときに表示します。
Stop time in seconds video_stop text 0 秒数 動画の終了時間です。effectがyoutubeのときに表示します。

Row

カラムを持つBootstrapグリッドローです。新しいローは半幅2カラムではじまります。 マシン名: az_row。

Label Parameter Control Default Allowed values Description
Equal-height columns equal toggle off yes (オンの場合) 全カラムを同じ高さにします。
Mirror row reverse_horizontal toggle off yes (オンの場合) 768ピクセル以上の画面でカラム順を逆にします。

Column

ロー内のカラムです。ローがカラムを作るので、Columnはエレメントピッカーに ありません。マシン名: az_column。

Label Parameter Control Default Allowed values Description
Vertical centering vertical_centering toggle off yes (オンの場合) カラムコンテンツを垂直中央に寄せます。

Tabs

切り替え式タブパネルのコンテナーです。各タブはAdd tabコントロールで 追加します。マシン名: az_tabs。

Label Parameter Control Default Allowed values Description
Tab direction az_dirrection radio empty (Default) empty (Default)、tabs-left (Left)、tabs-right (Right) タブバーの位置です。コードはこの綴りです。
Style tab_style radio empty (Default) empty (Default)、modern (Modern)、accordion (Accordion) タブスタイルです。
Mobile friendly responsive toggle on yes (オンの場合) 小画面でタブを折りたたみ表示にします。

各タブ (az_tab) の独自設定:

Label Parameter Control Default Allowed values Description
Tab title title text Title 任意のテキスト タブのラベルです。
Tab description subtitle ckeditor empty HTML 有効タブに表示する任意の短い傍線です。

Collapse panel

折りたたみパネルのコンテナーです。各パネルはAdd toggleコントロールで 追加します。マシン名: az_accordion。

Label Parameter Control Default Allowed values Description
Collapse collapsed toggle off yes (オンの場合) 全パネルを閉じた状態ではじめます。オフでは最初のパネルが開いた状態ではじまります。
Expand icon expandicon radio empty (None) empty (None)、az-accordion--icon-plusminus (+)、az-accordion--icon-arrow (﹀) 各パネルタイトル横のアイコンです。

各パネル (az_toggle) の独自設定:

Label Parameter Control Default Allowed values Description
Toggle title title text Title 任意のテキスト パネルタイトルです。

スライドのコンテナーです。各スライドは他のエレメントを持ち、Add slide コントロールで追加します。スライド (az_slide) に独自フィールドは ありません。マシン名: az_carousel。

Label Parameter Control Default Allowed values Description
Frames per slide items slider 1 1から10まで、刻み1 横に並べて表示するスライドです。狭い画面では減ります。
Disable auto-play autoplay toggle off yes (オンの場合) スライドの自動送りを止めます。
Auto-play interval interval slider 5000 1000から20000まで、刻み100 スライド間の時間 (ミリ秒) です。
Stop on hover stoponhover toggle off yes (オンの場合) ポインターがカルーセル上にある間は自動再生を止めます。

以下はDotsアコーディオンのフィールドです。Dots navigation以降の 全フィールドはオンの間だけ表示します。

Label Parameter Control Default Allowed values Description
Dots navigation pagination toggle on yes (オンの場合) 各スライドのドットを表示します。
Dots orientation pagination_orientation radio outside (Outside slider) outside (Outside slider)、inside (Inside slider) ドットの位置です。
Dot shape pagination_shape radio bar (Bar) bar (Bar)、circle (Circle)、square (Square)、triangle (Triangle) ドットの形です。
Active dot transformation pagination_transform radio empty (None) empty (None)、growTaller (Grow taller)、growWider (Grow wider)、scaleUp (Scale up) 有効ドットの効果です。
Dot color pagination_color colour none 任意の色 ドットの色です。
Active dot color pagination_active_color colour none 任意の色 有効ドットの色です。

以下はNext/Previousアコーディオンのフィールドです。Next/Previous以降の 全フィールドはオンの間だけ表示します。

Label Parameter Control Default Allowed values Description
Next/Previous navigation toggle off yes (オンの場合) 次へ・前へ矢印を表示します。
Orientation navigation_orientation radio outside (Outside slider) outside (Outside slider)、inside (Inside slider) 矢印の位置です。
Dot shape navigation_shape radio empty (No background) empty (No background)、circle (Circle)、square (Square)、bar (Bar) 矢印の背景の形です。モーダルもDot shapeと名指します。
Icon color navigation_icon_color colour none 任意の色 矢印アイコンの色です。
Icon hover color navigation_icon_hover_color colour none 任意の色 矢印アイコンのホバー色です。
Background color navigation_background_color colour none 任意の色 矢印背景の色です。
Background hover color navigation_background_hover_color colour none 任意の色 矢印背景のホバー色です。
Outside navigation position navigation_position select adjacent (Adjacent) adjacent (Adjacent)、topCenter (Top center)、topLeft (Top left)、topRight (Top right)、bottomCenter (Bottom center)、bottomLeft (Bottom left)、bottomRight (Bottom right) スライダー外の矢印の位置です。

Positioned layers

子エレメントを自由にドラッグしてサイズ変更するキャンバスです。Positioned layers エレメントは他の同種の中に入れられません。マシン名: az_layers。 各子は位置を隠しパラメーターに格納します。pos_left、pos_top、 pos_width、pos_height、pos_zindexです。

Label Parameter Control Default Allowed values Description
Width width text 100% CSS長さ。例: 100pxや50% キャンバスの幅です。裸の数値はピクセル扱いです。
Height height slider 500 0から10000まで、刻み1 キャンバスの高さ (ピクセル) です。
Responsive responsive toggle off yes (オンの場合) 利用可能な幅に連動してキャンバスの高さとフォントサイズを拡縮します。

次はこちら