ChipView
Displays an inline series of Chips which may be navigated to, selected and deleted. You can provide a closeHandler to decide what should happen when a chip is closed. If not provided, by default the record representing the chip is removed from the store.
Chip view
//<code-header>
fiddle.title = 'Chip view';
//</code-header>
new SlideToggle({
insertFirst : targetElement,
label : 'Show close icon',
checked : true,
onChange({ value }) {
chipView.closable = value;
}
});
// checkbox with default look
const chipView = new ChipView({
appendTo : targetElement,
style : 'display:flex;gap:.5em',
items : [
'Coke',
'Pepsi',
'Water',
'Fanta',
'Fernet'
]
});Configs
96
Configs
96Common
listenersEvents
Other
Configure as true to display a clickable close icon after the itemTpl.
When tapped, the configured closeHandler is called passing the associated record.
Chips may also be selected using the LEFT and RIGHT arrows (And the Shift key to do multiple,
contiguous selection). Pressing the DELETE or BACKSPACE key passes the selected records to the
closeHandler (if not provided, the record representing the chip is removed from the store).
closeHandler: String | function
If closable is true, this is the name of a callback function to handle what the "close"
action means. If not provided, the record representing the chip is removed from the store.
Returns: void
iconTpl: function
A template function, which, when passed a record, returns the markup which encapsulates a chip's icon to be placed before the itemTpl.
| Parameter | Type | Description |
|---|---|---|
record | Model | The record to provide an icon for |
Returns: DomConfig | String | null
Configure as true to allow multi select and allow clicking and key navigation to select multiple chips.
allowGroupSelectList
callOnFunctionsWidget
columnWidget
displayFieldList
emptyTextList
getItemClsList
getItemStyleList
groupHeaderTplList
isSelectableList
itemsList
itemTplList
rtlRTL
selectAllItemList
selectedList
spanWidget
storeList
titleList
tooltipTemplateList
virtualizeList
DOM
adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
tagWidget
Float & align
alignWidget
anchorWidget
centeredWidget
constrainToWidget
draggableWidget
floatingWidget
hideAnimationWidget
maximizeOnMobileWidget
positionedWidget
scrollActionWidget
showAnimationWidget
xWidget
yWidget
Layout
alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget
Misc
bubbleEventsEvents
dataFieldWidget
defaultBindPropertyWidget
disabledWidget
elementAttributesWidget
ignoreParentReadOnlyWidget
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable
maskDefaultsWidget
maskedWidget
monitorResizeWidget
ownerWidget
preventTooltipOnTouchWidget
readOnlyWidget
refWidget
rippleWidget
rootElementWidget
showTooltipWhenDisabledWidget
tabWidget
tooltipWidget
Scrolling
scrollableWidget
Properties
78
Properties
78Class hierarchy
Identifies an object as an instance of ChipView class, or subclass thereof.
Identifies an object as an instance of ChipView class, or subclass thereof.
isDelayableDelayable
isEventsEvents
isKeyMapKeyMap
isListList
isLocalizableLocalizable
isRTLRTL
isWidgetWidget
CSS
clsWidget
DOM
appendToWidget
contentWidget
contentElementWidget
datasetWidget
elementWidget
focusableElementWidget
focusElementWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
overflowElementWidget
styleWidget
Layout
alignSelfWidget
flexWidget
heightWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
scrollableWidget
widthWidget
Misc
callOnFunctionsEvents
cellInfoWidget
disabledWidget
localeHelperLocalizable
localeManagerLocalizable
readOnlyWidget
refWidget
tabWidget
tooltipWidget
Other
allowGroupSelectList
allSelectedList
columnWidget
countList
emptyTextList
itemsList
multiSelectList
rtlRTL
selectedList
spanWidget
storeList
titleList
Functions
65
Functions
65Configuration
Events
detachListenersBase
Misc
animatePropertyBase
callbackBase
downloadTestCaseBase
resolveCallbackBase
updateLocalizationLocalizable
Other
addListenerEvents
announceAriaLiveWidget
composeWidget
createOnFrameDelayable
disableWidget
enableWidget
exitFullscreenWidget
focusWidget
getItemList
hasListenerEvents
maskWidget
onEvents
recomposeWidget
relayAllEvents
removeAllListenersEvents
removeListenerEvents
requestFullscreenWidget
resumeEventsEvents
revertFocusWidget
suspendEventsEvents
toggleCollapseList
triggerEvents
unEvents
unmaskWidget
Widget hierarchy
closestWidget
containsWidget
eachAncestorWidget
eachWidgetWidget
ownsWidget
queryWidget
queryAllWidget
upWidget
Events
19
Events
19beforeDestroyEvents
beforeHideWidget
beforeItemList
beforeShowWidget
catchAllEvents
destroyEvents
elementCreatedWidget
focusInWidget
focusOutWidget
hideWidget
itemList
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
selectionChangeList
showWidget
toggleGroupList
toggleNodeList
Event handlers
19
Event handlers
19onBeforeDestroyEvents
onBeforeHideWidget
onBeforeItemList
onBeforeShowWidget
onCatchAllEvents
onDestroyEvents
onElementCreatedWidget
onFocusInWidget
onFocusOutWidget
onHideWidget
onItemList
onPaintWidget
onReadOnlyWidget
onRecomposeWidget
onResizeWidget
onShowWidget
onToggleGroupList
onToggleNodeList
Typedefs
6
Typedefs
6AlignSpecWidget
BryntumListenerConfigEvents
CellWidgetContextWidget
ColorWidget
DelayableConfigDelayable
KeyMapConfigKeyMap
CSS variables
55
CSS variables
55| Name | Description |
|---|---|
--b-chip-view-gap | Gap between chips |
--b-chip-view-padding | Padding of the chip view |
--b-chip-view-chip-border-radius | Chip border radius |
--b-chip-view-chip-border-width | Chip border width |
--b-chip-view-chip-font-size | Chip font size |
--b-chip-view-chip-gap | Gap between chip content (chip's inner gap) |
--b-chip-view-chip-padding-block | Chip padding block |
--b-chip-view-chip-padding-inline | Chip padding inline |
--b-chip-view-chip-border-color | Chip border color |
--b-chip-view-chip-color | Chip text color |
--b-chip-view-chip-background | Chip background |
| Active | |
--b-chip-view-chip-active-background | Active chip background |
--b-chip-view-chip-active-selected-background | Active selected chip background |
| Focused | |
--b-chip-view-chip-focus-border-color | Focused chip border color |
| Hovered | |
--b-chip-view-chip-hover-background | Hovered chip background |
| Selected | |
--b-chip-view-chip-selected-color | Selected (and active) chip text color |
--b-chip-view-chip-selected-background | Selected chip background |