diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 5cabf90..4efb37f 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -7,6 +7,8 @@ - [Checkbox](component_APIs/checkbox.md) - [ColorButton](component_APIs/color_button.md) - [Form](component_APIs/form.md) + - [Grid](component_APIs/grid.md) + -[Grid Children](component_APIs/grid_components.md) - [Menu](component_APIs/menu.md) - [Menu.Item](component_APIs/menu_item.md) - [Picker](component_APIs/picker.md) diff --git a/docs/component_APIs/grid.md b/docs/component_APIs/grid.md index 92e0b25..2922e55 100644 --- a/docs/component_APIs/grid.md +++ b/docs/component_APIs/grid.md @@ -1,8 +1,8 @@ -# Form +# Grid -A container where there is a label on the left and a component on the right. +A container where there are rows and columns to align the components. -Each form component has a single prop, `label` which sets the label to its left. It is required. +Every component has many props, which are described [here](grid_components.md) in detail. ```javascript import React, { Component } from 'react'; @@ -14,10 +14,14 @@ class Example extends Component { return ( -
- - - + + + + Hi + +
); @@ -37,7 +41,7 @@ render(); ### enabled -Whether the Form is enabled. +Whether the Grid is enabled. | **Type** | **Required** | | --- | --- | @@ -45,7 +49,7 @@ Whether the Form is enabled. ### visible -Whether the Form can be seen. +Whether the Grid can be seen. | **Type** | **Required** | | --- | --- | diff --git a/docs/component_APIs/grid_components.md b/docs/component_APIs/grid_components.md new file mode 100644 index 0000000..0b7a4f7 --- /dev/null +++ b/docs/component_APIs/grid_components.md @@ -0,0 +1,80 @@ +# Grid Children + +A child in a [Grid component](grid.md). Can specify the location in the grid, as well as additional formatting. + +```javascript +import React, { Component } from 'react'; + +import { render, Window, App, Form, TextInput } from 'proton-native'; + +class Example extends Component { + render() { + return ( + + + + + + Hi + + + + + ); + } +} + +render(); +``` + +## Props + +- [column](#column) +- [row](#row) +- [span](#span) +- [expand](#expand) +- [align](#align) + +## Reference + +### column + +What column the component resides in. + +| **Type** | **Required** | +| --- | --- | +| number | No | + +### row + +What row the component resides in. + +| **Type** | **Required** | +| --- | --- | +| number | No | + +### span + +How many rows/columns the component takes off. + +| **Type** | **Required** | +| --- | --- | +| object {x: number, y: number} | No | + +### expand + +Whether the component can expand in the direction. + +| **Type** | **Required** | +| --- | --- | +| object {h: bool, v: bool} | No | + +### align + +Whether the component is aligned with the other components in the column/row. + +| **Type** | **Required** | +| --- | --- | +| object {h: bool, v: bool} | No | \ No newline at end of file