132 results for "maintainer:hunterloftis"

`sp-textfield` components are text boxes that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the …

Updated February 22, 2022 by @hunterloftis

An `<sp-menu>` is used for creating a menu list. The various elements inside a menu are given as `<sp-menu-group>`, `<sp-menu-item>`, or `<sp-menu-divider>`. Often a `<sp-menu>` …

Updated February 22, 2022 by @hunterloftis

An `<sp-field-label>` provides accessible labelling for form elements. Use the `for` attribute to outline the `id` of an element in the same DOM tree to which it should associate …

Updated February 22, 2022 by @hunterloftis

An `<sp-popover>` is used to display transient content (menus, options, additional actions etc.) and appears when clicking/tapping on a source (tools, buttons, etc.) It stands out …

Updated February 22, 2022 by @hunterloftis

An `<sp-card>` represents a rectangular card that contains a variety of text and image layouts. Cards are typically used to encapsulate units of a data set, such as a gallery of …

Updated February 22, 2022 by @hunterloftis

An `<sp-picker>` is an alternative to HTML's `<select>` element. Use `<sp-menu-item>` elements to outline the options that will be made available to the user when interacting with …

Updated February 22, 2022 by @hunterloftis

`<sp-checkbox>` allow users to select multiple items from a list of independent options, or to mark an individual option as selected.

Updated February 22, 2022 by @hunterloftis

`<sp-slider>` allows users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.

Updated February 22, 2022 by @hunterloftis

Summarize html content

Updated May 26, 2017 by @hunterloftis

Web component implementation of a Spectrum design HelpText

Updated February 22, 2022 by @hunterloftis

The `<sp-color-handle>` is used to select a colour on an `<sp-color-area>`, `<sp-color-slider>`, or `<sp-color-wheel>`. It functions similarly to the handle on an `<sp-slider>`.

Updated February 22, 2022 by @hunterloftis

An `<sp-switch>` is used to turn an option on or off. Switches allow users to select the state of a single option at a time. Use a switch rather than a checkbox when activating …

Updated February 22, 2022 by @hunterloftis

`sp-action-group` delivers a set of action buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons. The `compact` attribute …

Updated February 22, 2022 by @hunterloftis

Web component implementation of a Spectrum design NumberField

Updated February 22, 2022 by @hunterloftis

`sp-toast` elements display brief, temporary notifications. They are noticeable but do not disrupt the user experience and do not require an action to be taken.

Updated February 22, 2022 by @hunterloftis

`<sp-radio>` and `<sp-radio-group>` allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.

Updated February 22, 2022 by @hunterloftis

An `<sp-underlay>` is used primarily in concert with elements similar to `<sp-dialog>` that lay over the rest of your page to deliver a blocking layer between those two contexts. …

Updated February 22, 2022 by @hunterloftis

`sp-dialog` displays important information that users need to acknowledge. They appear over the interface and block further interactions. When used directly the `sp-dialog` …

Updated February 22, 2022 by @hunterloftis

An `<sp-field-group>` element is used to layout a group of fields, usually `<sp-checkbox>` elements. It can be leveraged for `vertical` or `horizontal` organization of the fields …

Updated February 22, 2022 by @hunterloftis

`@spectrum-web-components/bundle` is a master dependancy that allows a project to import any and all of the the Spectrum Web Components. While it is a great approach to …

Updated February 22, 2022 by @hunterloftis

Web component implementation of a Spectrum design Tray

Updated February 22, 2022 by @hunterloftis

`sp-divider` brings clarity to a layout by grouping and dividing content that exists in close proximity. It can also be used to establish rhythm and hierarchy.

Updated February 22, 2022 by @hunterloftis

An `<sp-action-menu>` is an action button that triggers an overlay with `<sp-menu-items>` for activation. Use an `<sp-menu>` element to outline the items that will be made …

Updated February 22, 2022 by @hunterloftis

The `<sp-tabs>` displays a list of `<sp-tab>` element children as `role="tablist"`. An `<sp-tab>` element is associated with a sibling `<sp-tab-panel>` element via their `value` …

Updated February 22, 2022 by @hunterloftis

Use an `<sp-asset>` element to visually represent a file, folder or image in your application. File and folder representations will center themselves horizontally and vertically …

Updated February 22, 2022 by @hunterloftis