@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
82 lines • 3.37 kB
TypeScript
import React from 'react';
import { IconProps } from '../icon/interfaces';
import { BaseComponentProps } from '../internal/base-component';
import { NonCancelableEventHandler } from '../internal/events';
export interface TokenGroupProps extends BaseComponentProps {
/**
* An object containing all the necessary localized strings required by the component.
* @i18n
*/
i18nStrings?: TokenGroupProps.I18nStrings;
/**
* Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.
*/
limit?: number;
/**
* Specifies the direction in which tokens are aligned (`horizontal | vertical`).
*/
alignment?: TokenGroupProps.Alignment;
/**
* Removes any outer padding from the component.
* We recommend to always enable this property.
*/
disableOuterPadding?: boolean;
/**
*
* An array of objects representing token items. Each token has the following properties:
*
* - `label` (string) - Title text of the token.
* - `description` (string) - (Optional) Further information about the token that appears below the label.
* - `disabled` [boolean] - (Optional) Determines whether the token is disabled.
* - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.
* - `tags` [string[]] - (Optional) A list of tags giving further guidance about the token.
* - `dismissLabel` (string) - (Optional) Adds an `aria-label` to the dismiss button.
* - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the token.
* - `iconAlt` (string) - (Optional) Specifies alternate text for a custom icon, for use with `iconUrl`.
* - `iconUrl` (string) - (Optional) URL of a custom icon.
* - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).
*/
items?: ReadonlyArray<TokenGroupProps.Item>;
/**
* Called when the user clicks on the dismiss button. The token won't be automatically removed.
* Make sure that you add a listener to this event to update your application state.
*/
onDismiss?: NonCancelableEventHandler<TokenGroupProps.DismissDetail>;
/**
* Adds an `aria-label` to the "Show fewer" button.
* Use to assign unique labels when there are multiple token groups with the same `limitShowFewer` label on one page.
*/
limitShowFewerAriaLabel?: string;
/**
* Adds an `aria-label` to the "Show more" button.
* Use to assign unique labels when there are multiple token groups with the same `limitShowMore` label on one page.
*/
limitShowMoreAriaLabel?: string;
/**
* Specifies if the control is read-only, which prevents the
* user from modifying the value. A read-only control is still focusable.
*/
readOnly?: boolean;
}
export declare namespace TokenGroupProps {
type Alignment = 'horizontal' | 'vertical';
interface Item {
label?: string;
disabled?: boolean;
labelTag?: string;
description?: string;
iconAlt?: string;
iconName?: IconProps.Name;
iconUrl?: string;
iconSvg?: React.ReactNode;
tags?: ReadonlyArray<string>;
dismissLabel?: string;
}
interface DismissDetail {
itemIndex: number;
}
interface I18nStrings {
limitShowFewer?: string;
limitShowMore?: string;
}
}