Merge pull request FluidTYPO3#988 from cweiske/example-grid

[DOC] Usage example for flux:grid*
htuscher · Nov 4, 2015 · 5186d3e · 5186d3e
2 parents 7c32264 + cbf421b
commit 5186d3e
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 1 deletion.
diff --git a/Classes/ViewHelpers/Grid/ColumnViewHelper.php b/Classes/ViewHelpers/Grid/ColumnViewHelper.php
@@ -14,6 +14,13 @@
 
 /**
  * Flexform Grid Column ViewHelper
+ *
+ * Used inside `<flux:grid.row>` tags.
+ *
+ * Use the `name` attribute for grids in content elements,
+ * and the `colPos` attribute for grids in pages templates.
+ *
+ * See `<flux:grid>` for an example.
  */
 class ColumnViewHelper extends AbstractFormViewHelper {
 

diff --git a/Classes/ViewHelpers/Grid/RowViewHelper.php b/Classes/ViewHelpers/Grid/RowViewHelper.php
@@ -15,6 +15,11 @@
 
 /**
  * Flexform Grid Row ViewHelper
+ *
+ * Used inside `<flux:grid>` tags.
+ * Usually contains `<flux:grid.column>` tags.
+ *
+ * See `<flux:grid>` for an example.
  */
 class RowViewHelper extends AbstractFormViewHelper {
 

diff --git a/Classes/ViewHelpers/GridViewHelper.php b/Classes/ViewHelpers/GridViewHelper.php
@@ -11,7 +11,53 @@
 use TYPO3\CMS\Fluid\Core\Rendering\RenderingContextInterface;
 
 /**
- * Grid container ViewHelper
+ * Grid container ViewHelper.
+ *
+ * Use `<flux:grid.row>` with nested `<flux:grid.column>` tags
+ * to define a tablular layout.
+ *
+ * Preview rendering can be done with `<flux:widget.grid>`.
+ * For frontend rendering, use `flux:content.render`.
+ *
+ * ### Content elements
+ *
+ * Use the `name` and `area` attributes.
+ *
+ * #### Grid for a two-column container element
+ *
+ *     <flux:grid>
+ *         <flux:grid.row>
+ *             <flux:grid.column name="left" />
+ *             <flux:grid.column name="right" />
+ *         </flux:grid.row>
+ *     </flux:grid>
+ *
+ * #### Container element preview rendering
+ *
+ *     <flux:widget.grid />
+ *
+ * #### Container element frontend rendering
+ *
+ *     <flux:content.render area="left" />
+ *     <flux:content.render area="right" />
+ *
+ * ### Pages
+ *
+ * Use the `colPos` and `column` attributes.
+ *
+ * #### Two-colum page template
+ *
+ *     <flux:grid>
+ *         <flux:grid.row>
+ *             <flux:grid.column colPos="0" name="Main" colspan="3" style="width: 75%" />
+ *             <flux:grid.column colPos="1" name="Secondary" colspan="1" style="width: 25%" />
+ *         </flux:grid.row>
+ *     </flux:grid>
+ *
+ * #### Page rendering
+ *
+ *     <v:content.render column="0" />
+ *     <v:content.render column="1" />
  */
 class GridViewHelper extends AbstractFormViewHelper {