mithril-materialized/dist/tabs.d.ts

A materialize library for mithril.

import { Vnode, FactoryComponent, Attributes } from 'mithril';
/**
 * Link or anchor target may take 4 values:
 * - _blank: Opens the linked document in a new window or tab
 * - _self: Opens the linked document in the same frame as it was clicked (this is default)
 * - _parent: Opens the linked document in the parent frame
 * - _top: Opens the linked document in the full body of the window
 */
export type AnchorTarget = '_blank' | '_self' | '_parent' | '_top';
export interface TabItem {
    /** Title of the tab */
    title: string;
    /** Vnode to render: may be empty in case of a using the tab as a hyperlink. */
    vnode?: Vnode<any, any>;
    /** ID of the tab element. Default the title in lowercase */
    id?: string;
    /** If the tab should be disabled */
    disabled?: boolean;
    /** CSS class for the tab (li), default `.tab.col.s3` */
    className?: string;
    /** CSS class for the content (li), default `.tab.col.s3` */
    contentClass?: string;
    /**
     * By default, Materialize tabs will ignore their default anchor behaviour.
     * To force a tab to behave as a regular hyperlink, just specify the target property of that link.
     */
    target?: AnchorTarget;
    /** Only used in combination with a set target to make the tab act as a regular hyperlink. */
    href?: string;
}
export interface TabsOptions {
    /** Duration of tab change animation in ms */
    duration?: number;
    /** Called when a tab is shown */
    onShow?: (tab: HTMLElement) => void;
    /** The maximum width at which tabs switch to swipeable mode */
    responsiveThreshold?: number;
    /** Enable swiping between tabs on mobile */
    swipeable?: boolean;
}
export interface TabsAttrs extends TabsOptions, Attributes {
    /** Selected tab id, takes precedence over tab.active property */
    selectedTabId?: string;
    /**
     * Tab width, can be `auto` to use the width of the title,
     * `fill` to use all availabe space, or `fixed` to use a column size.
     */
    tabWidth?: 'auto' | 'fixed' | 'fill';
    /** List of tab items */
    tabs: TabItem[];
    /** Callback when tab changes */
    onTabChange?: (tabId: string) => void;
}
/** CSS-only Tabs component - no MaterializeCSS dependencies */
export declare const Tabs: FactoryComponent<TabsAttrs>;