CSSGrid: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
(Created page with "== Description == The FlexBox control is an HTML wrapper which you can use to create your own control or element. It was introduced in AppStudio 7. It has special styling fea...")
 
No edit summary
(20 intermediate revisions by the same user not shown)
Line 1: Line 1:
[[File:CSSGrid1.png|frameless|666px]]
== Description ==
== Description ==


The FlexBox control is an HTML wrapper which you can use to create your own control or element. It was introduced in AppStudio 7. It has special styling features which let you easily position any controls inside the FlexBox.
The CSSGrid control provides a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.


It is based on the [[Container]] control, so it works in much the same way. In fact, the Container can also do FlexBox positioning: it also has the special styling features. (As do [[Header]], [[GridColumn (Bootstrap)|GridColumn]] and [[GridRow (Bootstrap)|GridRow]]).
While regular controls (such as Buttons and Labels) can be added directly to a CSSGrid, there is a special control called [[CSSGridItem]] which is used to define sections within the Grid. CSSGridItems can be combined to make irregular sections in the CSSGrid. In the above example, the top row of the CSSGrid has been merged into a single control called Header.


It can be used to create customized HTML element by setting the ''HTMLTag'' property to <div> or the name of almost any other HTML element. The ''content'' property is the innerHTML of the element. It can be empty, simple text or a complex HTML structure.
The CSSGrid control can be used as a wrapper for other controls you have set up in your project. Add them to the Design Screen as usual, then right click in a CSSGrid and use Add Child. The control will then move into the CSSGrid. If you reposition the CSSGrid, the included controls ("children") will move with it. Use right click Remove Child to take a child out of a CSSGrid.


The FlexBox control can also be used as a wrapper for other controls you have set up in your project. Add them to the Design Screen as usual, then right click in a FlexBox and use Add Child. The control will then move into the FlexBox. If you reposition the FlexBox, the included controls ("children") will move with it. Use right click Remove Child to take a child out of a FlexBox.
CSSGrids can contain other CSSGrids.


The positioning of controls in a FlexBox defaults to 'relative'. When a control is added to a FlexBox, its left and top properties are set to 'initial', and 'Float:left;' is added to the Style property. The result is that children in a FlexBox act as [[Responsive Design Made Simple|Responsive Design]] elements: element flow and reflow is based on the screen size. If property is set to 'absolute', the top and left properties explicitly set the position of the children.
To add a CSSGrid control to your app, choose the CSSGrid icon in the Toolbox, then position it on the Design Screen. Use the Property Editor to set the properties you need. Right click in the CSSGrid to add children.


All the usual [[events]] are supported. FlexBoxes can contain other FlexBoxes.
At runtime, controls can be added as children to the CSSGrid or CSSGridItems using the addChild() function: <code>CSSGrid.addChild(Button1)</code>.


To add a FlexBox control to your app, choose the FlexBox icon in the Toolbar, then position it on the Design Screen. Use the Property Editor to set the properties you need. Right click in the FlexBox to add children.
Here are some useful resources for learning more about using CSSGrid:
* https://www.w3schools.com/css/css_grid.asp
* https://css-tricks.com/snippets/css/complete-guide-grid/
* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout


At runtime, controls can be added as children using the addChild() function: <code>FlexBox1.addChild(Button1)</code>.
===== NOTE =====


=== alignContent ===
The CSSGrid will not appear properly in the Design Screen of AppStudio on Windows. The Design Screen uses IE11 to render images: IE11 does not handle the CSSGrid properly. If you run your app in Chrome, it will render properly. MacOS is fine.
Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. display:flex must be set.


[[File:AlignContent.png|frameless|666px]]
=== alignContent and justifyContent ===


=== alignItems ===
[[File:CSSGrid2.png|frameless|666px]]
Specifies the default alignment for items inside the flexible container. display:flex must be set.


[[File:AlignItems.png|frameless|666px]]
The alignContent and justifyContent properties define how the CSSGrid will look. Both have the same possible values.


=== flexDirection ===
To see their effect, run the CSSGrid sample which comes with AppStudio. It has Select boxes which let you play with both settings so you can see the effect.
Sets the direction of the flexible items inside the control. display:flex must be set.


[[File:FlexDirection.png|frameless|666px]]
{| class="wikitable"
 
| start || The items are packed flush to each other toward the start edge of the alignment container in the cross axis
=== flexWrap ===
|-
Specifies whether the flexible items should wrap or not. display:flex must be set.
| end || The items are packed flush to each other toward the end edge of the alignment container in the cross axis
 
|-
[[File:FlexWrap.png|frameless|666px]]
| center || The items are packed flush to each other toward the center of the alignment container along the cross axis.
 
|-
=== justifyContent ===
| stretch || The items are shown so that the combined size exactly fills the alignment container along the cross axis.
Aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). display:flex must be set.
|-
 
