gadgets
Version:
Reusable React UI widgets - This is my widget library. There are many like it, but this one is mine...
70 lines (69 loc) • 2.02 kB
TypeScript
/**
* A typical toolbar control. It takes a set of buttons and controls and
* displays the on a horizontal control. It will only accept a specific
* set of controls (from the Gadgets library)
*
* - Button
* - ButtonCircle
* - ButtonDialog
* - ButtonText
* - ButtonToggle
* - Divider
* - Dropdown
* - Label
* - Option
* - Switch
* - TextField
*
* Note that if a component is wrapped in a styled component and placed in the
* toolbar it will NOT work. The class name is lost when by the styled
* component is applied (and becomes display name). The child components should
* not be wrapped.
*
* ## Screen:
* <img src="https://github.com/jmquigley/gadgets/blob/master/images/toolbar.png" width="60%" />
*
* ## Examples:
*
* ```javascript
* import {Button, Sizing, Toolbar} from 'gadgets';
*
* <Toolbar justify={Justify.left} sizing={Sizing.small}>
* <Button iconName="cab" onClick={someFunction} />
* <Divider />
* <Option />
* ...
* </Toolbar>
* ```
*
* ## API
* #### Events
* None
*
* #### Styles
* - `ui-toolbar` - global style placed on the root `<div>` component of the
* toolbar.
* - `ui-toolbar-group` - The components are all placed within a grouping
* div to set its left/right/center justification. This global style is
* placed on this div.
*
* #### Properties
* - `justify=Justify.left {Justify}` - The toolbar can be placed to the left
* (default), center, or right within its container. The property sets that
* location.
*
* @module Toolbar
*/
/// <reference types="react" />
import { BaseComponent, BaseProps, BaseState, Justify } from "../shared";
export interface ToolbarProps extends BaseProps {
justify?: Justify;
}
export declare type ToolbarState = BaseState;
export declare class Toolbar extends BaseComponent<ToolbarProps, ToolbarState> {
static readonly defaultProps: ToolbarProps;
private static readonly _whitelist;
constructor(props: ToolbarProps);
render(): JSX.Element;
}
export default Toolbar;