Label-1
Label-2
Label-1
Label-2
TabControl(selectedIndex = tabs1.intValue) {
item(
state = TabControlState.default,
label = "Label-1",
onClick = {
tabs1.intValue = 0
})
item(
state = TabControlState.default,
label = "Label-2",
onClick = {
tabs1.intValue = 1
})
}

TabControl(selectedIndex = tabs1.intValue) {
item(
state = TabControlState.default,
label = "Label-1",
onClick = {
tabs1.intValue = 0
})
item(
state = TabControlState.disabled,
label = "Label-2",
onClick = {
tabs1.intValue = 1
})
}

3. Count

You can edit the count with the "text" parameter.

Label-1
Label-2
5
TabControl(selectedIndex = tabs2.intValue) {
item(
state = TabControlState.default,
label = "Label-1",
onClick = { tabs2.intValue = 0
})
item(
state = TabControlState.default,
badge = "5",
label = "Label-2",
onClick = { tabs2.intValue = 1
})
}

Preview

Code

Label-1

Label-2

DlTabControl(
  tabs: const [
    DlTabControlTab(
      label: 'Label-1',
    ),
    DlTabControlTab(
      label: 'Label-2',
    ),
  ],
)

Copy

Usage

Add this code example to your project to see how the component works.

DlTabControl(
  tabs: const [
    DlTabControlTab(
      label: 'Label-1',
    ),
    DlTabControlTab(
      label: 'Label-2',
      state: DlTabControlTabState.disabled,
    ),
    DlTabControlTab(
      label: 'Archived',
      badge: DlBadge(size: DlBadgeSize.md, value: '2'),
    ),
  ],
)

Copy

API Reference

DlTabControl is a multi-tab navigation component built from individually configurable DlTabControlTab items, with built-in active/default/disabled behavior, optional badges, and automatic first-enabled tab selection.

DlTabControl

Prop

Type

Default

tabs

List<DlTabControlTab>

onTabChanged

ValueChanged<int>?

null

key

Key?

null

DlTabControlTab

Prop

Type

Default

label

String

badge

Widget?

null

state

defaultState

disabled

defaultState

Examples

Disabled

Preview

Code

Label-1

Label-2

DlTabControl(
  tabs: const [
    DlTabControlTab(
      label: 'Label-1',
    ),
    DlTabControlTab(
      label: 'Label-2',
      state: DlTabControlTabState.disabled,
    ),
  ],
)

Copy

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version