デザインのカスタマイズ(3) クラス一覧

AFormsは、scssを編集してデザインをカスタマイズできるように作られています。
このシリーズでは、3つの記事に分けて、フォームのデザインをカスタマイズする方法を説明しています。

第3回の今回は、scssファイルで使われているクラスを解説します。
v1.1.0時点でのクラスです。

.wq-Image

画像を表示する汎用部品です。
指定されたサイズの中で、指定されたスケーリング方法で画像を表示します。

.wq-scaling-???

画像のスケーリングを指定するモディファイアです。
coverは外接(表示領域を画像がギリギリ埋め尽くすようにスケーリング)です。
containは内接(表示領域に画像がギリギリ収まるようにスケーリング)です。
center(既定値)は拡大しない内接(表示領域に画像がギリギリ収まるように縮小しますが、拡大はしません)です。

.wq-Image > .wq–img

画像部品の中のimgタグの要素です。

.wq-TextInput

テキストの入力ボックスを表示する汎用部品です。1行です。

.wq-size-???

入力ボックスの幅を指定するモディファイアです。
nanoは一番小さく、半角3文字分程度です。
miniは半角5文字分程度です。
smallは半角8文字分程度です。
normal(既定値)は半角13文字分程度です。
fullは横幅いっぱいです。

.wq-TextArea

テキストの入力ボックスを表示する汎用部品です。複数行です。

.wq-size-???

入力ボックスの高さを指定するモディファイアです。
nanoは一番小さく、2行分程度です。
miniは3行分程度です。
smallは4行分程度です。
normal(既定値)は6行分程度です。
fullは10行分程度です。

.wq-Radio

ラジオボタンを表示する汎用部品です。

.wq-Checkbox

チェックボックスを表示する汎用部品です。

.wq-Echo

入力画面で入力されたデータを、確認画面で表示するための汎用部品です。

.wq-Button

ボタンを表示する汎用部品です。

.wq-type-???

ボタンの種類を指定するモディファイアです。
normal(既定値)は通常のボタンを表します。
primaryは、それが主要なボタンであることを表します。

.wq-InputGroup

子の部品を横に並べて表示する汎用部品です。

.wq-gutter-???

子の部品の間の隙間を指定するモディファイアです。
none(既定値)は隙間を作りません。
miniは最小の隙間を作ります。
smallminiより大きな隙間を作ります。

.wq-Control

ラベル、入力部品、注意書き、エラーメッセージを1つにまとめ上げて、フォームの入力フィールドとして成立させるための部品です。「コントロール」と呼んでいます。

.wq-Control > .wq–header

コントロールのヘッダー部の要素です。
ヘッダー部にはラベルが表示されます。

.wq-content-empty

.wq-Control > .wq--headerモディファイアで、コントロールのラベルが空であることを表します。

.wq-Control > .wq–header > .wq–label

コントロールのラベル要素です。

.wq-Control > .wq–header > .wq–label > .wq–required

コントロールが入力必須項目の場合に表示される「必須」の文字の要素です。

.wq-Control > .wq–body

コントロールのボディ部の要素です。
ボディ部は入力部品、注意書き、エラーメッセージで構成されています。

.wq-Control > .wq–body > .wq–note

コントロールの注意書きの要素です。
このタグの中には任意のHTMLが入る可能性があります。

.wq-Control > .wq–body > .wq–message

コントロールのエラーメッセージの要素です。
入力内容に問題がある場合に表示されます。

.wq-Option

料金計算の選択肢を表示する部品です。

.wq-Option > .wq–input

選択肢の状態を表す要素です。

.wq-Option > .wq–label

選択肢のラベルとなる要素です。

.wq-Option > .wq–label > .wq–media

選択肢のメディア部を表示する要素です。

.wq-Option > .wq–label > .wq–main

選択肢のメイン部を表示する要素です。

.wq-Option > .wq–label > .wq–main > .wq–name

選択肢の名前を表示する要素です。

.wq-Option > .wq–label > .wq–main > .wq–note

選択肢の注意書きを表示する要素です。

.wq-Option > .wq–label > .wq–main > .wq–prices

選択肢の料金をまとめて表示する要素です。
「まとめて」というのは、選択肢は「通常料金」と「(販売)料金」を並べて表示できるからです。この要素はこれらの料金をグループ化します。

.wq-Option > .wq–label > .wq–main > .wq-prices > .wq–normalPrice

選択肢の通常料金を表示する要素です。

.wq-Option > .wq–label > .wq–main > .wq–prices > .wq–price

選択肢の(販売)料金を表示する要素です。

.wq-Selector

料金計算の選択項目を表す部品です。

.wq-Selector > .wq–head

選択項目のヘッダーを表す要素です。

.wq-Selector > .wq–head > .wq–media

選択項目のヘッダーのメディア部を表す要素です。

.wq-Selector > .wq–head > .wq–main

選択項目のヘッダーのメイン部を表す要素です。

.wq-Selector > .wq–head > .wq–main > .wq–name

選択項目の名前を表す要素です。

.wq-Selector > .wq–head > .wq–main > .wq–note

選択項目の注意書きを表す要素です。

.wq-Selector > .wq–head > .wq–message

選択項目のエラーメッセージを表す要素です。

.wq-Selector > .wq–body

選択項目の本体部分を表す要素です。
この中に選択肢(.wq-Option)が複数配置されます。

.wq-Quantity

数量項目の部品です。
.wq-Quantityの構造は.wq-Selectorと似ています。

.wq-Quantity > .wq–head

数量項目のヘッダーを表す要素です。

.wq-Quantity > .wq–head > .wq–media

数量項目のヘッダーのメディア部を表す要素です。

