2016-09-02 10:18:33 +03:00
|
|
|
import * as React from "react";
|
|
|
|
import ReactToolbox from "../index";
|
2016-07-24 14:17:16 +03:00
|
|
|
|
|
|
|
export interface CardTheme {
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Class used for the root element.
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
card?: string;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
*Added to the root element in case the card is raised.
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
raised?: string;
|
|
|
|
}
|
|
|
|
|
2016-12-19 22:13:36 +03:00
|
|
|
export interface CardProps extends ReactToolbox.Props {
|
2016-07-24 14:17:16 +03:00
|
|
|
/**
|
|
|
|
* Children to pass through the component.
|
|
|
|
*/
|
2016-09-02 10:18:33 +03:00
|
|
|
children?: React.ReactNode;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Increases the shadow depth to appear elevated.
|
|
|
|
* @default false
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
raised?: boolean;
|
|
|
|
/**
|
|
|
|
* Classnames object defining the component style.
|
|
|
|
*/
|
|
|
|
theme?: CardTheme;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Additional properties passed to component root.
|
|
|
|
*/
|
|
|
|
[key: string]: any;
|
2016-07-24 14:17:16 +03:00
|
|
|
}
|
|
|
|
|
2016-09-02 10:18:33 +03:00
|
|
|
export class Card extends React.Component<CardProps, {}> { }
|
2016-07-24 14:17:16 +03:00
|
|
|
|
|
|
|
export interface CardActionsTheme {
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Used for a wrapper around actions as the root element.
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
cardActions?: string;
|
|
|
|
}
|
|
|
|
|
2016-12-19 22:13:36 +03:00
|
|
|
export interface CardActionsProps extends ReactToolbox.Props {
|
2016-07-24 14:17:16 +03:00
|
|
|
/**
|
|
|
|
* Children to pass through the component.
|
|
|
|
*/
|
2016-09-02 10:18:33 +03:00
|
|
|
children?: React.ReactNode;
|
2016-07-24 14:17:16 +03:00
|
|
|
/**
|
|
|
|
* Classnames object defining the component style.
|
|
|
|
*/
|
|
|
|
theme?: CardActionsTheme;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Additional properties passed to component root.
|
|
|
|
*/
|
|
|
|
[key: string]: any;
|
2016-07-24 14:17:16 +03:00
|
|
|
}
|
|
|
|
|
2016-09-02 10:18:33 +03:00
|
|
|
export class CardActions extends React.Component<CardActionsProps, {}> { }
|
2016-07-24 14:17:16 +03:00
|
|
|
|
|
|
|
export interface CardMediaTheme {
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Added to the element root.
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
cardMedia?: string;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Used for the content element.
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
content?: string;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Added to content element if its overlayed.
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
contentOverlay?: string;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Added to content element if its squared.
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
square?: string;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Added to content element if its wide.
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
wide?: string;
|
|
|
|
}
|
|
|
|
|
2016-12-19 22:13:36 +03:00
|
|
|
export interface CardMediaProps extends ReactToolbox.Props {
|
|
|
|
/**
|
|
|
|
* Forces a 16:9 or 1:1 aspect ratio respectively. Unset, the media area will have a flexible height.
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
aspectRatio?: "wide" | "square";
|
|
|
|
/**
|
|
|
|
* Children to pass through the component.
|
|
|
|
*/
|
2016-09-02 10:18:33 +03:00
|
|
|
children?: React.ReactNode;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Sets the background color.
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
color?: string;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Creates a dark overlay underneath the child components.
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
contentOverlay?: boolean;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Can be used instead of children. Accepts an element or a URL string.
|
|
|
|
*/
|
2016-09-02 10:18:33 +03:00
|
|
|
image?: React.ReactNode | string;
|
2016-07-24 14:17:16 +03:00
|
|
|
/**
|
|
|
|
* Classnames object defining the component style.
|
|
|
|
*/
|
|
|
|
theme?: CardMediaTheme;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Additional properties passed to component root.
|
|
|
|
*/
|
|
|
|
[key: string]: any;
|
2016-07-24 14:17:16 +03:00
|
|
|
}
|
|
|
|
|
2016-09-02 10:18:33 +03:00
|
|
|
export class CardMedia extends React.Component<CardMediaProps, {}> { }
|
2016-07-24 14:17:16 +03:00
|
|
|
|
|
|
|
export interface CardTextTheme {
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Used for the main root element.
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
cardText?: string;
|
|
|
|
}
|
|
|
|
|
2016-12-19 22:13:36 +03:00
|
|
|
export interface CardTextProps extends ReactToolbox.Props {
|
2016-07-24 14:17:16 +03:00
|
|
|
/**
|
|
|
|
* Children to pass through the component.
|
|
|
|
*/
|
2016-09-02 10:18:33 +03:00
|
|
|
children?: React.ReactNode;
|
2016-07-24 14:17:16 +03:00
|
|
|
/**
|
|
|
|
* Classnames object defining the component style.
|
|
|
|
*/
|
|
|
|
theme?: CardTextTheme;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Additional properties passed to component root.
|
|
|
|
*/
|
|
|
|
[key: string]: any;
|
2016-07-24 14:17:16 +03:00
|
|
|
}
|
|
|
|
|
2016-09-02 10:18:33 +03:00
|
|
|
export class CardText extends React.Component<CardTextProps, {}> { }
|
2016-07-24 14:17:16 +03:00
|
|
|
|
|
|
|
export interface CardTitleTheme {
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Class used for the root element.
|
|
|
|
*/
|
|
|
|
cardTitle?: string;
|
|
|
|
/**
|
|
|
|
* Added to the root element when the card has no avatar.
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
large?: string;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Added to the title element.
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
title?: string;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Added to the root element when the card has avatar.
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
small?: string;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Added to the subtitle element.
|
|
|
|
*/
|
2016-07-24 14:17:16 +03:00
|
|
|
subtitle?: string;
|
|
|
|
}
|
|
|
|
|
2016-12-19 22:13:36 +03:00
|
|
|
export interface CardTitleProps extends ReactToolbox.Props {
|
|
|
|
/**
|
|
|
|
* A string URL or Element to specify an avatar in the left side of the title.
|
|
|
|
*/
|
2016-09-02 10:18:33 +03:00
|
|
|
avatar?: React.ReactNode | string;
|
2016-07-24 14:17:16 +03:00
|
|
|
/**
|
|
|
|
* Children to pass through the component.
|
|
|
|
*/
|
2016-09-02 10:18:33 +03:00
|
|
|
children?: React.ReactNode;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Text used for the sub header of the card.
|
|
|
|
*/
|
2016-09-02 10:18:33 +03:00
|
|
|
subtitle?: React.ReactNode | string;
|
2016-07-24 14:17:16 +03:00
|
|
|
/**
|
|
|
|
* Classnames object defining the component style.
|
|
|
|
*/
|
|
|
|
theme?: CardTitleTheme;
|
2016-12-19 22:13:36 +03:00
|
|
|
/**
|
|
|
|
* Text used for the title of the card.
|
|
|
|
*/
|
2016-09-02 10:18:33 +03:00
|
|
|
title?: React.ReactNode | string;
|
2016-07-24 14:17:16 +03:00
|
|
|
}
|
|
|
|
|
2016-09-02 10:18:33 +03:00
|
|
|
export class CardTitle extends React.Component<CardTitleProps, {}> { }
|