@limetech/lime-elements
Version:
59 lines • 2.21 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
import { BreadcrumbsItem } from './breadcrumbs.types';
/**
* A Breadcrumb consists of a list of distinct "places" that a user has gone through,
* before ending up where they are right now, in a website or an application.
*
* These "places" can be for example _pages_ of a website, which are hierarchically
* laid out before the current page that the user is looking at.
* They could also be _steps_ which the user has gone through, which perhaps have no
* hierarchical relation with each other, but has eventually led the user "here".
*
* :::note
* - Where the user currently is, is always the last step of the breadcrumb.
* - A breadcrumbs never shows where users can go after this place.
* It only illustrates where user has been before ending up here.
* If the path that a user can take is not changing and if next steps are clear,
* you can use the [Progress flow component](#/component/limel-progress-flow) instead.
* :::
*
* Breadcrumbs are often placed horizontally before the main content of the current screen.
*
* @exampleComponent limel-example-breadcrumbs-links
* @exampleComponent limel-example-breadcrumbs-buttons
* @exampleComponent limel-example-breadcrumbs-icons
* @exampleComponent limel-example-breadcrumbs-divider
* @exampleComponent limel-example-breadcrumbs-icon-color
* @exampleComponent limel-example-breadcrumbs-styling
*/
export declare class Breadcrumbs {
/**
* List of items in the breadcrumbs,
* each representing a step or a page.
*/
items: BreadcrumbsItem[];
/**
* The visual divider that separates items.
* It must be a single character such as `-` or `,`.
*/
divider: string;
/**
* Fired when clicking on buttons (not links!)
* inside the breadcrumbs.
*/
select: EventEmitter<BreadcrumbsItem>;
private host;
render(): any;
componentWillLoad(): void;
disconnectedCallback(): void;
private renderSteps;
private renderAsButton;
private renderAsLink;
private renderLastStep;
private renderIcon;
private renderLabel;
private renderTooltip;
private areItemsLinks;
private handleClick;
}
//# sourceMappingURL=breadcrumbs.d.ts.map