1,813
การแก้ไข
ผลต่างระหว่างรุ่นของ "CuneiForm"
→Drop-list Fields
| บรรทัดที่ 396: | บรรทัดที่ 396: | ||
==== Drop-list Fields ==== | ==== Drop-list Fields ==== | ||
<div><ul> | |||
<li style="display: inline-block;">[[ไฟล์:Form SelectField fat.png|300px|thumb|none|alt=Drop-list fields created via 'render_select'.|Drop-list fields created via 'render_select'.]]</li> | |||
<li style="display: inline-block;">[[ไฟล์:Form SelectField slim.png|300px|thumb|none|alt=Drop-list fields (slim) created via 'render_select'.|Drop-list fields (slim) created via 'render_select'.]]</li> | |||
</ul></div> | |||
The CuneiFox macro that handles rendering of drop-list fields is {{code|render_select}}. Again, '''DO NOT''' rely on argument order farther than ''form'' and ''blank'', '''ALWAYS PROVIDE''' argument keywords. | |||
'''<syntaxhighlight lang="javascript"> | |||
render_select(form, blank, | |||
field_modal=false, field_tab=false, | |||
label_width="105px", headless=false, | |||
hidden=false, tabindex=false, | |||
pad_bottom="default", | |||
// Arguments exclusive to 'render_select': | |||
force_fat=false, force_slim=false, slim_pb=2) | |||
// Arguments available only when calling 'render_select_slim' directly: | |||
bunch_pb=2) | |||
</syntaxhighlight>''' | |||
{| style="margin-left:20px;" | |||
|- style="vertical-align:top;" | |||
| style="width:120px;" | '''Parameters''' || | |||
* '''form''' ''(FlaskForm-CuneiForm)'' | |||
* '''blank''' ''(Field)'' | |||
* '''track_tb''' ''(str)'': The specification for table-tracking function. This argument takes the format {{code|lang=javascript|'<table_id>:<column_to_track>'}}. | |||
* '''search''' ''(str)'': The specification for search function. This argument takes the format {{code|lang=javascript|'<search_modal_id>:<lookup_col>'}}. If the search function is meant to fill other fields as well as this field itself, provide '''fill''' argument too. A field with '''search''' argument given is drawn with a ''Search'' button [[ไฟล์:Cuneifox search btn.png|25px|frameless|alt=Search button|Search button]]. | |||
* '''fill''' ''(str)'': The specification for fill function. This argument takes the format {{code|lang=javascript|'<field0>:<col0>,<field1>:<col1>,...'}}; where ''fieldX'' refers to a field within the same form, and ''colX'' refers to a column within the search result. | |||
* '''expand''' ''(str)'': The specification for form expansion. This argument takes the format {{code|lang=javascript|'<expand_modal_id>:<first_expand_field>'}}. A field with '''expand''' argument given is drawn with an ''Expand'' button [[ไฟล์:Cuneifox formexpand btn.png|25px|frameless|alt=Expand button|Expand button]]. | |||
* '''field_modal''' ''(str)'': The id of the modal holding this field. This value control the showing/hiding for the modal when the field gets or loses focus. | |||
* '''field_tab''' ''(str)'': The id of the tab holding this field. This value control the navigation to/away from the tab when the field gets or loses focus. | |||
* '''prepend''' ''(str)'': The string to attach to the left of the field. | |||
* '''clear_prepend''' ''(bool)'': Whether the HTML element {{code|lang=html|<span>}} holding the '''prepend''' string has a clear background. | |||
* '''append''' ''(str)'': The string to attach to the right of the field. | |||
* '''clear_append''' ''(bool)'': Whether the HTML element {{code|lang=html|<span>}} holding the '''append''' string has a clear background. | |||
* '''label_width''' ''(str: Effective only for fields drawn in slim mode)'': The width of the label {{code|lang=html|<div>}}. The value can be anything interpretable as CSS width, but {{code|lang=css|'<int>px'}} is recommended. | |||
* '''headless''' ''(bool)'': Whether to draw the label {{code|lang=html|<div>}} at all. | |||
* '''hidden''' ''(bool)'': Whether the field and the label is drawn but remain invisible. Hidden field is achieved by setting {{code|lang=css|1= display=none}} on the field and label's collective parent {{code|lang=html|<div>}}. | |||
* '''tabindex''' ''(int)'': The tab-index of the field. This feature is kept open for flexibility; no examples of uses exist at the time of writing. | |||
* '''pad_bottom''' ''(bool OR {{code|lang=javascript|'default'}})'': Whether the field should have some bottom spacing. | |||
* '''force_fat''' ''(bool)'': Whether to draw the field in ''fat'' mode regardless of {{code|form.slim}} and {{code|form.subslim}} values. | |||
* '''force_slim''' ''(bool)'': Whether to draw the field in ''slim'' mode regardless of {{code|form.slim}} and {{code|form.subslim}} values. | |||
* '''slim_pb''' and '''bunch_pb''' ''(int: 0 ~ 5)'': Set the bottom padding for ''slim'' field. This argument utilizes Bootstrap 4's {{code|lang=css|pb-0}} through {{code|lang=css|pb-5}} classes. | |||
|} | |||
==== Checkboxes & Toggles ==== | ==== Checkboxes & Toggles ==== | ||