ClickableChip

ClickableChip

• accessibilityLabel

  A label that describes the purpose or contents of the Chip. It will be read to users using assistive technologies such as screen readers.

  string

• adoptedCallback

  () => void

• attributeChangedCallback

  (name: string) => void

• click

  Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.

  ({ sourceEvent }?: ClickOptions) => void

• color

  Modify the color to be more or less intense.

  ColorKeyword

• connectedCallback

  () => void

• disabled

  Disables the chip, disallowing any interaction.

  boolean

• disconnectedCallback

  () => void

• hidden

  Determines whether the chip is hidden. If this property is being set on each framework render (as in 'controlled' usage), and the chip is `removable`, ensure you update app state for this property when the `remove` event fires. If the chip is not `removable`, it can still be hidden by setting this property.

  boolean

• href

  The URL to link to. - If set, it will navigate to the location specified by `href` after executing the `click` event.

  string

• queueRender

  Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.

  () => void

• removable

  Whether the chip is removable.

  boolean

• setAttribute

  (name: string, value: string) => void

declare class ClickableChip
  extends PreactCustomElement
  implements ClickableChipProps
{
  accessor color: ClickableChipProps['color'];
  accessor accessibilityLabel: ClickableChipProps['accessibilityLabel'];
  accessor removable: ClickableChipProps['removable'];
  accessor hidden: ClickableChipProps['hidden'];
  accessor disabled: ClickableChipProps['disabled'];
  accessor href: ClickableChipProps['href'];
  constructor();
}

ColorKeyword

'subdued' | 'base' | 'strong'

ClickOptions

• sourceEvent

  The event you want to influence the synthetic click.

  ActivationEventEsque

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

• button

  number

• ctrlKey

  boolean

• metaKey

  boolean

• shiftKey

  boolean

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

ClickableChipEvents

• afterhide

  CallbackEventListener<typeof tagName> | null

• click

  CallbackEventListener<typeof tagName> | null

• remove

  CallbackEventListener<typeof tagName> | null

export interface ClickableChipEvents {
  click: CallbackEventListener<typeof tagName> | null = null;
  remove: CallbackEventListener<typeof tagName> | null = null;
  afterhide: CallbackEventListener<typeof tagName> | null = null;
}

CallbackEventListener

(EventListener & {
      (event: CallbackEvent<T>): void;
    }) | null

CallbackEvent

Event & {
  currentTarget: HTMLElementTagNameMap[T];
}