Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions website/docs/styles/border_radius.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
# Border Radius

MiraiBorderRadius allows you to build the Flutter BorderRadius class using JSON.
To know more about the BorderRadius class in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/painting/BorderRadius-class.html).

## Properties

| Property | Type | Description |
| -------- | ---------------------- | ------------------------------------------------------------------ |
| radius | `double?` | Defines the border Radius for all corners to be painted. |
| radius | `Map<String, double>?` | Defines the border Radius of each corner to be painted explicitly. |
| radius | `List<double>?` | Defines the border Radius of each corner to be painted explicitly. |

:::note

Above three properties defined are optional. i.e. `MiraiBorderRadius` can be defined using one of the above 3 methods.

:::

## Example

```json
// Generic Declaration
{
"borderRadius": 16.0
}

// Explicit Declaration
{
"borderRadius": {
"topLeft": 16.0,
"topRight": 16.0,
"bottomLeft": 16.0,
"bottomRight": 16.0
}
}

// Explicit Declaration (List)
{
"borderRadius": [
16.0, //topLeft
16.0, //topRight
16.0, //bottomLeft
16.0, //bottomRight
]
}
```
24 changes: 24 additions & 0 deletions website/docs/styles/border_side.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Border Side

MiraiBorderSide allows you to define the Flutter BorderSide class using JSON.
To know more about the BorderSide class in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/painting/BorderSide-class.html).

## Properties

| Property | Type | Description |
| ----------- | -------------- | ------------------------------------------------------------------------------------------------ |
| color | `Color?` | Defines color of the border. |
| width | `double?` | Defines thickness of the border. (logical px). |
| style | `BorderStyle?` | Defines the style of the border. Can be `solid` or `none`. Defaults to `solid`. |
| strokeAlign | `double?` | Defines the relative position of the stroke on values range from -1.0 (inside) to 1.0 (outside). |

## Example

```json
{
"color": "#428AF5",
"width": 1.0,
"style":"solid",
"strokeAlign": 1.0,
}
```
48 changes: 48 additions & 0 deletions website/docs/styles/table_border.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
# Table Border

MiraiTableBorder allows you to define the Flutter TableBorder class using JSON.
To know more about the TableBorder class in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/rendering/TableBorder-class.html).

## Properties

| Property | Type | Description |
| ---------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| top | `MiraiBorderSide?` | Defines the top border of the table. See [`MiraiBorderSide`](./../styles_and_attributes/border_side). |
| right | `MiraiBorderSide?` | Defines the right border of the table. See [`MiraiBorderSide`](./../styles_and_attributes/border_side). |
| bottom | `MiraiBorderSide?` | Defines the bottom border of the table. See [`MiraiBorderSide`](./../styles_and_attributes/border_side). |
| left | `MiraiBorderSide?` | Defines the left border of the table. See [`MiraiBorderSide`](./../styles_and_attributes/border_side). |
| horizontalInside | `MiraiBorderSide?` | Defines the inner horizontal borders of the table. See [`MiraiBorderSide`](./../styles_and_attributes/border_side). |
| verticalInside | `MiraiBorderSide?` | Defines the inner vertical borders of the table. See [`MiraiBorderSide`](./../styles_and_attributes/border_side). |
| borderRadius | `MiraiBorderRadius?` | Defines the border radius to be used while rendering table corners. See [`MiraiBorderRadius`](./../styles_and_attributes/border_radius) |

## Example

```json
{
"border": {
"type": "tableBorder",
"top": {
"color": "#428AF5",
"width": 1.0
},
"right": {
"color": "#428AF5",
"width": 1.0
},
"bottom": {
"color": "#428AF5",
"width": 1.0
},
"left": {
"color": "#428AF5",
"width": 1.0
},
"borderRadius": {
"topLeft": 16,
"topRight": 16,
"bottomLeft": 16,
"bottomRight": 16,
}
},
}
```
20 changes: 20 additions & 0 deletions website/docs/styles/table_column_width.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# Table Column Width

MiraiTableColumnWidth allows you to build the Flutter TableColumnWidth class using JSON.
To know more about the TableColumnWidth class in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/rendering/TableColumnWidth-class.html).

## Properties

| Property | Type | Description |
| -------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
| type | `MiraiTableColumnWidth?` | Defines the type of columnWidth to be used. Can be `fixedColumnWidth`, `flexColumnWidth`, `fractionColumnWidth` & `intrinsicColumnWidth` |
| value | `double?` | Defines the value to be assigned to columnWidth. e.g. `5.0` would be `5px` in case of `fixedColumnWidth` |

