@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
Interfaces
Enums
Namespaces
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'
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 oneto 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[](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>
- Updated .
Package analyzed in 2187 ms. - Missing or incorrect documentation? Open an issue for this package.