Line Item
You can edit 8 Components for free. Get premium for unlimited access.
A versatile component that you can use to display any content.
Figma
The Line Item component is used to sort menu items on a page and provide easy and understandable access.
1. Reference
This component inherits props from the Line Item.
2. Type
You can edit the type with the default, toggle, button, icon, checkbox or radioButton parameter.
Image 2.1 : Type default
Image 2.2 : Type toggle
Image 2.3 : Type checkbox
Image 2.4 : Type radioButton
Image 2.5 : Type button
Image 2.6 : Type icon
3. State
You can edit the state with the default or disabled parameter.
Image 3.1 : State default
Image 3.2 : State disabled
4. Icon
You can edit the icon with the true or false parameter.
Image 4.1 : Icon false
Image 4.2 : Icon true
5. Description
You can edit the description with the true or false parameter.
Image 5.1 : Description true
Image 5.2 : Description false
Jetpack Compose
The LineItem component is used to sort menu items on a page and provide easy and understandable access.
1. Reference
This component inherits props from the Line Item.
-
-
2. Type
You can edit the type with the LineItemType.default, LineItemType.icon, LineItemType.checkbox, LineItemType.radioButton, LineItemType.toggle or LineItemType.button parameter.
Headline
Description
Headline
Description
Headline
Description
Headline
Description
Headline
Description
Headline
Description
title = "Headline",
description = "Description",
type = LineItemType.default
)
LineItem(
title = "Headline",
description = "Description",
type = LineItemType.icon(R.drawable.ic_line_item_crop)
)
LineItem(
title = "Title",
description = "Description",
type = LineItemType.checkbox
)
LineItem(
title = "Headline",
description = "Description",
type = LineItemType.radioButton
)
LineItem(
title = "Headline",
description = "Description",
type = LineItemType.toggle(value = remember { mutableStateOf(false)
})
)
LineItem(
title = "Headline",
description = "Description",
type = LineItemType.button(onButtonClick = {
})
)
3. State
You can edit the state with the LineItemState.default or LineItemState.disabled parameter.
Headline
Description
Headline
Description
title = "Headline",
description = "Description",
type = LineItemType.default
)
LineItem(
title = "Headline",
description = "Description",
type = LineItemType.disabled
)
Preview
Preview
Code
Title
Description
DlLineItem(
title: 'Title',
description: 'Description',
)Usage
Add this code example to your project to see how the component works.
DlLineItem(
title: 'Title',
description: 'Description',
state: DlLineItemState.defaultState,
showSeparator: true,
type: DlLineItemType.button,
buttonLabel: 'Button',
onButtonPressed: () {},
)API Reference
DlLineItem is a configurable row component for settings/list UIs with optional trailing controls ( switch , button , checkbox , radioButton and chevron ) and support for both interactive and disabled states.
Examples
States
Preview
Code
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
DlLineItem(
title: 'Title',
description: 'Description',
type: DlLineItemType.chevron,
onItemTap: () {},
),
DlLineItem(
title: 'Title',
description: 'Description',
type: DlLineItemType.checkbox,
),
DlLineItem(
title: 'Title',
description: 'Description',
type: DlLineItemType.radioButton,
),
DlLineItem(
title: 'Title',
description: 'Description',
type: DlLineItemType.switchType,
),
DlLineItem(
title: 'Button line item',
type: DlLineItemType.button,
buttonLabel: 'Button',
onButtonPressed: () {},
),
],
)Disabled
Preview
Code
Title
Description
DlLineItem(
title: 'Title',
description: 'Description',
type: DlLineItemType.chevron,
state: DlLineItemState.disabled,
)Discover more content
You have questions or need help?
You want to try?
Save time and money?