.wq-Quantity > .wq–head > .wq–main

数量項目のヘッダーのメイン部を表す要素です。

.wq-Quantity > .wq–head > .wq–main > .wq–name

数量項目の名前を表す要素です。

.wq-Quantity > .wq–head > .wq–main > .wq–note

数量項目の注意書きを表す要素です。

.wq-Quantity > .wq–head > .wq–message

数量項目のエラーメッセージを表す要素です。

.wq-Quantity > .wq–body

数量項目の本体部分を表す要素です。
この中に、入力ボックス(.wq-InputText)と単位を含む入力グループ(.wq-InputGroup)が配置されます。

.wq-Quantity > .wq–body .wq–suffix

数量項目の入力補助となる「単位」を表す要素です。

.wq-HNavigator

フロー形式の見積計算を表す部品です。

.wq-HNavigator > .wq–items

フロー形式の見積計算の各項目をグループ化する要素です。
この要素の中に選択項目や数量項目が配置されます。

.wq-WNavigator

ウィザード形式の見積計算を表す部品です。

.wq-is-active

.wq-WNavigator部品のモディファイアで、ウィザードダイアログが表示されていることを表します。

.wq-WNavigator > .wq–base

.wq-WNavigator部品の「地」の要素です。ウィザードダイアログが表示されていなくても、この部分は表示されます。
通常は、ここにはウィザードダイアログを開くためのボタンだけが配置されています。

.wq-WNavigator > .wq–base > .wq–message

エラーメッセージを表す要素です。

.wq-WNavigator > .wq–overlay

ウィザードダイアログが表示される際に、「地」の部分を覆うための要素です。
ウィザードダイアログの親です。

.wq-WNavigator > .wq–overlay > .wq–dialog

ウィザードダイアログを表す要素です。

.wq-WNavigator > .wq–overlay > .wq–dialog > .wq–main

ウィザードダイアログの本体部分を表す要素です。
この中でスライドが動きます。

.wq-is-flipped

wq-WNavigator > .wq--overlay > .wq--dialog > .wq--mainのモディファイアで、スライドを逆方向に遷移させるべきであることを表します。

.wq-WNavigator > .wq–overlay > .wq–dialog > .wq–main > .wq–slide

ウィザードダイアログのスライドを表す要素です。

.wq-WNavigator > .wq–overlay > .wq–dialog > .wq–action

ウィザードダイアログの下部に表示されるアクションボタンのリストを表す要素です。

.wq-Monitor

計算された見積を表示する部品です。

.wq-Monitor > .wq–menu

見積表示を操作するためのメニューを表す要素です。

.wq-Monitor > .wq–entries

見積表示の明細行をまとめる要素です。ヘッダ行を含みます。

.wq-Monitor > .wq–entries > .wq–entry

見積表示の行を表す要素です。

.wq-Monitor > .wq–entries > .wq–entry > .wq–prop

見積表示の列を表す要素です。

.wq-Monitor > .wq–footer

見積表示の合計行をまとめる要素です。

.wq-Monitor > .wq–footer > .wq–entry

見積表示の合計行を表す要素です。

.wq-NavBar

ナビゲーションバーを表す部品です。

.wq-is-monitor-shown

ナビゲーションバーのモディファイアで、ユーザーの操作により明示的に見積表示(.wq-Monitor)が表示されたことを表します。

.wq-NavBar > .wq–progress

入力の進み具合を表す要素です。

.wq-NavBar > .wq–progress > .wq–bar

入力の進み具合を表示するプログレスバーの要素です。

.wq-NavBar > .wq–progress > .wq–bar > .wq–bar-content

プログレスバーの「進み具合」を表す要素です。

.wq-NavBar > .wq–progress > .wq–min

入力の進み具合を数字で表現した場合の、初期状態の数値を表す要素です。

.wq-NavBar > .wq–progress > .wq–current

入力の進み具合を数字で表現した場合の、現在の数値を表す要素です。

.wq-NavBar > .wq–progress > .wq-max

入力の進み具合を数字で表現した場合の、最終状態の数値を表す要素です。

.wq-NavBar > .wq–progress > .wq–percentage

入力の進み具合をパーセンテージで表現した場合の数値を表す要素です。

.wq-NavBar > .wq–commands

フォーム全体に関わる操作を行うためのボタンをグループ化する要素です。

.wq-Attributes

お客様情報の入力欄をまとめる部品です。
この中に.wq-Controlが配置されます。

.wq-Form

フォーム全体をまとめる部品です。

.wq-Form > .wq–lead

フォームのリード文を表す要素です。

.wq-lct-enabled

部品や要素がライフサイクルトランジションをサポートすることを表すモディファイアです。
このクラスが付いている部品や要素は、下記の.wq-is-created.wq-is-removedを用いて、作成時・削除時のCSSトランジションを記述できます。

.wq-is-created

要素が作られた直後であることを示します。
CSSトランジションで使うことを想定しています。

.wq-is-removed

要素が削除される直前であることを示します。
CSSトランジションで使うことを想定しています。

.wq-is-run

要素がトランジションの最中であることを表します。

.wq-for-created

トランジションが「作成」のために行われていることを表します。

.wq-is-invalid

入力ボックスに対するユーザーの入力が適切でないことを表します。

.wq-is-confirming

確認画面を表示中であることを表します。

.wq-belongs-???

このモディファイアが付与された要素が、どの部品に属しているかを教えます。

.wq-for-???

このモディファイアが付与された要素が、何のために使われているかを教えます。

.wq-x-suspended

モーダルが表示されているときに、「地」のhtml要素とbody要素に付与されます。「地」の文書のスクロールを無効にするために使われます。

0 0