apphouse/dist/templates/Card.d.ts

Component library for React that uses observable state management and theme-able components.

import React from 'react';
import { CSSProperties } from 'glamor';
import { ApphouseComponent } from '../components/component.interfaces';
export type CardAnimationDirection = 'top' | 'bottom' | 'left' | 'right';
export interface CardStyles {
    container?: CSSProperties;
    content?: CSSProperties;
    btn?: CSSProperties;
    title?: CSSProperties;
    subtitle?: CSSProperties;
    text?: CSSProperties;
}
/**
 * A card component
 */
interface CardProps extends ApphouseComponent<CardStyles> {
    /**
     * The background color of the card on hover
     * @default gradient
     */
    backgroundHoverColor?: string;
    /**
     * The background color of the card
     * @default surface
     */
    backgroundColor?: 'surface' | 'surface10' | 'surface20' | 'surface30' | 'surface40';
    /**
     * The title of the card
     */
    title?: string | React.ReactNode;
    /**
     * The subtitle of the card
     */
    subtitle?: string | React.ReactNode;
    /**
     * The text of the card
     */
    text?: string | React.ReactNode;
    /**
     * The text of the button
     */
    buttonText?: string;
    /**
     * The callback function to be executed when the button is clicked.
     */
    onClick?: () => void;
    /**
     * The alignment of the button
     * @default center
     * */
    buttonAlign?: 'left' | 'center' | 'right';
    /**
     * The direction of the animation
     * Starts from the direction and goes to the opposite direction
     * @default left
     */
    animationDirection?: CardAnimationDirection;
}
export declare const Card: React.FC<CardProps>;
export {};