Skip to content

docs: Add Tab bar widget documentation #171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
divyanshub024 merged 1 commit into from
Jan 26, 2025
Merged

docs: Add Tab bar widget documentation #171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
42 changes: 0 additions & 42 deletions website/docs/widgets/default_tab_controller.md
View file
Open in desktop

This file was deleted.

125 changes: 125 additions & 0 deletions website/docs/widgets/tab_bar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
# TabBar

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

## Properties

| Property | Type | Description |
|--------------------------------------|-------------------------------|-----------------------------------------------------------------------------|
| tabs | `List<Map<String, dynamic>>` | The tabs to display in the tab bar. |
| initialIndex | `int` | The initial index of the selected tab. Defaults to `0`. |
| isScrollable | `bool` | Whether the tab bar is scrollable. Defaults to `false`. |
| padding | `MiraiEdgeInsets?` | The padding for the tab bar. |
| indicatorColor | `String?` | The color of the tab indicator. |
| automaticIndicatorColorAdjustment | `bool` | Whether to automatically adjust the indicator color. Defaults to `true`. |
| indicatorWeight | `double` | The thickness of the tab indicator. Defaults to `2.0`. |
| indicatorPadding | `MiraiEdgeInsets?` | The padding for the tab indicator. |
| indicatorSize | `TabBarIndicatorSize?` | The size of the tab indicator. |
| labelColor | `String?` | The color of the selected tab label. |
| labelStyle | `MiraiTextStyle?` | The text style of the selected tab label. |
| labelPadding | `MiraiEdgeInsets?` | The padding for the selected tab label. |
| unselectedLabelColor | `String?` | The color of the unselected tab labels. |
| unselectedLabelStyle | `MiraiTextStyle?` | The text style of the unselected tab labels. |
| dragStartBehavior | `DragStartBehavior` | The drag start behavior. Defaults to `DragStartBehavior.start`. |
| enableFeedback | `bool?` | Whether to enable feedback for taps. |
| physics | `MiraiScrollPhysics?` | The scroll physics for the tab bar. |
| tabAlignment | `TabAlignment?` | The alignment of the tabs. |

# DefaultTabController

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

## Properties

| Property | Type | Description |
|--------------|------------------------|---------------------------------------------------------|
| length | `int` | The number of tabs. |
| initialIndex | `int` | The initial index of the selected tab. Defaults to `0`. |
| child | `Map<String, dynamic>` | The widget below this widget in the tree. |

# Tab

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

## Properties

| Property | Type | Description |
|-------------|-------------------------|--------------------------------------------------|
| text | `String?` | The text to display in the tab. |
| icon | `Map<String, dynamic>?` | The icon to display in the tab. |
| iconMargin | `MiraiEdgeInsets?` | The margin around the icon. |
| height | `double?` | The height of the tab. |
| child | `Map<String, dynamic>?` | The widget below this widget in the tree. |


# TabBarView

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

## Properties

| Property | Type | Description |
|-------------------|------------------------------|-------------------------------------------------------------------------------|
| children | `List<Map<String, dynamic>>` | The widgets to display in each tab. |
| initialIndex | `int` | The initial index of the selected tab. Defaults to `0`. |
| dragStartBehavior | `DragStartBehavior` | The drag start behavior. Defaults to `DragStartBehavior.start`. |
| physics | `MiraiScrollPhysics?` | The scroll physics for the tab bar view. |
| viewportFraction | `double` | The fraction of the viewport that each page should occupy. Defaults to `1.0`. |
| clipBehavior | `Clip` | The clip behavior. Defaults to `Clip.hardEdge`. |

## Example JSON

```json
{
"type": "defaultTabController",
"length": 3,
"child": {
"type": "scaffold",
"appBar": {
"type": "appBar",
"title": {
"type": "text",
"data": "Tabbar"
},
"bottom": {
"type": "tabBar",
"tabs": [
{
"type": "tab",
"text": "Red"
},
{
"type": "tab",
"text": "Red"
},
{
"type": "tab",
"text": "Red"
}
]
}
},
"body": {
"type": "tabBarView",
"children": [
{
"type": "container",
"color": "#D9D9D9"
},
{
"type": "container",
"color": "#FC3F1B"
},
{
"type": "container",
"color": "#D9D9D9"
}
]
}
}
}
```