## Example

```json
{
"type": "fixedColumnWidth",
"value": 200.0
}
```
155 changes: 155 additions & 0 deletions website/docs/widgets/table.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
# Table

MiraiTable allows you to build the Flutter Table widget using JSON.
To know more about the Table widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Table-class.html).

## Properties

| Property | Type | Description |
| ------------------------ | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| columnWidths | `Map<int, MiraiTableColumnWidth>?` | Determines the column width on a column by column basis, if a particular column entry has null width `defaultColumnWidth` is used. See [`MiraiTableColumnWidth`](./../styles_and_attributes/table_column_width) |
| defaultColumnWidth | `MiraiTableColumnWidth?` | Determines the default column width. Defaults to `flexColumnWidth`. See [`MiraiTableColumnWidth`](./../styles_and_attributes/table_column_width) |
| textDirection | `TextDirection?` | Determines the direction in which the columns are ordered. Can be `rtl` or `ltr`. Defaults to `rtl`. |
| border | `MiraiTableBorder?` | Defines the border style for `MiraiTable`. See [`MiraiTableBorder`](./../styles_and_attributes/table_border). |
| defaultVerticalAlignment | `TableCellVerticalAlignment?` | Defines the verticalAlignment for the cells that don't specify a verticalAlignment. Can be `top`, `middle`, `bottom`, `baseline`, `fill` & `intrinsicHeight` Defaults to `top`. |
| textBaseLine | `TextBaseline?` | Defines the text baseline to use when verticalAlignment is `baseline`. Can be `alphabetic` or `ideographic`. There is no default value. |
| children | `List<MiraiTableRow>` | Rows that will be populated in the table. See [`MiraiTableRow`](./table_row). |

## Example

```json
{
"type": "table",
"columnWidths": {
"1": {
"type": "fixedColumnWidth",
"value": 200
}
},
"defaultColumnWidth": {
"type": "flexColumnWidth",
"value": 1
},
"textDirection": "ltr",
"defaultVerticalAlignment": "bottom",
"border": {
"type": "tableBorder",
"top": {
"color": "#428AF5",
"width": 1.0
},
"right": {
"color": "#428AF5",
"width": 1.0
},
"bottom": {
"color": "#428AF5",
"width": 1.0
},
"left": {
"color": "#428AF5",
"width": 1.0
},
"borderRadius": 16
},
"children": [
{
"type": "tableRow",
"children": [
{
"type": "tableCell",
"child": {
"type": "container",
"color": "#40000000",
"height": 50.0,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "Header 1"
}
}
}
},
{
"type": "tableCell",
"child": {
"type": "container",
"color": "#40000000",
"height": 50.0,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "Header 2"
}
}
}
},
{
"type": "tableCell",
"child": {
"type": "container",
"color": "#40000000",
"height": 50.0,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "Header 3"
}
}
}
}
]
},
{
"type": "tableRow",
"children": [
{
"type": "tableCell",
"child": {
"type": "sizedBox",
"height": 50.0,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "Row 1, Cell 1"
}
}
}
},
{
"type": "tableCell",
"child": {
"type": "sizedBox",
"height": 50.0,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "Row 1, Cell 2"
}
}
}
},
{
"type": "tableCell",
"child": {
"type": "sizedBox",
"height": 50.0,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "Row 1, Cell 3"
}
}
}
}
]
},
]
}
```
30 changes: 30 additions & 0 deletions website/docs/widgets/table_cell.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# Table Cell
MiraiTableCell allows you to define the Flutter TableCell widget using JSON.
To know more about the TableCell widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/TableCell-class.html).

## Properties
| Property | Type | Description |
| ----------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| verticalAlignment | `TableCellVerticalAlignment?` | Defines the verticalAlignment for the table cell. Can be `top`, `middle`, `bottom`, `baseline`, `fill` & `intrinsicHeight` Defaults to `top`. |
| child | `Map<String, dynamic>` | The child widget of the table cell. |

## Example

```json
{
"type": "tableCell",
"verticalAlignment": "top",
"child": {
"type": "container",
"color": "#40000000",
"height": 50.0,
"child": {
"type": "center",
"child": {
"type": "text",
"data": "Header 1"
}
}
}
},
```
Loading