@limetech/lime-elements/dist/types/components/dock/dock.d.ts

Lime Elements

import { EventEmitter } from '../../stencil-public-runtime';
import { DockItem } from './dock.types';
/**
 * @exampleComponent limel-example-dock-basic
 * @exampleComponent limel-example-dock-custom-component
 * @exampleComponent limel-example-dock-notification
 * @exampleComponent limel-example-dock-mobile
 * @exampleComponent limel-example-dock-expanded
 * @exampleComponent limel-example-dock-colors-css
 */
export declare class Dock {
  /**
   * Items that are placed in the dock.
   */
  dockItems: DockItem[];
  /**
   * Items that are placed at the bottom of the dock. (Or at the end in mobile
   * layout.)
   */
  dockFooterItems?: DockItem[];
  /**
   * A label used to describe the purpose of the navigation element to users
   * of assistive technologies, like screen readers. Especially useful when
   * there are multiple navigation elements in the user interface.
   * Example value: "Primary navigation"
   */
  accessibleLabel?: string;
  /**
   * Defines the width of the component, when it loads.
   * - `true`: shows both icons and labels of the Dock items.
   * - `false`: only shows icons of the doc items, and displays
   * their labels as tooltip.
   *
   * Note: when `useMobileLayout` is `true`, labels will always
   * be shown as tooltips. Read more below…
   */
  expanded?: boolean;
  /**
   * Set to `false` if you do not want to allow end-users
   * to exapnd or shrink the Dock. This will hide the
   * expand/shrink button, and the only things that defines
   * the layout will be the `expanded` property, and
   * the `mobileBreakPoint`.
   */
  allowResize?: boolean;
  /**
   * Defines the breakpoint in pixles, at which the component will be rendered
   * in a hoizontal layout. Default breakpoint is `700` pixels, which means
   * when the screen size is smaller than `700px`, the component will automatically
   * switch to a horizontal layout.
   */
  mobileBreakPoint?: number;
  /**
   * Fired when a dock item has been selected from the dock.
   */
  itemSelected: EventEmitter<DockItem>;
  /**
   * Fired when a dock menu is opened.
   */
  menuOpen: EventEmitter<DockItem>;
  /**
   * Fired when the popover is closed.
   */
  close: EventEmitter<void>;
  /**
   * Fired when a Dock is expanded or collapsed.
   */
  private dockExpanded;
  /**
   * Is used to render the component horizontally, and place
   * the Dock items in a row.
   */
  private useMobileLayout;
  private resizeObserver;
  componentDidLoad(): void;
  disconnectedCallback(): void;
  render(): any;
  private renderSeparator;
  private renderDockItem;
  private handleResize;
  private renderExpandShrinkToggle;
  private toggleDockWidth;
}
//# sourceMappingURL=dock.d.ts.map