Difference between revisions of "Formitem Appearance"

From Lianjapedia
Jump to: navigation, search
Line 1: Line 1:
 
''Under Construction''
 
''Under Construction''
  
−
Form Sections automatically handle the layout of the Fields they contain.  Attributes are available at Field or Section level to configure the appearance of the Fields.
+
==Overview==
  
−
[[Themes]] and [[CSS Styles]] can also be used to specify the appearance of the UI.
+
[[{{ns:file}}:formitems1.png|450px|thumb|left|link={{filepath:formitems1.png}}|Formitems]]
  
−
[[{{ns:file}}:formitems_default.png|450px|thumb|left|link={{formitems_default.png}}|Default Appearance]]
 
  
  
  
−
By default, the '''Caption size''' and '''Data size''' are ''Small'' and the '''Caption position''' is ''Beside'', so the Caption is displayed to the left of the Data.
+
Form Sections automatically handle the layout of the Field and Gadget formitems they contain.
  
 +
Attributes are available at Field/Gadget or Section level to configure the appearance of the formitems.
 +
 +
These can configure the formitem 'Caption' or its 'Data'.
 
<br clear=all>
 
<br clear=all>
  
 +
The Appearance, Caption and Data Field and Gadget attributes apply to that formitem only.
  
−
==Field Attributes==
+
==Appearance Attributes==
  
−
Field attributes apply to that Field only.
+
===CSS style===
 +
* See [[CSS]].
  
 +
===Caption position===
 
[[{{ns:file}}:fi_caption_above.png|450px|thumb|left|link={{filepath:fi_caption_above.png}}|Field: Caption Above]]
 
[[{{ns:file}}:fi_caption_above.png|450px|thumb|left|link={{filepath:fi_caption_above.png}}|Field: Caption Above]]
  
  
  
−
The '''Caption position''' can be ''Above''.
+
 
 +
By default, the '''Caption position''' is 'Beside'.
 +
 
 +
As shown here, it can be set to be 'Above' the Data.
  
 
<br clear=all>
 
<br clear=all>
Line 30: Line 38:
  
  
−
The '''Caption position''' can be ''RightToLeft'', in which case the Caption is displayed beside the Data, but to its right.
+
The '''Caption position''' can be set to 'RightToLeft', in which case the Caption is displayed beside the Data, but to its right.
  
 
<br clear=all>
 
<br clear=all>
Line 38: Line 46:
  
  
−
The '''Caption position''' can be ''None'', in which case no Caption is displayed.
+
The '''Caption position''' can be 'None', in which case no Caption is displayed.
  
 
<br clear=all>
 
<br clear=all>
Line 50: Line 58:
 
<br clear=all>
 
<br clear=all>
  
 +
===Caption size===
 
[[{{ns:file}}:fi_caption_size.png|450px|thumb|left|link={{filepath:fi_caption_size.png}}|Field: Caption Size]]
 
[[{{ns:file}}:fi_caption_size.png|450px|thumb|left|link={{filepath:fi_caption_size.png}}|Field: Caption Size]]
  
Line 58: Line 67:
 
<br clear=all>
 
<br clear=all>
  
 +
===Shading===
 +
 +
===Transparency type===
 +
 +
===Border radius===
 +
 +
==Caption Attributes==
 +
 +
===Caption===
 +
 +
===Background color===
 +
* See [[Colors]]
 +
 +
===Foreground color===
 +
* See [[Colors]]
 +
 +
===Font===
 +
* See [[Fonts]]
 +
 +
===Icon===
 +
 +
===Border width===
 +
 +
===Border color===
 +
* See [[Colors]].
 +
 +
===Transparency===
 +
 +
===Gradient colors===
 +
* See [[Gradients]].
 +
 +
===Gradient type===
 +
* See [[Gradients]].
 +
 +
===Gradient start color===
 +
* See [[Gradients]].
 +
 +
===Gradient end color===
 +
* See [[Gradients]].
 +
 +
==Data Attributes==
 +
See [[Data Attributes]] for other Field Data Attributes.
 +
 +
===Data size===
 
[[{{ns:file}}:fi_data_size.png|450px|thumb|left|link={{filepath:fi_data_size.png}}|Field: Data Size]]
 
[[{{ns:file}}:fi_data_size.png|450px|thumb|left|link={{filepath:fi_data_size.png}}|Field: Data Size]]
  
Line 70: Line 123:
 
Form Sections have attributes that affect all the Fields in the Section.  These will be applied to existing Fields and Fields subsequently added to the Section.
 
