@material/list

  • Version 13.0.0
  • Published
  • 1.32 MB
  • 10 dependencies
  • MIT license

Install

npm i @material/list
yarn add @material/list
pnpm add @material/list

Overview

The Material Components for the web list component

Index

Variables

variable cssClasses

const cssClasses: {
LIST_ITEM_ACTIVATED_CLASS: string;
LIST_ITEM_CLASS: string;
LIST_ITEM_DISABLED_CLASS: string;
LIST_ITEM_SELECTED_CLASS: string;
LIST_ITEM_TEXT_CLASS: string;
LIST_ITEM_PRIMARY_TEXT_CLASS: string;
ROOT: string;
};
  • Copyright 2018 Google Inc.

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

variable deprecatedClassNameMap

const deprecatedClassNameMap: { [x: string]: string };

    variable evolutionAttribute

    const evolutionAttribute: string;

      variable evolutionClassNameMap

      const evolutionClassNameMap: { [x: string]: string };

        variable numbers

        const numbers: { UNSET_INDEX: number; TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS: number };

          variable strings

          const strings: {
          ACTION_EVENT: string;
          ARIA_CHECKED: string;
          ARIA_CHECKED_CHECKBOX_SELECTOR: string;
          ARIA_CHECKED_RADIO_SELECTOR: string;
          ARIA_CURRENT: string;
          ARIA_DISABLED: string;
          ARIA_ORIENTATION: string;
          ARIA_ORIENTATION_HORIZONTAL: string;
          ARIA_ROLE_CHECKBOX_SELECTOR: string;
          ARIA_SELECTED: string;
          ARIA_INTERACTIVE_ROLES_SELECTOR: string;
          ARIA_MULTI_SELECTABLE_SELECTOR: string;
          CHECKBOX_RADIO_SELECTOR: string;
          CHECKBOX_SELECTOR: string;
          CHILD_ELEMENTS_TO_TOGGLE_TABINDEX: string;
          DEPRECATED_SELECTOR: string;
          FOCUSABLE_CHILD_ELEMENTS: string;
          RADIO_SELECTOR: string;
          SELECTED_ITEM_SELECTOR: string;
          };

            Classes

            class MDCList

            class MDCList extends MDCComponent<MDCListFoundation> {}

              property listElements

              readonly listElements: Element[];

                property selectedIndex

                selectedIndex: MDCListIndex;

                  property typeaheadInProgress

                  readonly typeaheadInProgress: boolean;
                  • Whether typeahead is currently matching a user-specified prefix.

                  method attachTo

                  static attachTo: (root: Element) => MDCList;

                    method destroy

                    destroy: () => void;

                      method getDefaultFoundation

                      getDefaultFoundation: () => MDCListFoundation;

                        method getPrimaryText

                        getPrimaryText: (item: Element) => string;
                        • Extracts the primary text from a list item.

                          Parameter item

                          The list item element. The primary text in the element.

                        method initializeListType

                        initializeListType: () => void;
                        • Initialize selectedIndex value based on pre-selected list items.

                        method initialSyncWithDOM

                        initialSyncWithDOM: () => void;

                          method layout

                          layout: () => void;

                            method setEnabled

                            setEnabled: (itemIndex: number, isEnabled: boolean) => void;
                            • Updates the list item at itemIndex to the desired isEnabled state.

                              Parameter itemIndex

                              Index of the list item

                              Parameter isEnabled

                              Sets the list item to enabled or disabled.

                            method typeaheadMatchItem

                            typeaheadMatchItem: (nextChar: string, startingIndex?: number) => number;
                            • Given the next desired character from the user, adds it to the typeahead buffer. Then, attempts to find the next option matching the buffer. Wraps around if at the end of options.

                              Parameter nextChar

                              The next character to add to the prefix buffer.

                              Parameter startingIndex

                              The index from which to start matching. Defaults to the currently focused index. The index of the matched item.

                            class MDCListFoundation

                            class MDCListFoundation extends MDCFoundation<MDCListAdapter> {}

                              constructor

                              constructor(adapter?: Partial<MDCListAdapter>);

                                property cssClasses

                                static readonly cssClasses: {
                                LIST_ITEM_ACTIVATED_CLASS: string;
                                LIST_ITEM_CLASS: string;
                                LIST_ITEM_DISABLED_CLASS: string;
                                LIST_ITEM_SELECTED_CLASS: string;
                                LIST_ITEM_TEXT_CLASS: string;
                                LIST_ITEM_PRIMARY_TEXT_CLASS: string;
                                ROOT: string;
                                };

                                  property defaultAdapter

                                  static readonly defaultAdapter: MDCListAdapter;

                                    property numbers

                                    static readonly numbers: {
                                    UNSET_INDEX: number;
                                    TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS: number;
                                    };

                                      property strings

                                      static readonly strings: {
                                      ACTION_EVENT: string;
                                      ARIA_CHECKED: string;
                                      ARIA_CHECKED_CHECKBOX_SELECTOR: string;
                                      ARIA_CHECKED_RADIO_SELECTOR: string;
                                      ARIA_CURRENT: string;
                                      ARIA_DISABLED: string;
                                      ARIA_ORIENTATION: string;
                                      ARIA_ORIENTATION_HORIZONTAL: string;
                                      ARIA_ROLE_CHECKBOX_SELECTOR: string;
                                      ARIA_SELECTED: string;
                                      ARIA_INTERACTIVE_ROLES_SELECTOR: string;
                                      ARIA_MULTI_SELECTABLE_SELECTOR: string;
                                      CHECKBOX_RADIO_SELECTOR: string;
                                      CHECKBOX_SELECTOR: string;
                                      CHILD_ELEMENTS_TO_TOGGLE_TABINDEX: string;
                                      DEPRECATED_SELECTOR: string;
                                      FOCUSABLE_CHILD_ELEMENTS: string;
                                      RADIO_SELECTOR: string;
                                      SELECTED_ITEM_SELECTOR: string;
                                      };

                                        method clearTypeaheadBuffer

                                        clearTypeaheadBuffer: () => void;
                                        • Clears the typeahead buffer.

                                        method focusFirstElement

                                        focusFirstElement: () => number;

                                          method focusInitialElement

                                          focusInitialElement: () => number;

                                            method focusLastElement

                                            focusLastElement: () => number;

                                              method focusNextElement

                                              focusNextElement: (index: number) => number;
                                              • Focuses the next element on the list.

                                              method focusPrevElement

                                              focusPrevElement: (index: number) => number;
                                              • Focuses the previous element on the list.

                                              method getFocusedItemIndex

                                              getFocusedItemIndex: () => number;
                                              • Returns the index of the item that was last focused.

                                              method getSelectedIndex

                                              getSelectedIndex: () => MDCListIndex;

                                                method handleClick

                                                handleClick: (index: number, toggleCheckbox: boolean) => void;
                                                • Click handler for the list.

                                                method handleFocusIn

                                                handleFocusIn: (listItemIndex: number) => void;
                                                • Focus in handler for the list items.

                                                method handleFocusOut

                                                handleFocusOut: (listItemIndex: number) => void;
                                                • Focus out handler for the list items.

                                                method handleKeydown

                                                handleKeydown: (
                                                event: KeyboardEvent,
                                                isRootListItem: boolean,
                                                listItemIndex: number
                                                ) => void;
                                                • Key handler for the list.

                                                method isTypeaheadInProgress

                                                isTypeaheadInProgress: () => boolean;
                                                • Whether typeahead is currently matching a user-specified prefix.

                                                method layout

                                                layout: () => void;

                                                  method setEnabled

                                                  setEnabled: (itemIndex: number, isEnabled: boolean) => void;
                                                  • Parameter itemIndex

                                                    Index of the list item

                                                    Parameter isEnabled

                                                    Sets the list item to enabled or disabled.

                                                  method setHasTypeahead

                                                  setHasTypeahead: (hasTypeahead: boolean) => void;
                                                  • Sets whether typeahead is enabled on the list.

                                                    Parameter hasTypeahead

                                                    Whether typeahead is enabled.

                                                  method setSelectedIndex

                                                  setSelectedIndex: (
                                                  index: MDCListIndex,
                                                  { forceUpdate }?: { forceUpdate?: boolean }
                                                  ) => void;

                                                    method setSingleSelection

                                                    setSingleSelection: (value: boolean) => void;
                                                    • Toggles single-selection behavior.

                                                    method setUseActivatedClass

                                                    setUseActivatedClass: (useActivated: boolean) => void;
                                                    • Toggle use of the "activated" CSS class.

                                                    method setUseSelectedAttribute

                                                    setUseSelectedAttribute: (useSelected: boolean) => void;
                                                    • Toggles use of the selected attribute (true for aria-selected, false for aria-checked).

                                                    method setVerticalOrientation

                                                    setVerticalOrientation: (value: boolean) => void;
                                                    • Toggles orientation direction for keyboard navigation (true for vertical, false for horizontal).

                                                    method setWrapFocus

                                                    setWrapFocus: (value: boolean) => void;
                                                    • Toggles focus wrapping with keyboard navigation.

                                                    method typeaheadMatchItem

                                                    typeaheadMatchItem: (
                                                    nextChar: string,
                                                    startingIndex?: number,
                                                    skipFocus?: boolean
                                                    ) => number;
                                                    • Given the next desired character from the user, adds it to the typeahead buffer. Then, attempts to find the next option matching the buffer. Wraps around if at the end of options.

                                                      Parameter nextChar

                                                      The next character to add to the prefix buffer.

                                                      Parameter startingIndex

                                                      The index from which to start matching. Only relevant when starting a new match sequence. To start a new match sequence, clear the buffer using clearTypeaheadBuffer, or wait for the buffer to clear after a set interval defined in list foundation. Defaults to the currently focused index. The index of the matched item, or -1 if no match.

                                                    Interfaces

                                                    interface MDCListActionEvent

                                                    interface MDCListActionEvent extends Event {}

                                                      property detail

                                                      detail: MDCListActionEventDetail;

                                                        interface MDCListActionEventDetail

                                                        interface MDCListActionEventDetail {}
                                                        • Copyright 2019 Google Inc.

                                                          Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

                                                          The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

                                                          THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

                                                        property index

                                                        index: number;
                                                        • Index of the list item that was activated.

                                                        interface MDCListAdapter

                                                        interface MDCListAdapter {}
                                                        • Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

                                                        method addClassForElementIndex

                                                        addClassForElementIndex: (index: number, className: string) => void;

                                                          method focusItemAtIndex

                                                          focusItemAtIndex: (index: number) => void;
                                                          • Focuses list item at the index specified.

                                                          method getAttributeForElementIndex

                                                          getAttributeForElementIndex: (index: number, attr: string) => string | null;
                                                          • Returns the attribute value of list item at given index.

                                                          method getFocusedElementIndex

                                                          getFocusedElementIndex: () => number;

                                                            method getListItemCount

                                                            getListItemCount: () => number;

                                                              method getPrimaryTextAtIndex

                                                              getPrimaryTextAtIndex: (index: number) => string;
                                                              • the primary text content of the list item at index.

                                                              method hasCheckboxAtIndex

                                                              hasCheckboxAtIndex: (index: number) => boolean;
                                                              • true if checkbox is present at given list item index.

                                                              method hasRadioAtIndex

                                                              hasRadioAtIndex: (index: number) => boolean;
                                                              • true if radio button is present at given list item index.

                                                              method isCheckboxCheckedAtIndex

                                                              isCheckboxCheckedAtIndex: (index: number) => boolean;
                                                              • true if checkbox inside a list item is checked.

                                                              method isFocusInsideList

                                                              isFocusInsideList: () => boolean;
                                                              • true when the current focused element is inside list root.

                                                              method isRootFocused

                                                              isRootFocused: () => boolean;
                                                              • true if root element is focused.

                                                              method listItemAtIndexHasClass

                                                              listItemAtIndexHasClass: (index: number, className: string) => boolean;
                                                              • Parameter index

                                                                list item index.

                                                                Parameter className

                                                                the name of the class whose presence is to be checked. true if list item at index has class className.

                                                              method notifyAction

                                                              notifyAction: (index: number) => void;
                                                              • Notifies user action on list item.

                                                              method removeClassForElementIndex

                                                              removeClassForElementIndex: (index: number, className: string) => void;

                                                                method setAttributeForElementIndex

                                                                setAttributeForElementIndex: (
                                                                index: number,
                                                                attribute: string,
                                                                value: string
                                                                ) => void;

                                                                  method setCheckedCheckboxOrRadioAtIndex

                                                                  setCheckedCheckboxOrRadioAtIndex: (index: number, isChecked: boolean) => void;
                                                                  • Sets the checked status of checkbox or radio at given list item index.

                                                                  method setTabIndexForListItemChildren

                                                                  setTabIndexForListItemChildren: (
                                                                  listItemIndex: number,
                                                                  tabIndexValue: string
                                                                  ) => void;
                                                                  • Sets the tabindex to the value specified for all button/a element children of the list item at the index specified.

                                                                  interface MDCListTextAndIndex

                                                                  interface MDCListTextAndIndex {}
                                                                  • Type used by the typeahead mechanism to keep track of the index associated with list item text.

                                                                  property index

                                                                  index: number;

                                                                    property text

                                                                    text: string;

                                                                      Type Aliases

                                                                      type MDCListFactory

                                                                      type MDCListFactory = (el: Element, foundation?: MDCListFoundation) => MDCList;

                                                                        type MDCListIndex

                                                                        type MDCListIndex = number | number[];

                                                                          Package Files (6)

                                                                          Dependencies (10)

                                                                          Dev Dependencies (0)

                                                                          No dev dependencies.

                                                                          Peer Dependencies (0)

                                                                          No peer dependencies.

                                                                          Badge

                                                                          To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                          You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@material/list.

                                                                          • Markdown
                                                                            [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@material/list)
                                                                          • HTML
                                                                            <a href="https://www.jsdocs.io/package/@material/list"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>