This article list the available fields types for Astroid (Similar to Joomla !’s standard form fields), This can be very
useful
when you are developing your template in Astroid and want to modify the existing options in the XML. The field types
list is constantly updated based as we add new fields in Astroid.
Available field types
- astroidgroup
- astroidradio
- astroidmedia
- astroidlist
- astroidswitch
- AstroidColor
- astroidtypography
- astroidrange
- astroidcalendar
- textarea
- list
- astroidmoduleposition
- astroidicon
- menu
- astroidpreloaders
- customcss
- customjs
astroidgroup form field type
The astroidgroup form field type lets you group several fields
within one section/heading. The section heading is also added under the tabs navigation on the left.
Example
< field type="astroidgroup" name="fieldname" title="title Goes here" description="description goes here"/>
astroidradio form field type
The Asrtroidradio form field type provides radio buttons
to select different/multiple options. Example
< field type="astroidradio" name="fieldname" title="title Goes her" description="dscription goes here">
< option value="option_one"> option_one< /option>
< option value="option_two"> option_two< /option>
< /field>
Input values:
| Value | Description | Required |
|---|---|---|
| type | Field type (must be astroidradio) and this is mandatory | yes |
| name | The name of the field that will be used for storing values in the database | yes |
| title | The title of the field that should be displayed in the left navigation & as a heading | yes |
| description | The description that will be displayed under the title (heading) | no |
astroidmedia form field type
The Astroidmedia form field type provides media option to
upload images like background image, logo etc. Example
< field type="astroidmedia" name="fieldname" title="title Goes here" description="description goes here"/>
Input values:
| Value | Description | Required |
|---|---|---|
| type | Field type (must be astroidmedia) and this is mandatory | yes |
| name | The name of the field that will be used for storing values in the database | yes |
| title | The title of the field that should be displayed in the left navigation & as a heading | yes |
| description | The description that will be displayed under the title (heading) | no | media | Videos/Images | no |
astroidlist form field type
With Astroidlist form field type, we can create a
drop-down list. It allows the user to choose one value from a list. Example
< field type="astroidlist" name="fieldname" title="title Goes here" description="description goes here" astroid-variable="value for dropdown list" />
Input values:
| Value | Description | Required |
|---|---|---|
| type | Field type (must be astroidlist) and this is mandatory | yes |
| name | The name of the field that will be used for storing values in the database | yes |
| title | The title of the field that should be displayed in the left navigation & as a heading | yes |
| description | The description that will be displayed under the title (heading) | no |
| astroid-variable | Provided a value for drop-down list (astroid list). | yes |
astroidswitch form field type
The astroidswitch form field provide a switch i.e a
checkbox which enables a user to make choice (binary choice), a choice between one of two possible mutually exclusive
options Example
< field type="astroidswitch" name="fieldname" title="Title Goes here" description="Description goes here" checked="false/true" />
Input values:
| Value | Description | Required |
|---|---|---|
| type | Field type (must be astroidswtich) and this is mandatory | yes |
| name | The name of the field that will be used for storing values in the database | yes |
| title | The title of the field that should be displayed in the left navigation & as a heading | yes |
| description | The description that will be displayed under the title (heading) | no |
| checked | This is the default value false==0 and true==1. Checked=”true” means astroidswitch is checked and checked=”false” means astroidswitch is not checked |
no |
AstroidColor form field type
The Color form field provides a color picker to select
the color. Example
< field type="astroidcolor" name="fieldname" title="Title Goes here" description="Description goes here" />
Input values:
| Value | Description | Required |
|---|---|---|
| type | Field type (must be astroidcolor) and this is mandatory | yes |
| name | The name of the field that will be used for storing values in the database | yes |
| title | The title of the field that should be displayed in the left navigation & as a heading | yes |
| description | The description that will be displayed under the title (heading) | no |
astroidtypography form field type
For typography h1, h2, h3, h4, h5, h6 & body.
Example
< field astroidgroup="body_typography" name="fieldname" type="astroidtypography" font-face="" alt-font-face="" font-color="" font-size="1" font-unit="em" letter-spacing="0” line-height="1" font-style="" font-weight="400" text-transform="none"></field>
Input Values:
| Name | Default value | Type | Description |
|---|---|---|---|
| font-face | Arial | STRING | font-face can be Arial, Times New Roman, Verdana and Trebuchet and other’s can be possible |
| alt-font-face | Abel | STRING | If the browser does not support the first font family, it tries the Alternate font family. |
| font-color | White | STRING | Font-color can be Hex, RGB or RGBA |
| font-size | 1 | INT | font-size property sets the size of a font |
| font-unit | em | STRING | font-unit can be px, em pt, ex etc |
| letter-spacing | 0 | INT | letter-spacing property increases or decreases the space between characters in a text. |
| line-height | 1 | INT | line-height property specifies the height of a line |
| font-style | None | STRING | font-style can be italic, oblique and many more |
| font-weight | 400 | INT | font-weight property sets how thick or thin characters in text should be displayed. Font-weight can be normal, bold, bolder etc. |
| text-transform | none | STRING | text-transform can be none, capitalize, uppercase, lowercase, initial, inherit. |
| color-picker | true | STRING | Provides color picker popup. (You can send in false in order to turn off the color picker) |
astroidrange form field type
Let the user specify a numeric value which must be no
less than a minimum value, and no more than another maximum value. Example
< field name="fieldname" type="astroidrange" min="20" max="500" step="1" postfix="px" prefix="" default="40" description="description goes here" />
Input Values:
| Name | Description | Required |
|---|---|---|
| type | Field type (must be astroidrange) and this is mandatory | yes |
| name | The name of the field that will be used for storing values in the database | yes |
| title | The title of the field that should be displayed in the left navigation & as a heading | yes |
| description | The description that will be displayed under the title (heading) | no |
| min | min attribute specifies the minimum value for the astroidrange | no |
| max | min attribute specifies the maximum value for the astroidrange | no |
| step | step attribute specifies the size of each movement (an increment or jump between values) of the astroidrange |
no |
| postfix | Postfix attribute specifies what to show after range value | no |
| prefix | Prefix attribute specifies what to show before range value | no |
| default | Default attribute specifies the default value of astroidrange like default range start from 70 | no |
astroidcalendar form field type
Astroidcalendar field type let the user select date
from the calendar like Countdown date. Example
< field name="fieldname" type="astroidcalendar" description="description goes here" default="2017-05-15" > < /field>
Input Values:
| Name | Description | Required |
|---|---|---|
| type | Field type (must be astroidcalendar) and this is mandatory | yes |
| name | The name of the field that will be used for storing values in the database | yes |
| title | The title of the field that should be displayed in the left navigation & as a heading | yes |
| description | The description that will be displayed under the title (heading) | no |
| default | Default date to be shown in calendar | no |
Astroidtext form field type
Elements of type text create basic, single-line inputs.
You should use them anywhere you want the user to enter a single-line value. Example
< field type="astroidtext" label="Label goes here" description="description goes here" default="48rem" > < /field>
Input Values:
| Name | Description | Required |
|---|---|---|
| type | Field type (must be astroidtext) and this is mandatory | yes |
| name | The name of the field that will be used for storing values in the database | yes |
| title | The title of the field that should be displayed in the left navigation & as a heading | yes |
| description | The description that will be displayed under the title (heading) | no |
| default | To set the default value in the text field | no |
textarea form field type
Textarea defines a multi-line text input control. A text area
can hold an unlimited number of characters. Example
< field name="fieldname" type="textarea" filter="raw" label="Label goes here" description="description goes here" hint="hint goes here" />
Input Values:
| Name | Description | Required |
|---|---|---|
| type | Field type (must be textarea) and this is mandatory | yes |
| name | The name of the field that will be used for storing values in the database | yes |
| title | The title of the field that should be displayed in the left navigation & as a heading | yes |
| description | The description that will be displayed under the title (heading) | no |
| filter | Method to recursively filter data for form fields | no |
| hint | The text displayed in the html placeholder element | no |
List form field type
With list form field type we can create a drop-down list. It
allows the user to choose one value from a list. Example
< field name="fieldname" type="list" label="Label goes here" description="description goes here" default="option_two" astroid-variable="astroid variable goes here">
< option value="option_one"> option_one< /option>
< option value="option_two"> option_two< /option>
< /field>
Input Values:
| Name | Description | Required |
|---|---|---|
| default | With default value we can set which value is by default selected in drop down list | no |
| astroid-variable | Provide a value for drop down list (astroid list) | no |
astroidmodulesposition form field type
A module position is a placeholder in a
template. Placeholders identify one or several positions within the template. Example
< field astroidgroup="astroidgroup goes here" name="fieldname" type="astroidmodulesposition" label="label goes here" default="" description="description goes here" />
input
| Name | Description | Required |
|---|---|---|
| type | Field type (must be astroidmodulesposition) and this is mandatory | yes |
| name | The name of the field that will be used for storing values in the database | yes |
| title | The title of the field that should be displayed in the left navigation & as a heading | yes |
| description | The description that will be displayed under the title (heading) | no |
astroidicon form field type
AstroidIcon provides you with a list of icons available
for the back to top icon. The list is hard coded in the code and can’t be modified on a template level.
Example
< field description="description goes here" name="fieldname" type="astroidicon" default="fas fa-long-arrow-alt-up" label="label goes here" />
Input Values:
| Name | Description | Default value | Required |
|---|---|---|---|
| default | With default value we can set which value is by default selected in drop down list | fas fa-long-arrow-alt-up | no |
Menu form field type
The menu form field type provides a drop down list of the
available menus from your Joomla ! site. If the field has a saved value this is selected when the page is first loaded.
If not, the default value (if any) is selected. Example
< field name="fieldname" type="menu" default="mainmenu" label="label goes here" description="description goes here" />
Input Values:
| Value | Description | Required |
|---|---|---|
| Name | Description | Required |
| type | This is mandatory and must be menu | yes |
| name | This is the unique name of the field | yes |
| label | This is the descriptive title of the field | yes |
| default | This is the default menu | no |
| description | This is the text that will be shown as a tooltip when the user moves the mouse over the drop-down box |
no |
Preloader Animation
Example
< field name="fieldname" type="menu" default="astroidpreloaders" label="label goes here" description="description goes here" />
Input Values:
| Value | Description | Required |
|---|---|---|
| Name | Description | Required |
| type | This is mandatory and must be astroidpreloaders | yes |
| name | This is the unique name of the field | yes |
| astroid-variable | This is constant value which comes from the constant.php file (PHP ARRAY) | no |
| label | This is the descriptive title of the field | yes |
| default | This is the default circle | no |
| description | This is the text that will be shown as a tooltip when the user moves the mouse over the drop-down box |
no |
Code
Custom CSS
You can use the Custom CSS to customize the appearance.
Example
< field code="css" name="customcss" type="textarea" label="Label goes here" description="Description goes here"> < /field>
Custom JavaScript
Example
< field code="javascript" name="customjs" type="textarea" label="Label goes here" description="Description goes here"> < /field>