160 lines
4.6 KiB
TypeScript
160 lines
4.6 KiB
TypeScript
![]() |
import * as React from 'react';
|
||
|
export interface Props {
|
||
|
/**
|
||
|
* Sets a CSS class on the component.
|
||
|
*/
|
||
|
className?: string,
|
||
|
id?: string;
|
||
|
/**
|
||
|
* A key used to uniquely identify the element within an Array
|
||
|
*/
|
||
|
key?: string,
|
||
|
/**
|
||
|
* Inline style
|
||
|
*/
|
||
|
style?: any,
|
||
|
/**
|
||
|
* Tooltip text
|
||
|
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||
|
* @see http://react-toolbox.com/#/components/tooltip
|
||
|
*/
|
||
|
tooltip?: string,
|
||
|
/**
|
||
|
* Amount of time in miliseconds spent before the tooltip is visible.
|
||
|
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||
|
* @see http://react-toolbox.com/#/components/tooltip
|
||
|
*/
|
||
|
tooltipDelay?: number,
|
||
|
/**
|
||
|
* If true, the Tooltip hides after a click in the host component.
|
||
|
* APPLIES ONLY IF THE COMPONENT IS WRAPPED WITH Tooltip.
|
||
|
* @default true
|
||
|
* @see http://react-toolbox.com/#/components/tooltip
|
||
|
*/
|
||
|
tooltipHideOnClick?: boolean,
|
||
|
}
|
||
|
/**
|
||
|
* Properties of components that can be clicked
|
||
|
*/
|
||
|
export interface Clickable {
|
||
|
/**
|
||
|
* Callback called when the button is clicked.
|
||
|
*/
|
||
|
onClick?: Function
|
||
|
}
|
||
|
export interface CardProps extends Props, Clickable {
|
||
|
/**
|
||
|
* Child components, usually Card subcomponents.
|
||
|
*/
|
||
|
children?: any,
|
||
|
/**
|
||
|
* Increases the shadow depth to appear elevated.
|
||
|
*/
|
||
|
raised?: boolean,
|
||
|
/**
|
||
|
* Array of objects describing actions. These actions will be rendered as buttons and the object fields will be transferred to those.
|
||
|
* @default []
|
||
|
*/
|
||
|
actions?: Array<ButtonProps>,
|
||
|
/**
|
||
|
* Sets HEX or RGBA color to add a colored layer to the heading.
|
||
|
*/
|
||
|
color?: string,
|
||
|
/**
|
||
|
* URL to set as a background image in the heading.
|
||
|
*/
|
||
|
image?: string,
|
||
|
|
||
|
/**
|
||
|
* Type of the component to display general modifications. It can be 'wide' for a larger card, 'image' if it's an image card or 'event' which shows just a title on top.
|
||
|
*/
|
||
|
type?: string,
|
||
|
}
|
||
|
/**
|
||
|
* A Card is a piece of paper with unique related data that serves as an entry point to more detailed information.
|
||
|
* For example, a card could contain a photo, text, and a link about a single subject.
|
||
|
* Cards are composed of multiple subcomponents in React Toolbox.
|
||
|
* You can combine each of the subcomponents to create all different Material Design Cards given in the spec.
|
||
|
*/
|
||
|
export class Card extends React.Component<CardProps, {}> {
|
||
|
render(): React.DOMElement<any, any>;
|
||
|
}
|
||
|
export interface CardTitleProps extends Props {
|
||
|
avatar?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
|
||
|
/**
|
||
|
* Children to pass through the component.
|
||
|
*/
|
||
|
children?: any,
|
||
|
/**
|
||
|
* Sets a complementary smaller text under the title.
|
||
|
*/
|
||
|
subtitle?: string,
|
||
|
/**
|
||
|
* Sets the title of the card.
|
||
|
*/
|
||
|
title?: string | boolean,
|
||
|
}
|
||
|
/**
|
||
|
* A versatile title block that can be used in various places on the card, including the media area.
|
||
|
* This component can also display an avatar next to the title content.
|
||
|
*/
|
||
|
export class CardTitle extends React.Component<CardTitleProps, {}> {
|
||
|
render(): React.DOMElement<any, any>;
|
||
|
}
|
||
|
export interface CardMediaProps extends Props {
|
||
|
/**
|
||
|
* Forces a ('wide' 16:9) or ('square' 1:1) aspect ratio respectively.
|
||
|
* Unset, the media area will have a flexible height.
|
||
|
* @default ''
|
||
|
*/
|
||
|
aspectRatio?: string,
|
||
|
/**
|
||
|
* Usually an image/video element or a <CardTitle> component.
|
||
|
*/
|
||
|
children?: any,
|
||
|
/**
|
||
|
* Sets the background color
|
||
|
*/
|
||
|
color?: string,
|
||
|
/**
|
||
|
* Creates a dark overlay underneath the child components.
|
||
|
*/
|
||
|
contentOverlay?: boolean,
|
||
|
/**
|
||
|
* Can be used instead of children. Accepts an element or a URL string.
|
||
|
*/
|
||
|
image?: string | React.ReactElement<any> | React.ReactHTMLElement<any> | React.ClassicComponent<any, any>,
|
||
|
}
|
||
|
/**
|
||
|
* Used for displaying media such as images or videos on a card.
|
||
|
* Can also be used with a solid background color instead of an image.
|
||
|
*/
|
||
|
export class CardMedia extends React.Component<CardMediaProps, {}> {
|
||
|
render(): React.DOMElement<any, any>;
|
||
|
}
|
||
|
export interface CardTextProps extends Props {
|
||
|
/**
|
||
|
* Children to pass through the component.
|
||
|
*/
|
||
|
children?: any,
|
||
|
}
|
||
|
/**
|
||
|
* Basic card content container.
|
||
|
* Good for small descriptions or other supplementary text.
|
||
|
*/
|
||
|
export class CardText extends React.Component<CardTextProps, {}> {
|
||
|
render(): React.DOMElement<any, any>;
|
||
|
}
|
||
|
export interface CardActionsProps extends Props {
|
||
|
/**
|
||
|
* Children to pass through the component.
|
||
|
*/
|
||
|
children?: any,
|
||
|
}
|
||
|
/**
|
||
|
* This component is used as a container for supplemental card actions.
|
||
|
* Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
|
||
|
*/
|
||
|
export class CardActions extends React.Component<CardActionsProps, {}> {
|
||
|
render(): React.DOMElement<any, any>;
|
||
|
}
|