@dreamworld/dw-list-item

<dw-list-item>

A material design item used to show single item of the list More detail

It also supports keyboard navigation. On Up/Down arrow key press it focuses next/previous sibling element. On Enter key press it selects the currently focused element.

Installation

npm install --save @dreamworld/dw-list-item

Usage

import "@dreamworld/dw-list-item/dw-list-item";

Basic (Single Line)

<dw-list-item title1="Item 1"></dw-list-item>

Two line

<dw-list-item title1="Main title" title2="Sub title" twoLine></dw-list-item>
<!-- Though, title2 isn't specified, will occupy 2 line height -->
<dw-list-item title1="Main title" twoLine></dw-list-item>

WIth leading and trailing icon

<dw-list-item title1="Item 1" leadingIcon="favorite" trailingIcon="done"></dw-list-item>

Disabled

<dw-list-item title1="Item 1" disabled></dw-list-item>

Dense

<dw-list-item title1="Item 1" dense></dw-list-item>

Property

Name	Type	Default	Description
title1	String	undefined	Item's text to be shown in first line
title2	String	undefined	Item's text to be shown in the second line.
dense	Boolean	false	Set to true to show dense item. Dense item will have less height compare to normal item
leadingIcon	String	undefined	Name of icon to show as a leading icon
trailingIcon	String	undefined	Name of icon to show as a trailing icon
twoLine	Boolean	false	Set to true to show twoLine item
disabled	Boolean	false	Shows disabled style when true
selected	Boolean	false	Set to true to show item preselected. It will be set to true on click or enter.
selectionMode	SelectionMode	default	Whether selection should be toggled or default/forced. if item isn't yet selected, it becomes selected. If item is already selected, no change in the selection state. While in toggle mode, selection is toggled. while in none mode, selection won't work so it's view-only item in this mode. Possible values: default, toggle, and none
hasLeadingIcon	Boolean	false	Set to true when item has leading icon.
hasTrailingIcon	Boolean	false	set to true when item has trailing icon.
leadingIconFont	IconFont	FILLED	Type of the leading icon. Possible values: FILLED, and OUTLINED
trailingIconFont	IconFont	FILLED	Type of the trailing icon. Possible values: FILLED, and OUTLINED
tooltipPlacement	String	undefined	Use to set placement of tooltip.
showSelectedRipple	Boolean	false	Set it to true to show ripples on the selected item.
focusable	Boolean	true	Whether or not list-item is focusable.
activated	Boolean	false	Whether or not list-item is activated. Same style as focused.
highlight	String	undefined	Contains highlight words

Events

Name	Target	Detail	Description
selection-changed	dw-list-item	none	Triggers when selection is changed.

CSS Custom Properties

Name	Default	Description
--mdc-theme-primary	#6200ee	Selected item's background color and icon color.
--mdc-theme-text-primary	rgba(0, 0, 0, 0.87)	Primary title's text color.
--mdc-theme-text-secondary	rgba(0, 0, 0, 0.6)	Sub title's text color.
--mdc-theme-text-disabled	rgba(0, 0, 0, 0.38)	Disabled text color when item is disabled.
--dw-icon-color	rgba(0, 0, 0, 0.38)	Icon color in normal mode. In selection mode --mdc-theme-primary color will be used
--dw-icon-color-active	#6200ee	Leading and Trailing icon color.
--dw-select-highlight-text-color	inherit	Highlight span text color
--dw-select-highlight-bg-color	inherit	Highlight span backgroound color
--dw-select-highlight-font-weight	inherit	Highlight span text font weight