CSSGridItem - Revision history

Ghenne: /* Examples */

2019-03-09T22:11:48Z

Examples

← Older revision		Revision as of 22:11, 9 March 2019
Line 73:		Line 73:

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

			[[Category:Common]]

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

Ghenne: /* CSSGridItem Properties */

2019-02-04T13:54:45Z

CSSGridItem Properties

← Older revision		Revision as of 13:54, 4 February 2019
Line 23:		Line 23:
	== Properties ==		== Properties ==

	=== CSSGridItem Properties ===		=== CSSGridItem Properties ===

			Areas can be specified two ways:
			* By assigning names to the gridArea property of each cell, then listing them in the CSSGrid's gridTemplateAreas property.
			* By specifying gridColumnStart, gridColumnEnd, gridRowStart and gridRowEnd.

	{\| class="wikitable"		{\| class="wikitable"
	\|-		\|-

Ghenne: /* CSSGridItem Properties */

2019-02-04T13:51:42Z

CSSGridItem Properties

← Older revision		Revision as of 13:51, 4 February 2019
Line 26:		Line 26:
	{\| class="wikitable"		{\| class="wikitable"
	\|-		\|-
	\| ~~GridArea~~ \|\| Name for the area. Use in CSSGrid's gridTemplateAreas property.		\| gridArea \|\| Name for the area. Use in CSSGrid's gridTemplateAreas property.
	\|-		\|-
	\| gridColumnStart \|\| Specifies a grid item’s start position within the grid row. Examples: auto, 3, -1, span 2		\| gridColumnStart \|\| Specifies a grid item’s start position within the grid row. Examples: auto, 3, -1, span 2

Ghenne at 13:51, 4 February 2019

2019-02-04T13:51:27Z

← Older revision		Revision as of 13:51, 4 February 2019
Line 3:		Line 3:
	== Description ==		== Description ==

	The ~~CSS Grid Layout Module offers~~ a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.		The CSSGridItem control works with the [[CSSGrid]] control to provide a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. Its only use is as a child to CSSGrid.

	~~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 CSSGridItem 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.		The CSSGridItem 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 CSSGridItem and use Add Child. The control will then move into the CSSGridItem. 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.		CSSGridItems can contain other CSSGrids.

	To add a ~~CSSGrid~~ control to your app, choose the ~~CSSGrid~~ 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 ~~CSSGrid~~ to add children.		To add a CSSGridItem control to your app, choose the CSSGridItem 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 CSSGridItem to add children.

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

	Here are some useful resources for learning more about using ~~CSDGrid~~:		Here are some useful resources for learning more about using CSSGrid:
	* https://www.w3schools.com/css/css_grid.asp		* https://www.w3schools.com/css/css_grid.asp
	* https://css-tricks.com/snippets/css/complete-guide-grid/		* https://css-tricks.com/snippets/css/complete-guide-grid/
	* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout		* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout


	~~=== alignContent and justifyContent ===~~

	~~[[File:CSSGrid2.png\|frameless\|666px]]~~

	~~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.~~

	~~{\| class="wikitable"~~
	~~\| 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 ==		== Properties ==

	=== ~~CSSGrid~~ Properties ===		=== CSSGridItem Properties ===
	{\| class="wikitable"		{\| class="wikitable"
	\|-		\|-
	\| ~~alignContent~~ \|\| ~~The align-content property is used to align~~ the ~~whole grid vertically inside the container~~. ~~See above for options~~.		\| GridArea \|\| Name for the area. Use in CSSGrid's gridTemplateAreas property.
	\|-		\|-
	\| ~~gridTemplateColumns~~ \|\| ~~Defines the line names and track sizing functions of~~ the grid ~~columns~~.~~<br>~~		\| gridColumnStart \|\| Specifies a grid item’s start position within the grid row. Examples: auto, 3, -1, span 2
	~~example~~: auto ~~auto auto~~
	\|-		\|-
	\| ~~gridTemplateRows~~ \|\| ~~Defines the line names and track sizing functions of~~ the grid ~~rows~~.~~<br>~~		\| gridColumnEnd \|\| Specifies a grid item’s end position within the grid row. Examples: auto, 3, -1, span 2
	~~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~~:~~<br>~~		\| gridRowStart \|\| Specifies a grid item’s start position within the grid row. Examples: auto, 3, -1, span 2
	~~'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.~~		\| gridRowEnd \|\| Specifies a grid item’s end position within the grid row. Examples: auto, 3, -1, span 2
	\|-		\|-
	~~\| gridRowGap \|\| Sets the size of the gap between an element's rows. Can be 'normal', px, %, etc.~~
	\|}		\|}

Ghenne: Created page with "666px == Description == The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web p..."

2019-02-04T13:14:24Z

Created page with "frameless|666px == Description == The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web p..."

New page

[[File:CSSGrid1.png|frameless|666px]]

== Description ==

The CSS Grid Layout Module offers 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 Toolbar, 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: <code>CSSGrid.addChild(Button1)</code>.

Here are some useful resources for learning more about using CSDGrid:
* 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

=== alignContent and justifyContent ===

[[File:CSSGrid2.png|frameless|666px]]

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.

{| class="wikitable"
| 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 ===
{| class="wikitable"
|-
| 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.<br>
example: auto auto auto
|-
| gridTemplateRows || Defines the line names and track sizing functions of the grid rows.<br>
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:<br>
'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 and methods|properties]] are supported, plus:
{| class="wikitable"
|-
| addChild(''control'') || ''control'' is added to the Control. Runtime.
|-
| attributes || A list of [http://en.wikipedia.org/wiki/HTML_attribute 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|events]] are supported.

== Examples ==

[[Category:Language Reference]]

[[Category:Controls]]

[[Category:General]]