@material/switch

  • Version 14.0.0
  • Published
  • 745 kB
  • 13 dependencies
  • MIT license

Install

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

Overview

The Material Components for the web switch component

Index

Classes

class MDCSwitch

class MDCSwitch
extends MDCComponent<MDCSwitchRenderFoundation>
implements MDCSwitchState, MDCRippleCapableSurface {}
  • MDCSwitch provides a component implementation of a Material Design switch.

constructor

constructor(root: HTMLButtonElement, foundation?: MDCSwitchRenderFoundation);

    property disabled

    disabled: boolean;

      property processing

      processing: boolean;

        property ripple

        ripple: MDCRipple;

          property root

          root: HTMLButtonElement;

            property selected

            selected: boolean;

              method attachTo

              static attachTo: (root: HTMLButtonElement) => MDCSwitch;
              • Creates a new MDCSwitch and attaches it to the given root element.

                Parameter root

                The root to attach to. the new component instance.

              method createAdapter

              protected createAdapter: () => MDCSwitchRenderAdapter;

                method createRippleAdapter

                protected createRippleAdapter: () => MDCRippleAdapter;

                  method createRippleFoundation

                  protected createRippleFoundation: () => MDCRippleFoundation;

                    method destroy

                    destroy: () => void;

                      method getDefaultFoundation

                      getDefaultFoundation: () => MDCSwitchRenderFoundation;

                        method initialize

                        initialize: () => void;

                          method initialSyncWithDOM

                          initialSyncWithDOM: () => void;

                            class MDCSwitchFoundation

                            class MDCSwitchFoundation extends MDCObserverFoundation<MDCSwitchAdapter> {}
                            • MDCSwitchFoundation provides a state-only foundation for a switch component.

                              State observers and event handler entrypoints update a component's adapter's state with the logic needed for switch to function.

                            constructor

                            constructor(adapter: MDCSwitchAdapter);

                              method handleClick

                              handleClick: () => void;
                              • Event handler for switch click events. Clicking on a switch will toggle its selected state.

                              method init

                              init: () => void;
                              • Initializes the foundation and starts observing state changes.

                              method stopProcessingIfDisabled

                              protected stopProcessingIfDisabled: () => void;

                                class MDCSwitchRenderFoundation

                                class MDCSwitchRenderFoundation extends MDCSwitchFoundation {}
                                • MDCSwitchRenderFoundation provides a state and rendering foundation for a switch component.

                                  State observers and event handler entrypoints update a component's adapter's state with the logic needed for switch to function.

                                  In response to state changes, the rendering foundation uses the component's render adapter to keep the component's DOM updated with the state.

                                property adapter

                                protected adapter: MDCSwitchRenderAdapter;

                                  method init

                                  init: () => void;
                                  • Initializes the foundation and starts observing state changes.

                                  method initFromDOM

                                  initFromDOM: () => void;
                                  • Initializes the foundation from a server side rendered (SSR) component. This will sync the adapter's state with the current state of the DOM.

                                    This method should be called after init().

                                  method onDisabledChange

                                  protected onDisabledChange: () => void;

                                    method onProcessingChange

                                    protected onProcessingChange: () => void;

                                      method onSelectedChange

                                      protected onSelectedChange: () => void;

                                        Interfaces

                                        interface MDCSwitchAdapter

                                        interface MDCSwitchAdapter {}
                                        • Defines the shape of the adapter expected by the foundation.

                                          This adapter is used to delegate state-only updates from the foundation to the component. It does not delegate DOM or rendering logic, such as adding or removing classes.

                                        property state

                                        state: MDCSwitchState;
                                        • The state of the component.

                                        interface MDCSwitchRenderAdapter

                                        interface MDCSwitchRenderAdapter extends MDCSwitchAdapter {}
                                        • Defines the shape of the adapter expected by the rendering foundation.

                                          This adapter is used to delegate state and rendering logic updates from the rendering foundation to the component.

                                        method addClass

                                        addClass: (className: CssClasses) => void;
                                        • Adds a class to the root element.

                                          Parameter className

                                          The class to add.

                                        method hasClass

                                        hasClass: (className: CssClasses) => boolean;
                                        • Returns whether or not the root element has a class.

                                          Parameter className

                                          The class to check. true if the root element has the class, or false if not.

                                        method isDisabled

                                        isDisabled: () => boolean;
                                        • Checks if the root element is disabled. true if the root element is disabled, or false if not.

                                        method removeClass

                                        removeClass: (className: CssClasses) => void;
                                        • Removes a class from the root element.

                                          Parameter className

                                          The class to remove.

                                        method setAriaChecked

                                        setAriaChecked: (ariaChecked: string) => void;
                                        • Sets the aria-checked attribute of the root element.

                                          Parameter ariaChecked

                                          The value of the attribute to set.

                                        method setDisabled

                                        setDisabled: (disabled: boolean) => void;
                                        • Disables or enables the root element.

                                          Parameter disabled

                                          True to disable the root element, or false to enable.

                                        interface MDCSwitchState

                                        interface MDCSwitchState {}
                                        • The state of the switch.

                                        property disabled

                                        disabled: boolean;
                                        • Indicates whether or not the switch is disabled.

                                        property processing

                                        processing: boolean;
                                        • Indicates whether or not the switch is processing and showing a loading indicator. A disabled switch cannot be processing.

                                        property selected

                                        selected: boolean;
                                        • If true, the switch is on. If false, the switch is off.

                                        Enums

                                        enum CssClasses

                                        enum CssClasses {
                                        PROCESSING = 'mdc-switch--processing',
                                        SELECTED = 'mdc-switch--selected',
                                        UNSELECTED = 'mdc-switch--unselected',
                                        }
                                        • CSS classes used for switch.

                                        member PROCESSING

                                        PROCESSING = 'mdc-switch--processing'

                                          member SELECTED

                                          SELECTED = 'mdc-switch--selected'

                                            member UNSELECTED

                                            UNSELECTED = 'mdc-switch--unselected'

                                              enum Selectors

                                              enum Selectors {
                                              RIPPLE = '.mdc-switch__ripple',
                                              }
                                              • Query selectors used for switch.

                                              member RIPPLE

                                              RIPPLE = '.mdc-switch__ripple'

                                                Namespaces

                                                namespace deprecated

                                                module 'deprecated/index.d.ts' {}
                                                • 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.

                                                variable cssClasses

                                                const cssClasses: { CHECKED: string; DISABLED: string };
                                                • CSS classes used by the switch.

                                                variable strings

                                                const strings: {
                                                ARIA_CHECKED_ATTR: string;
                                                NATIVE_CONTROL_SELECTOR: string;
                                                RIPPLE_SURFACE_SELECTOR: string;
                                                };
                                                • String constants used by the switch.

                                                class MDCSwitch

                                                class MDCSwitch
                                                extends MDCComponent<MDCSwitchFoundation>
                                                implements MDCRippleCapableSurface {}

                                                  property checked

                                                  checked: boolean;

                                                    property disabled

                                                    disabled: boolean;

                                                      property ripple

                                                      readonly ripple: MDCRipple;

                                                        method attachTo

                                                        static attachTo: (root: HTMLElement) => MDCSwitch;

                                                          method destroy

                                                          destroy: () => void;

                                                            method getDefaultFoundation

                                                            getDefaultFoundation: () => MDCSwitchFoundation;

                                                              method initialSyncWithDOM

                                                              initialSyncWithDOM: () => void;

                                                                class MDCSwitchFoundation

                                                                class MDCSwitchFoundation extends MDCFoundation<MDCSwitchAdapter> {}

                                                                  constructor

                                                                  constructor(adapter?: Partial<MDCSwitchAdapter>);

                                                                    property cssClasses

                                                                    static readonly cssClasses: { CHECKED: string; DISABLED: string };
                                                                    • The CSS classes used by the switch.

                                                                    property defaultAdapter

                                                                    static readonly defaultAdapter: MDCSwitchAdapter;
                                                                    • The default Adapter for the switch.

                                                                    property strings

                                                                    static readonly strings: {
                                                                    ARIA_CHECKED_ATTR: string;
                                                                    NATIVE_CONTROL_SELECTOR: string;
                                                                    RIPPLE_SURFACE_SELECTOR: string;
                                                                    };
                                                                    • The string constants used by the switch.

                                                                    method handleChange

                                                                    handleChange: (evt: Event) => void;
                                                                    • Handles the change event for the switch native control.

                                                                    method setChecked

                                                                    setChecked: (checked: boolean) => void;
                                                                    • Sets the checked state of the switch.

                                                                    method setDisabled

                                                                    setDisabled: (disabled: boolean) => void;
                                                                    • Sets the disabled state of the switch.

                                                                    interface MDCSwitchAdapter

                                                                    interface MDCSwitchAdapter {}
                                                                    • 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 addClass

                                                                    addClass: (className: string) => void;
                                                                    • Adds a CSS class to the root element.

                                                                    method removeClass

                                                                    removeClass: (className: string) => void;
                                                                    • Removes a CSS class from the root element.

                                                                    method setNativeControlAttr

                                                                    setNativeControlAttr: (attr: string, value: string) => void;
                                                                    • Sets an attribute value of the native HTML control underlying the switch.

                                                                    method setNativeControlChecked

                                                                    setNativeControlChecked: (checked: boolean) => void;
                                                                    • Sets checked state of the native HTML control underlying the switch.

                                                                    method setNativeControlDisabled

                                                                    setNativeControlDisabled: (disabled: boolean) => void;
                                                                    • Sets the disabled state of the native HTML control underlying the switch.

                                                                    Package Files (10)

                                                                    Dependencies (13)

                                                                    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/switch.

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