README
API Documentation
ElementBase
Modes ⇐ Shows exactly one child element at a time. This can be useful, for example, if a given UI element has multiple modes that present substantially different elements.
The transition between child elements is instantenous. If you'd like the transition to be accompanied by visible animated effects, see basic-animation-stage.
This component doesn't provide any UI for changing which mode is shown.
Kind: global class
Extends: ElementBase
Mixes: ContentAsItems
, DistributedChildrenAsContent
, ItemsSelection
, ObserveContentChanges
, SelectionAriaActive
, TargetInCollective
- Modes ⇐
ElementBase
- .applySelection(item, selected)
- .applySelection(item, selected)
- .canSelectNext :
boolean
- .canSelectPrevious :
boolean
- .content :
Array.<HTMLElement>
- "content-changed"
- .contentChanged()
- .itemAdded(item)
- .itemAdded(item)
- .items :
Array.<HTMLElement>
- "items-changed"
- .itemsChanged()
- "selected-index-changed"
- "selected-item-changed"
- .selectedIndex :
number
- .selectedItem :
object
- .selectFirst()
- .selectionRequired :
boolean
- .selectionWraps :
boolean
- .selectLast()
- .selectNext()
- .selectPrevious()
- .target :
HTMLElement
modes.applySelection(item, selected)
Apply the indicate selection state to the item.
The default implementation of this method does nothing. User-visible effects will typically be handled by other mixins.
Kind: instance method of Modes
. Defined by ItemsSelection
mixin.
Param | Type | Description |
---|---|---|
item | HTMLElement |
the item being selected/deselected |
selected | boolean |
true if the item is selected, false if not |
modes.applySelection(item, selected)
Apply the selection state to a single item.
Invoke this method to signal that the selected state of the indicated item
has changed. By default, this applies a selected
CSS class if the item
is selected, and removed it if not selected.
Kind: instance method of Modes
. Defined by ContentAsItems
mixin.
Param | Type | Description |
---|---|---|
item | HTMLElement |
The item whose selection state has changed. |
selected | boolean |
True if the item is selected, false if not. |
boolean
modes.canSelectNext : True if the selection can be moved to the next item, false if not (the selected item is the last item in the list).
Kind: instance property of Modes
. Defined by ItemsSelection
mixin.
boolean
modes.canSelectPrevious : True if the selection can be moved to the previous item, false if not (the selected item is the first one in the list).
Kind: instance property of Modes
. Defined by ItemsSelection
mixin.
Array.<HTMLElement>
modes.content : The content of this component, defined to be the flattened array of children distributed to the component.
Kind: instance property of Modes
. Defined by DistributedChildrenAsContent
mixin.
"content-changed"
This event is raised when the component's contents (including distributed children) have changed.
Kind: event emitted by Modes
. Defined by ObserveContentChanges
mixin.
modes.contentChanged()
Invoked when the contents of the component (including distributed children) have changed.
This method is also invoked when a component is first instantiated; the contents have essentially "changed" from being nothing. This allows the component to perform initial processing of its children.
Kind: instance method of Modes
. Defined by ObserveContentChanges
mixin.
modes.itemAdded(item)
This method is invoked whenever a new item is added to the list.
The default implementation of this method does nothing. You can override this to perform per-item initialization.
Kind: instance method of Modes
. Defined by ContentAsItems
mixin.
Param | Type | Description |
---|---|---|
item | HTMLElement |
The item that was added. |
modes.itemAdded(item)
Handle a new item being added to the list.
The default implementation of this method simply sets the item's selection state to false.
Kind: instance method of Modes
. Defined by ItemsSelection
mixin.
Param | Type | Description |
---|---|---|
item | HTMLElement |
the item being added |
Array.<HTMLElement>
modes.items : The current set of items in the list. See the top-level documentation for mixin for a description of how items differ from plain content.
Kind: instance property of Modes
. Defined by ContentAsItems
mixin.
"items-changed"
Fires when the items in the list change.
Kind: event emitted by Modes
. Defined by ContentAsItems
mixin.
modes.itemsChanged()
This method is invoked when the underlying contents change. It is also invoked on component initialization – since the items have "changed" from being nothing.
Kind: instance method of Modes
. Defined by ContentAsItems
mixin.
"selected-index-changed"
Fires when the selectedIndex property changes.
Kind: event emitted by Modes
. Defined by ItemsSelection
mixin.
Param | Type | Description |
---|---|---|
detail.selectedIndex | number |
The new selected index. |
"selected-item-changed"
Fires when the selectedItem property changes.
Kind: event emitted by Modes
. Defined by ItemsSelection
mixin.
Param | Type | Description |
---|---|---|
detail.selectedItem | HTMLElement |
The new selected item. |
detail.previousItem | HTMLElement |
The previously selected item. |
number
modes.selectedIndex : The index of the item which is currently selected.
If selectionWraps
is false, the index is -1 if there is no selection.
In that case, setting the index to -1 will deselect any
currently-selected item.
Kind: instance property of Modes
. Defined by ItemsSelection
mixin.
object
modes.selectedItem : The currently selected item, or null if there is no selection.
Setting this property to null deselects any currently-selected item.
Kind: instance property of Modes
. Defined by ItemsSelection
mixin.
modes.selectFirst()
Select the first item in the list.
Kind: instance method of Modes
. Defined by ItemsSelection
mixin.
boolean
modes.selectionRequired : True if the list should always have a selection (if it has items).
Kind: instance property of Modes
. Defined by ItemsSelection
mixin.
Default: false
boolean
modes.selectionWraps : True if selection navigations wrap from last to first, and vice versa.
Kind: instance property of Modes
. Defined by ItemsSelection
mixin.
Default: false
modes.selectLast()
Select the last item in the list.
Kind: instance method of Modes
. Defined by ItemsSelection
mixin.
modes.selectNext()
Select the next item in the list.
Kind: instance method of Modes
. Defined by ItemsSelection
mixin.
modes.selectPrevious()
Select the previous item in the list.
Kind: instance method of Modes
. Defined by ItemsSelection
mixin.
HTMLElement
modes.target : Gets/sets the current target of the component.
Set this to point to another element. That target element will be implicitly added to the component's collective. That is, the component and its target will share responsibility for handling keyboard events.
You can set this property yourself, or you can use the ContentFirstChildTarget mixin to automatically set the target to the component's first child.
Kind: instance property of Modes
. Defined by TargetInCollective
mixin.