Skip to main content

inno-select-item

Properties

PropertyAttributeDescriptionTypeDefault
addToFavoritesLabeladd-to-favorites-labelTooltip text for favorite add. The tooltip is only visible if the InnoSelectItem has a unique id.string"Add to favorites"
canFavoritecan-favoriteAdds a favorite icon to the selectable item. If you press this icon an event will be fired with the selected item. You have to take care of managing and ordering the array of favorite items in your business logic. Clicking on the favorite icon will not close the dropdown.booleanfalse
favoriteIconTooltipOffsetfavorite-icon-tooltip-offsetOffset of the favorite icon tooltip position in pixels. Please note that the offset will remain the same in case the desired placement does not fit.number8
favoriteIconTooltipPosfavorite-icon-tooltip-posPosition of the favorite icon tooltip. Please note that the offset will remain the same in case the desired placement does not fit."bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start""right"
favoriteIconTooltipVariantfavorite-icon-tooltip-variantColor variant of the favorite icon tooltip."dark" | "light"'light'
hasSeparatorhas-separatorA simple separator for the item. You can use it for example to visually separate the favorited and non-favorited items.booleanfalse
iconiconOptional icon for the label. Use either this or the iconFont property. For possible values, see: https://innomotics.github.io/brand-experience/docs/icons/stringundefined
iconFonticon-fontOptional icon font for the label. Use either this or the icon property. For possible values, see: https://innomotics.github.io/brand-experience/docs/fonts/InnomoticsUiFontstringundefined
isFavoriteis-favoriteThe selectable item is favorited or not.booleanfalse
labellabelLabel of the item, can be different from the value.stringundefined
removeFromFavoritesLabelremove-from-favorites-labelTooltip text for favorite remove. The tooltip is only visible if the InnoSelectItem has a unique id.string"Remove from favorites"
selectedselectedWhether the item is selected or not.booleanfalse
valuevalueValue of the item.anyundefined

Events

EventDescriptionType
itemFavoritedThis event is fired whenever an item is favorited.CustomEvent<any>
itemLabelChangedThis event is fired whenever the selected item's label changes. The inno-select component then will rerender.CustomEvent<any>
itemSelectedThis event is fired whenever an item is selected.CustomEvent<any>
itemUnfavoritedThis event is fired whenever an item is removed from favorites.CustomEvent<any>

Dependencies

Depends on

Graph


Built with StencilJS