From 5a78a5c901397a495ab89f2b50368b18fcec6a4d Mon Sep 17 00:00:00 2001 From: Galip Tolga Erdem Date: Thu, 19 Mar 2020 22:47:57 +0300 Subject: [PATCH] added grids documentation --- docs/en/UI/AspNetCore/Tag-Helpers/Grids.md | 286 +++++++++++++++++++++ 1 file changed, 286 insertions(+) create mode 100644 docs/en/UI/AspNetCore/Tag-Helpers/Grids.md diff --git a/docs/en/UI/AspNetCore/Tag-Helpers/Grids.md b/docs/en/UI/AspNetCore/Tag-Helpers/Grids.md new file mode 100644 index 0000000000..b33fa03c46 --- /dev/null +++ b/docs/en/UI/AspNetCore/Tag-Helpers/Grids.md @@ -0,0 +1,286 @@ +# Grids + +## Introduction + +Abp tag helpers for bootstrap based grid system. + + + +## Demo + +See the [grids demo page](https://bootstrap-taghelpers.abp.io/Components/Grids) to see it in action. + + + +### Sizing + +**Equal Width:** Creates columns with equal width. + +Sample: + +````xml + + + 1 of 2 + 2 of 2 + + + 1 of 3 + 2 of 3 + 3 of 3 + + +```` + +**Column Breaker:** `abp-column-breaker` is used for breaking the automatic width of placement of the current row and starting in a new row afterwards. + +Sample: + +````xml + + + column + column + + column + column + + +```` + +**Setting one column width:** size attribute is used for setting the width for a specific column. + +Sample: + +```xml + + + 1 of 3 + 2 of 3 (wider) + 3 of 3 + + + 1 of 3 + 2 of 3 (wider) + 3 of 3 + + +``` + +**Variable width content:** Auto resizing column based on content. + +```xml + + + 1 of 3 + Contrary to popular belief, Lorem Ipsum is not simply random text. + 3 of 3 + + + 1 of 3 + Variable width content + 3 of 3 + + +``` + + + +### Responsive Classes + +Responsive classes can be used strongly typed within abp tags. + +```xml + + col-sm-8 + col-sm-4 + + + col-sm + col-sm + col-sm + col-sm + + + + .col-12 .col-md-8 + .col-6 .col-md-4 + + + + + .col-6 .col-md-4 + .col-6 .col-md-4 + .col-6 .col-md-4 + + + + + .col-6 + .col-6 + +``` + + + +### Alignment + +Column alignments can be done strongly typed in abp tags with both vertically and horizontally. + +**Vertical-alignment**: `v-align` attribute value is used to align the columns vertically. + +Sample: + +```xml + + + column + column + column + + + column + column + column + + + column + column + column + + +``` + +**Horizontal-alignment**: `h-align` attribute value is used to align the columns horizontally. + +Sample: + +```xml + + + One of two columns + One of two columns + + + One of two columns + One of two columns + + + One of two columns + One of two columns + + + One of two columns + One of two columns + + + One of two columns + One of two columns + + +``` + +**No gutters**: The gutters between columns in predefined grid classes can be removed with `gutters="false"`. This removes the negative `margin`s from `abp-row` and the horizontal `padding` from all immediate children columns. + +Sample: + +```xml + + One of two columns + One of two columns + +``` + +**Column wrapping**: If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. + +Sample: + +```xml + + .col-9 + .col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. + .col-6
Subsequent columns continue along the new line.s + +``` + + + +### Reordering + +**Order Classes**: `order` attribute is used for controlling the visual order of the content. + +Sample: + +```xml + + + First, but Last + Second, but unordered + Third, but Second + + +``` + +**Offsetting columns**: `offset` attribute is used for setting the offset of the grid columns. + +Sample: + +```xml + + + .col-md-4 + .col-md-4 .offset-md-4 + + + .col-md-3 .offset-md-3 + .col-md-3 .offset-md-3 + + + .col-md-6 .offset-md-3 + + + .col-sm-5 .col-md-6 + .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0 + + + col-sm-6 .col-md-5 .col-lg-6 + .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0 + + +``` + + + +## abp-row Attributes + +- **v-align:** A value indicates the vertical positioning of the containing columns. Should be one of the following values: + * `Default` (default value) + * `Start` + * `Center` + * `End` + +- **h-align**: A value indicates the horizontal positioning of the containing columns. Should be one of the following values: + * `Default` (default value) + * `Start` + * `Center` + * `Around` + * `Between` + * `End` +- **gutter**: A value indicates if the negative `margin` and horizontal `padding` will be removed from all children columns. Will act as `true` value if this attribute is not set. Should be one of the following values: + * `true` + * `false` + +## abp-column Attributes + +- **size:** A value indicates the width of the column from `_`, `Undefined`, `_1`..`_12`, `Auto`. Or can be used with predefined values like: + - `size-sm` + - `size-md` + - `size-lg` + - `size-xl` +- **order**: A value indicates the order of column from `Undefined`, `_1`..`_12`, `First` and `Last`. +- **offset:** A value indicates offset of the column from `_`, `Undefined`, `_1`..`_12`, `Auto`. Or can be used with predefined values like: + - `offset-sm` + - `offset-md` + - `offset-lg` + - `offset-xl` +