Overview
Purpose: Tracks the disabled state of a component that can be disabled.
This mixin primarily works in the middle of the Elix render pipeline:
events → methods → setState ➞ render DOM → post-render
Expects the component to provide:
setState
method compatible withReactiveMixin
's setState.
Provides the component with:
disabled
property, attribute, and state member that can be invoked to disable the component.
Usage
import DisabledMixin from "elix/src/base/DisabledMixin.js";
import ReactiveElement from "elix/define/ReactiveElement.js";
class MyElement extends DisabledMixin(ReactiveElement) {}
customElements.define("my-element", MyElement);
const element = new MyElement();
element.disabled = true; // Sets disabled property
element.hasAttribute("disabled"); // True
element.setAttribute("disabled", ""); // Sets property to true
element.setAttribute("disabled", "false"); // Also sets property to true!
element.removeAttribute("disabled"); // Sets property to false
element.disabled = false; // More direct way to set property to false
The marshaling of a Boolean attribute from markup to a property and back has some subtleties, as shown above. DisabledMixin
helps ensure that those subtleties are covered properly.
Example
API
Used by classes AutoCompleteComboBox, ComboBox, DateComboBox, DropdownList, FilterComboBox, ListComboBox, MenuButton, MenuItem, NumberSpinBox, Option, PlainAutoCompleteComboBox, PlainChoice, PlainComboBox, PlainDateComboBox, PlainDropdownList, PlainExpandCollapseToggle, PlainFilterComboBox, PlainListComboBox, PlainMenuButton, PlainMenuItem, PlainNumberSpinBox, PlainPopupButton, PlainPopupSource, PlainSpinBox, PopupButton, PopupSource, SpinBox, TooltipButton, and UpDownToggle.
disabled property
True if the component is disabled, false (the default) if not.
The value of this property will be reflected to the disabled
attribute
so that it can be referenced in CSS. Note that this non-native
implementation of the disabled
attribute will not trigger the
:disabled
CSS pseudo-class, so your style rules will have to reference
the presence or absence of the disabled
attribute. That is, instead
of writing
my-component:disabled { ... }
write this instead
my-component[disabled] { ... }
Like the native disabled
attribute, this attribute is boolean. That
means that it's existence in markup sets the attribute, even if set to
an empty string or a string like "false".
Type: boolean
Default: false
disabledchange event
Raised when the disabled
property changes.