Angular Json Schema のlayout属性の仕様
イシュー
"layout": [ { "type": "flex", "flex-flow": "row wrap", "items": [ "first_name", "last_name" ] }, ]
In addition to a large number of user-settable options, Angular JSON Schema Form also has the ability to load custom form control widgets and layout frameworks. All forms are constructed from these basic components. The default widget library includes all standard HTML 5 form controls, as well as several common layout patterns, such as multiple checkboxes and tab sets. The default framework library includes templates to style forms using Material Design, Bootstrap 3, or Bootstrap 4 (or plain HTML with no formatting, which is not useful in production, but can be helpful for development and debugging).
訳:ユーザー設定可能な多数のオプションに加えて、Angular JSON Schema Formにはカスタムフォームコントロールウィジェットやレイアウトフレームワークを読み込む機能もあります。すべてのフォームはこれらの基本コンポーネントから構成されています。デフォルトのウィジェットライブラリには、すべての標準HTML 5フォームコントロール、および複数のチェックボックスやタブセットなどのいくつかの一般的なレイアウトパターンが含まれています。デフォルトのフレームワークライブラリには、Material Design、Bootstrap 3、またはBootstrap 4を使用してフォームをスタイル設定するためのテンプレートが含まれています。
- ここに書いてあるレイアウトフレームワークってなんなんだ?
- 公式サイト( https://json-schema.org/ )の「Understanding JSON Schema」の内容を調べる
Understanding JSON Schema
Object
object — Understanding JSON Schema 7.0 documentation
Angular Schema Form の仕様はこれか?
{ key: "address.street"、//ドットはモデル上の属性を表す type: "text"、//フィールドの種類 title: "Street"、//利用可能であればスキーマから取得したフィールドのタイトル notitle:false、//タイトルを隠すにはtrueに設定 description: "Street name"、//可能であればスキーマから取得した説明はHTMLにすることができます validationMessage:"Oh noes, please write a proper address"、//カスタム検証エラーメッセージ onChange: "valueChanged(form.key、modelValue)"、// onChangeイベントハンドラ、式または関数 feedback:false、//インラインフィードバックアイコン disableSuccessState:false、//検証が成功したフィールドに 'has-success'クラスを適用しない場合はtrueに設定します disableErrorState:false、//検証に失敗したフィールドに 'has-error'クラスを適用しないようにするにはtrueを設定します placeholder: "Input ..."、//入力とテキストエリアのプレースホルダ ngModelOptions:{...}、// ng-model-optionsに渡されます readonly:true、//スキーマ内のreadOnlyと同じ効果。フィールドセットまたは配列を置く //そしてそれらのアイテムはそれを継承します。 htmlClass: "street foobar"、//コンテナdivに追加されるCSSクラス fieldHtmlClass: "street" //フィールド入力に追加されるCSSクラス labelHtmlClass: "street" //フィールドのラベルに追加されるCSSクラス copyValueTo:["address.street"]、//これらのスキーマキーに値をコピーします。 condition: "person.age <18" //Angularの表現に応じてフィールドを表示または非表示にする destroyStrategy: "remove" // "null"、 "empty"、 "remove"、または "retain"のいずれか。 $ destroyイベントのモデルを変更しました。デフォルトは "remove"です。 }
typeの種類
# | title | 内容 |
---|---|---|
1 | fieldset | |
2 | section | |
3 | actions | |
4 | text | |
5 | textarea | |
6 | number | |
7 | password | |
8 | checkbox | |
9 | checkboxes | |
10 | select | |
11 | submit | |
12 | button | |
13 | radios | |
14 | radios-inline | |
15 | radiobuttons | |
16 | help | |
17 | template | |
18 | tab | |
19 | array | |
20 | tabarray |
特殊なタイプ
# | title | 内容 |
---|---|---|
1 | input group addons | |
2 | select and checkboxes | |
3 | actions | |
4 | button | |
5 | radios and radiobuttons | |
6 | help | |
7 | template | |
8 | tabs | |
9 | array | |
10 | tabarray |
レイアウトフレームワークは、MaterialDesignFrameworkModule
flexは、@angular/flex-layout を使用
- https://github.com/angular/flex-layout:tilte
- Home · angular/flex-layout Wiki · GitHub
- Angular Flex-Layout Demos
- Flex-Layout と Angular Material でグッバイCSS – 検索フォームを作る | DevelopersIO
- 上記デモによると flex-flow 属性は、fxLayoutに一致しそう
# | title | 内容 |
---|---|---|
1 | row | |
2 | row-reverse | |
3 | column | |
4 | column | |
5 | row wrap |