| space-around || The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
[[File:JustifyContent.png|frameless|666px]]
|-
| space-between || The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
|-
| space-evenly || The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
|}


== Properties ==
== Properties ==


=== FlexBox Properties ===  
=== CSSGrid Properties ===  
{| class="wikitable"
{| class="wikitable"
|-
|-
| alignContent || Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. display:flex must be set.<br>
| alignContent || The align-content property is used to align the whole grid vertically inside the container. See above for options.
'''stretch:''' Default value. Lines stretch to take up the remaining space:''' <br>
|-
'''center:''' Lines are packed toward the center of the flex container<br>
| gridTemplateColumns || Defines the line names and track sizing functions of the grid columns.<br>
'''flex-start:''' Lines are packed toward the start of the flex container<br>
example: auto auto auto
'''flex-end:''' Lines are packed toward the end of the flex container<br>
'''space-between:''' Lines are evenly distributed in the flex container:''' <br>
'''space-around:''' Lines are evenly distributed in the flex container, with half-size spaces on either end:''' <br>
'''initial:''' Sets this property to its default value. <br>
'''inherit:''' Inherits this property from its parent element.,
|-
|-
| alignItems || Specifies the default alignment for items inside the flexible container. display:flex must be set.<br>
| gridTemplateRows || Defines the line names and track sizing functions of the grid rows.<br>
'''stretch:''' Default. Items are stretched to fit the container:''' <br>
example: auto auto auto
'''center:''' Items are positioned at the center of the container:''' <br>
'''flex-start:''' Items are positioned at the beginning of the container<br>
'''flex-end:''' Items are positioned at the end of the container:''' <br>
'''baseline:''' Items are positioned at the baseline of the container:''' <br>
'''initial:''' Sets this property to its default value.<br>
'''inherit:''' Inherits this property from its parent element.,
|-
|-
| flexDirection || Sets the direction of the flexible items inside the control. display:flex must be set.<br>
| gridTemplateAreas || Specifies named grid areas. Each line of the grid has a list of area names. The line are grouped by single quote signs. example:<br>
'''row:''' Default value. The flexible items are displayed horizontally, as a row:''' <br>
'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer'
'''row-reverse:''' Same as row, but in reverse order:''' <br>
'''column:''' The flexible items are displayed vertically, as a column.<br>
'''column-reverse:''' Same as column, but in reverse order:''' <br>
'''initial:''' Sets this property to its default value.<br>
'''inherit:''' Inherits this property from its parent element.,
|-
|-
| flexWrap || Specifies whether the flexible items should wrap or not. display:flex must be set.<br>
| gridColumnGap || Sets the size of the gap between an element's columns. Can be 'normal', px, %, etc.
'''nowrap:''' Default value. Specifies that the flexible items will not wrap:''' <br>
'''wrap:''' Specifies that the flexible items will wrap if necessary:''' <br>
'''wrap-reverse:''' Specifies that the flexible items will wrap, if necessary, in reverse order:''' <br>
'''initial:''' Sets this property to its default value. <br>
'''inherit:''' Inherits this property from its parent element. ,
|-
|-
| justifyContent || Aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). display:flex must be set.<br>
| gridRowGap || Sets the size of the gap between an element's rows. Can be 'normal', px, %, etc.
'''flex-start:''' Default value. Items are positioned at the beginning of the container:''' <br>
'''flex-end:''' Items are positioned at the end of the container:''' <br>
'''center:''' Items are positioned at the center of the container:''' <br>
'''space-between:''' Items are positioned with space between the lines<br>
'''space-around:''' Items are positioned with space before, between, and after the lines<br>
'''initial:''' Sets this property to its default value.<br>
'''inherit:''' Inherits this property from its parent element.
|}
|}


