limestone/Chips

Provides Limestone styled Chips and Chip comoponents and behaviors.

Loading Live Preview

Import Usage

import Chips from '@enact/limestone/Chips';

Members

Chips   Component

A container that contains the basic behavior of limestone/Chipslimestone/Chips.Chips.

Import Usage

import Chips from '@enact/limestone/Chips';

Extends: limestone/Chipslimestone/Chips.ChipsBase
Wrapped with: spotlight/SpotlightContainerDecoratorspotlight/SpotlightContainerDecorator.SpotlightContainerDecorator

Properties

children

Node

limestone/Chipslimestone/Chips.Chip to be rendered

---

orientation

'horizontal''vertical'

The layout orientation of the component.

Default: 'vertical'

Chip   Component

Provides Limestone styled Chip component and behaviors.

Usage:

<Chip
	deleteButton={{
		icon: 'closex',
		position: 'right'
	}}
	icon="check"
	id="chip"
>
 Label
</Chip>

Import Usage

import {Chip} from '@enact/limestone/Chips';

Properties

Required Property •  children

String

A label displayed in the chip content.

---

Required Property •  id

String

Unique identifier for the chip.

---

checked

Boolean

Sets the chip as checked if true

---

deleteButton

limestone/Chips.chipDeleteButtonShapeBoolean

Define the icon, delete handler, and position for the delete button.

---

disabled

Boolean

Disables Chip and becomes non-interactive.

---

icon

StringObject

The icon content in the chip content. If this is specified, limestone/Iconlimestone/Icon.Icon will be shown as the content.

See: ui/Iconui/Icon.Icon.children

---

imageSize

Number

Sets the size of the image passed to the component.

---

isImage

Boolean

If true tells the component to use Image instead of Icon element inside Chip.

ChipDecorator   Higher-Order Component

Limestone-specific Chip behaviors to apply to limestone/Chipslimestone/Chips.Chip.

Import Usage

import {ChipDecorator} from '@enact/limestone/Chips';

Includes: limestone/Skinnablelimestone/Skinnable.Skinnable

ChipsBase   Component

A container that surrounds the chips.

Usage:

<Chips>
	{chips.map(({id, icon, children}) => {
		return (
			<Chip key={id} id={id} icon={icon} onClick={onClick}>
				{children}
			</Chip>
		);
	})}
</Chips>

Import Usage

import {ChipsBase} from '@enact/limestone/Chips';

ChipsDecorator   Higher-Order Component

Applies Limestone specific behaviors to limestone/Chipslimestone/Chips.Chips components.

Import Usage

import {ChipsDecorator} from '@enact/limestone/Chips';

Includes: spotlight/SpotlightContainerDecoratorspotlight/SpotlightContainerDecorator.SpotlightContainerDecorator

Type Definitions

chipDeleteButtonShape   Object

The shape of the chip delete button for limestone/Chipslimestone/Chips.Chip.

Required Property • icon

String | Object

The icon to display in the delete button.

---

Required Property • onDelete

Function

The function to call when the delete button is clicked.

---

Required Property • position

'top' | 'bottom' | 'right'

The position of the delete button relative to the chip.