gadgets
Version:
Reusable React UI widgets - This is my widget library. There are many like it, but this one is mine...
82 lines (81 loc) • 3.06 kB
TypeScript
/**
* Represents a single `Tab` entry within a `TabContainer`. This component
* would generally be used only with the `TabContainer`. The tab acts
* as a wrapper for some other content (the children within the control can
* be any other object).
*
* ## Screen:
* <img src="https://github.com/jmquigley/gadgets/blob/master/images/tabs.png" width="50%" />
*
* ## Examples:
*
* ```javascript
* import {Tab, TabContainer} from 'gadgets';
*
* <TabContainer maxTabs={3} location={Location.bottom} nonavigation>
* <Tab title="tab #1">#1<br/><br/>{randomText}</Tab>
* <Tab title="tab #2">#2<br/><br/>{randomText}</Tab>
* <Tab title="tab #3">#3<br/><br/>{randomText}</Tab>
* <Tab title="tab #4">#4<br/><br/>{randomText}</Tab>
* </TabContainer>
* ```
* This example will create a tab container with four tabs drawn on the
* bottom of the control. It will suppress the navigation buttons.
* This example sets the max number of tabs to 3, so the fourth would
* be suppressed.
*
* The tab contents in this example hold a string, but could hold any other
* valid HTML objects.
*
* ## API
* #### Events
* - `onClick` - Invoked when a tab is selected from the Container
* - `onClose(tab: any)` - Invoked when the close button is selected on the tab.
* A reference to the closed tab is passed to the callback.
*
* #### Styles
* - `ui-tab` - The global CSS class applied to the top level `div` of the
* `Tab` component.
*
* #### Properties
* - `href {any}` - This is a general object used to pass references from
* the parent to the child. It includes the following attributes:
* - `selectHandler` - a function reference back to the container that is
* invoked to tell the container that this tab was selected.
* - `noclose=false {boolean}` - when set to true the close button is
* disabled and this tab cannot be hidden. This is generally passed to the
* component by the TabContainer.
* - `orientation=Location.top {Location}` - the location in the container
* component where the tab will be drawn (top, bottom, left, right)
* - `selected=false {boolean}` - if this is set to true, then the tab
* will show as selected.
* - `title='' {string}` - the text that will be shown on the tab.
*
* @module Tab
*/
import * as React from "react";
import { BaseComponent, BaseProps, BaseState, Location } from "../shared";
export interface TabHREF {
hiddenTabHandler: (tab: Tab) => void;
selectHandler: (tab: Tab) => void;
}
export interface TabProps extends BaseProps {
href?: TabHREF;
noclose?: boolean;
onClick?: (e: React.MouseEvent<HTMLLIElement>) => void;
onClose?: (tab: any) => void;
orientation?: Location;
selected?: boolean;
title?: string;
}
export interface TabState extends BaseState {
visible: boolean;
}
export declare class Tab extends BaseComponent<TabProps, TabState> {
static readonly defaultProps: TabProps;
constructor(props: TabProps);
private handleClick;
private handleClose;
render(): JSX.Element;
}
export default Tab;