Line 104: Line 82:
|-
|-
| content || The text to use in between the HTML tags. Can be text or HTML. Design time. At runtime, use .innerHTML.
| content || The text to use in between the HTML tags. Can be text or HTML. Design time. At runtime, use .innerHTML.
|-
| HTMLTag || The [http://www.w3schools.com/tags/ HTML tag] of the control. Common values are div, button, text, ol, etc. For example. if value is 'button', then this HTML will be created: <button>''content''</button>. Design time.
|-
|-
| innerHTML || The text to use in between the HTML tags. Can be text or HTML. Run time. At Design Time,, use content.
| innerHTML || The text to use in between the HTML tags. Can be text or HTML. Run time. At Design Time,, use content.
|-
|-
| position || How children positioned. Default is 'relative': elements are positioned relative to each other and the size of the FlexBox. With 'absolute', controls are positioned within the FlexBox set by width and height. Other options are 'fixed' and 'static'. Design time.
| position || How children positioned. Default is 'relative': elements are positioned relative to each other and the size of the CSSGrid. With 'absolute', controls are positioned within the CSSGrid set by width and height. Other options are 'fixed' and 'static'. Design time.
|-
|-
| style || A list of [[style]] properties, each in the form styleName:value; Example: "height:40px; width:100px".Design time.
| style || A list of [[style]] properties, each in the form styleName:value; Example: "height:40px; width:100px".Design time.
Line 119: Line 95:


== Examples ==
== Examples ==
=== Change the color of the text ===
<pre>
FlexBox1.style.color = "red"
</pre>


[[Category:Language Reference]]
[[Category:Language Reference]]


[[Category:Controls]]
[[Category:Controls]]
[[Category:Common]]


[[Category:General]]
[[Category:General]]

Revision as of 22:10, 9 March 2019

Description

The CSSGrid control provides a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

While regular controls (such as Buttons and Labels) can be added directly to a CSSGrid, there is a special control called CSSGridItem which is used to define sections within the Grid. CSSGridItems can be combined to make irregular sections in the CSSGrid. In the above example, the top row of the CSSGrid has been merged into a single control called Header.

The CSSGrid control can be used as a wrapper for other controls you have set up in your project. Add them to the Design Screen as usual, then right click in a CSSGrid and use Add Child. The control will then move into the CSSGrid. If you reposition the CSSGrid, the included controls ("children") will move with it. Use right click Remove Child to take a child out of a CSSGrid.

CSSGrids can contain other CSSGrids.

To add a CSSGrid control to your app, choose the CSSGrid icon in the Toolbox, then position it on the Design Screen. Use the Property Editor to set the properties you need. Right click in the CSSGrid to add children.

At runtime, controls can be added as children to the CSSGrid or CSSGridItems using the addChild() function: CSSGrid.addChild(Button1).

Here are some useful resources for learning more about using CSSGrid:

NOTE

The CSSGrid will not appear properly in the Design Screen of AppStudio on Windows. The Design Screen uses IE11 to render images: IE11 does not handle the CSSGrid properly. If you run your app in Chrome, it will render properly. MacOS is fine.

alignContent and justifyContent

The alignContent and justifyContent properties define how the CSSGrid will look. Both have the same possible values.

To see their effect, run the CSSGrid sample which comes with AppStudio. It has Select boxes which let you play with both settings so you can see the effect.

start The items are packed flush to each other toward the start edge of the alignment container in the cross axis
end The items are packed flush to each other toward the end edge of the alignment container in the cross axis
center The items are packed flush to each other toward the center of the alignment container along the cross axis.
stretch The items are shown so that the combined size exactly fills the alignment container along the cross axis.
space-around The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
space-between The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
space-evenly The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

Properties

CSSGrid Properties

alignContent The align-content property is used to align the whole grid vertically inside the container. See above for options.
gridTemplateColumns Defines the line names and track sizing functions of the grid columns.

example: auto auto auto

gridTemplateRows Defines the line names and track sizing functions of the grid rows.

example: auto auto auto

gridTemplateAreas Specifies named grid areas. Each line of the grid has a list of area names. The line are grouped by single quote signs. example:

'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer'

gridColumnGap Sets the size of the gap between an element's columns. Can be 'normal', px, %, etc.
gridRowGap Sets the size of the gap between an element's rows. Can be 'normal', px, %, etc.

Other Properties

Standard properties are supported, plus:

addChild(control) control is added to the Control. Runtime.
attributes A list of HTML attributes. To prevent jQuery Mobile from styling the element, use data-role=none. Attributes are separated by spaces. Design time.
center Centers the contents, horizontally and vertically. Only works if HTMLTag is 'div'.
class List of CSS classes to apply to the element. Class names are separated by spaces. Design time.
content The text to use in between the HTML tags. Can be text or HTML. Design time. At runtime, use .innerHTML.
innerHTML The text to use in between the HTML tags. Can be text or HTML. Run time. At Design Time,, use content.
position How children positioned. Default is 'relative': elements are positioned relative to each other and the size of the CSSGrid. With 'absolute', controls are positioned within the CSSGrid set by width and height. Other options are 'fixed' and 'static'. Design time.
style A list of style properties, each in the form styleName:value; Example: "height:40px; width:100px".Design time.

Events

Standard events are supported.

Examples