UserSettingsAppearanceViewItem

<ui5-user-settings-appearance-view-item> | Since 2.17.0

info

The following entity is available under an experimental flag and its API and behavior are subject to change.

The ui5-user-settings-appearance-view-item represents a theme/appearance option item within the ui5-user-settings-appearance-view.

It displays a theme with an avatar icon, text label, and can be selected.

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewItem.js";

Properties

itemKey

Description	Defines the unique identifier of the item.
Type	string
Default	""

text

Description	Defines the text label displayed for the appearance item.
Type	string
Default	""

icon

Description	Defines the icon of the appearance item.
Type	string
Default	"product"

colorScheme

Description	Defines the color scheme of the avatar.
Type	string
Default	"Accent7"

movable

Description	Defines whether the item is movable.
Type	boolean
Default	false
Since	2.0.0

accessibleName

Description	Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present.
Type	string | undefined
Default	undefined
Since	1.0.0-rc.15

type

Description	Defines the visual indication and behavior of the list items. Available options are Active (by default), Inactive, Detail and Navigation. Note: When set to Active or Navigation, the item will provide visual response upon press and hover, while with type Inactive and Detail - will not.
Type	"Inactive" | "Active" | "Detail" | "Navigation"
Default	"Active"

accessibilityAttributes

Description	Defines the additional accessibility attributes that will be applied to the component. The following fields are supported: - ariaSetsize: Defines the number of items in the current set when not all items in the set are present in the DOM. Note: The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set -1. - ariaPosinset: Defines an element's number or position in the current set when not all items are present in the DOM. Note: The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.
Type	ListItemAccessibilityAttributes
Default	{}
Since	1.15.0

navigated

Description	The navigated state of the list item. If set to true, a navigation indicator is displayed at the end of the list item.
Type	boolean
Default	false
Since	1.10.0

tooltip

Description	Defines the text of the tooltip that would be displayed for the list item.
Type	string | undefined
Default	undefined
Since	1.23.0

highlight

Description	Defines the highlight state of the list items. Available options are: "None" (by default), "Positive", "Critical", "Information" and "Negative".
Type	"None" | "Positive" | "Critical" | "Negative" | "Information"
Default	"None"
Since	1.24

selected

Description	Defines the selected state of the component.
Type	boolean
Default	false

Slots

default

Description	Defines the content of the component.
Type	Array<Node>

deleteButton

Description	Defines the delete button, displayed in "Delete" mode. Note: While the slot allows custom buttons, to match design guidelines, please use the ui5-button component. Note: When the slot is not present, a built-in delete button will be displayed.
Type	Array<IButton>
Since	1.9.0

Events

detail-click

Description	Fired when the user clicks on the detail button when type is Detail.
Type	CustomEvent
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

Name	Description
native-li	Used to style the main li tag of the list item
content	Used to style the content area of the list item
detail-button	Used to style the button rendered when the list item is of type detail
delete-button	Used to style the button rendered when the list item is in delete mode
radio	Used to style the radio button rendered when the list item is in single selection mode
checkbox	Used to style the checkbox rendered when the list item is in multiple selection mode