@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
86 lines (85 loc) • 4.25 kB
TypeScript
/// <reference path="../../index.d.ts" />
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { FlipContext } from "../interfaces.js";
import type { TabPosition } from "../calcite-tabs/interfaces.js";
import type { IconName } from "../calcite-icon/interfaces.js";
/**
* Tab-titles are optionally individually closable.
*
* @cssproperty [--calcite-tab-text-color] - Specifies the component's text color.
* @cssproperty [--calcite-tab-text-color-press] - Specifies the component's text color when hovered, pressed, or selected.
* @cssproperty [--calcite-tab-border-color] - Specifies the component's border color.
* @cssproperty [--calcite-tab-background-color] - Specifies the component's background color.
* @cssproperty [--calcite-tab-background-color-hover] - When `calcite-tabs` is `bordered`, specifies the component's background color when hovered.
* @cssproperty [--calcite-tab-accent-color-press] - When `selected` or active, specifies the component's accent color.
* @cssproperty [--calcite-tab-icon-color-start] - Specifies the component's `iconStart` color.
* @cssproperty [--calcite-tab-icon-color-start-press] - When `selected`, hovered, or pressed, specifies the component's `iconStart` color.
* @cssproperty [--calcite-tab-icon-color-end] - Specifies the component's `iconEnd` color.
* @cssproperty [--calcite-tab-icon-color-end-press] - When `selected`, hovered, or pressed, specifies the component's `iconEnd` color.
* @cssproperty [--calcite-tab-close-icon-color] - Specifies the component's close element icon color.
* @cssproperty [--calcite-tab-close-icon-color-press] - Specifies the component's close element icon color when hovered, focused, and active.
* @cssproperty [--calcite-tab-close-icon-background-color] - Specifies the component's close element icon background color.
* @cssproperty [--calcite-tab-close-icon-background-color-press] - Specifies the component's close element icon background color when pressed.
* @cssproperty [--calcite-tab-close-icon-background-color-hover] - Specifies the component's close element icon background color when hovered.
* @slot - A slot for adding text.
*/
export abstract class TabTitle extends LitElement {
/**
* When `true`, displays a close button in the component.
*
* @default false
*/
accessor closable: boolean;
/**
* When `true`, hides the component.
*
* @default false
*/
accessor closed: boolean;
/**
* When `true`, interaction is prevented and the component is displayed with lower opacity.
*
* @default false
*/
accessor disabled: boolean;
/** Specifies an icon to display at the end of the component. */
accessor iconEnd: IconName;
/** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
accessor iconFlipRtl: FlipContext;
/** Specifies an icon to display at the start of the component. */
accessor iconStart: IconName;
/** Overrides individual strings used by the component. */
accessor messageOverrides: { close?: string; };
/**
* Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`.
*
* \@internal
*
* @default "top"
*/
accessor position: TabPosition;
/**
* When `true`, the component and its respective `calcite-tab` contents are selected.
*
* Only one tab can be selected within the `calcite-tabs` parent.
*
* @default false
*/
accessor selected: boolean;
/**
* Specifies a unique name for the component.
*
* When specified, use the same value on the `calcite-tab`.
*/
accessor tab: string;
/** Returns the index of the title within the `calcite-tab-nav`. */
getTabIndex(): Promise<number>;
/** Fires when a `calcite-tab` is selected. */
readonly calciteTabsActivate: import("@arcgis/lumina").TargetedEvent<this, void>;
/** Fires when a `calcite-tab` is closed. */
readonly calciteTabsClose: import("@arcgis/lumina").TargetedEvent<this, void>;
readonly "@eventTypes": {
calciteTabsActivate: TabTitle["calciteTabsActivate"]["detail"];
calciteTabsClose: TabTitle["calciteTabsClose"]["detail"];
};
}