Form Sections have attributes that affect all the Fields in the Section.  These will be applied to existing Fields and Fields subsequently added to the Section.
  
 +
===Caption position===
 
[[{{ns:file}}:fs_caption_above.png|450px|thumb|left|link={{filepath:fs_caption_above.png}}|Form Section: Caption Above]]
 
[[{{ns:file}}:fs_caption_above.png|450px|thumb|left|link={{filepath:fs_caption_above.png}}|Form Section: Caption Above]]
  
Line 78: Line 132:
 
<br clear=all>
 
<br clear=all>
  
 +
===Caption size===
 
[[{{ns:file}}:fs_caption_size.png|450px|thumb|left|link={{filepath:fs_caption_size.png}}|Form Section: Caption Size]]
 
[[{{ns:file}}:fs_caption_size.png|450px|thumb|left|link={{filepath:fs_caption_size.png}}|Form Section: Caption Size]]
  
Line 86: Line 141:
 
<br clear=all>
 
<br clear=all>
  
 +
===Data size===
 
[[{{ns:file}}:fs_data_size.png|450px|thumb|left|link={{filepath:fs_data_size.png}}|Form Section: Data Size]]
 
[[{{ns:file}}:fs_data_size.png|450px|thumb|left|link={{filepath:fs_data_size.png}}|Form Section: Data Size]]
  
Line 94: Line 150:
 
<br clear=all>
 
<br clear=all>
  
 +
===Spacing===
 
[[{{ns:file}}:fs_spacing.png|450px|thumb|left|link={{filepath:fs_spacing.png}}|Form: Spacing]]
 
[[{{ns:file}}:fs_spacing.png|450px|thumb|left|link={{filepath:fs_spacing.png}}|Form: Spacing]]
  
Line 102: Line 159:
 
<br clear=all>
 
<br clear=all>
  
 +
===Caption width===
 
[[{{ns:file}}:fs_caption_width1.png|450px|thumb|left|link={{filepath:fs_caption_width1.png}}|Form: Caption Width default]]
 
[[{{ns:file}}:fs_caption_width1.png|450px|thumb|left|link={{filepath:fs_caption_width1.png}}|Form: Caption Width default]]
  

Revision as of 09:35, 3 May 2016

Under Construction

Overview

Formitems



Form Sections automatically handle the layout of the Field and Gadget formitems they contain.

Attributes are available at Field/Gadget or Section level to configure the appearance of the formitems.

These can configure the formitem 'Caption' or its 'Data'.

The Appearance, Caption and Data Field and Gadget attributes apply to that formitem only.

Appearance Attributes

CSS style

Caption position

Field: Caption Above



By default, the Caption position is 'Beside'.

As shown here, it can be set to be 'Above' the Data.


Field: Caption Right to Left


The Caption position can be set to 'RightToLeft', in which case the Caption is displayed beside the Data, but to its right.


Field: Caption None


The Caption position can be 'None', in which case no Caption is displayed.


Field: Caption None, App Inspector


With the Caption position set to None, you can no longer double-click the Caption to access the Field's attributes. Open the App Inspector using its button in the Headerbar and double-click on the Field's name to open the Field Attributes dialog.


Caption size

Field: Caption Size


The Caption size can be set to Small, Medium, Large or Largest.


Shading

Transparency type

Border radius

Caption Attributes

Caption

Background color

Foreground color

Font

Icon

Border width

Border color

Transparency

Gradient colors

Gradient type

Gradient start color

Gradient end color

Data Attributes

See Data Attributes for other Field Data Attributes.

Data size

Field: Data Size


The Data size can be set to Small, Medium, Large or Largest.


Form Section Attributes

Form Sections have attributes that affect all the Fields in the Section. These will be applied to existing Fields and Fields subsequently added to the Section.

Caption position

Form Section: Caption Above


As in the Field Attributes, the Caption position can be set to None, Above, Beside or RightToLeft.


Caption size

Form Section: Caption Size


As in the Field Attributes, the Caption size can be set to Small, Medium, Large or Largest.


Data size

Form Section: Data Size


As in the Field Attributes, the Data size can be set to Small, Medium, Large or Largest.


Spacing

Form: Spacing


The Spacing attribute controls the distance between the Fields.


Caption width

Form: Caption Width default


The default Caption width is 160.


Form: Caption Width


The Caption width can be increased or decreased as required.


See Also

Colors, Field Attributes, Form Section Attributes, Gradients

Retrieved from "https://www.lianja.com/doc/index.php?title=Formitem_Appearance&oldid=12752"