Class ZetaSegmentedControl

A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button. Like buttons, segments can contain text or images. Segmented controls are often used to display different views.

To listen for changes, add a click event listener to the zeta-segmented-control element.

To set the active segment, set the active property on the zeta-segmented-item element.

Slot

  • The content of the segmented control. Should be a collection of zeta-segmented-item elements.

Hierarchy

  • ContourableInterface<this> & LitElement<this>
    • ZetaSegmentedControl

Other

constructor activeItem? indicator initComplete items rounded styles

rendering

render

updates

firstUpdated

Other

constructor

OptionalactiveItem

activeItem?: ZetaSegmentedItem

indicator

indicator: HTMLDivElement

initComplete

initComplete: boolean = false

items

items: NodeListOf<ZetaSegmentedItem>

rounded

rounded: boolean

Staticstyles

styles: CSSResultGroup[] = ...

rendering

render

  • render(): TemplateResult<1>

  • Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

    Returns TemplateResult<1>

updates

ProtectedfirstUpdated

  • firstUpdated(_changedProperties): void

  • Invoked when the element is first updated. Implement to perform one time work on the element after update.

    firstUpdated() {
      this.renderRoot.getElementById('my-text-area').focus();
    }

    Setting properties inside this method will trigger the element to update again after this update cycle completes.

    Parameters

    • _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>

      Map of changed properties with old values

    Returns void

Settings

Member Visibility

On This Page

Other
rendering
updates