or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cards.mddescriptions.mdfield-rendering.mdform-components.mdindex.mdlayout.mdproviders.mdskeleton.mdtable-list.mdutilities.md
tile.json

cards.mddocs/

Card Components

Enhanced card components with statistics display, selection capabilities, advanced layouts, and interactive features built on Ant Design's card foundation.

Capabilities

ProCard - Enhanced Card Component

Advanced card component with enhanced features, layouts, and interactive capabilities.

/**
 * Enhanced card component with advanced features
 * @param props - ProCard configuration props
 * @returns JSX.Element
 */
function ProCard(props: ProCardProps): JSX.Element;

interface ProCardProps {
  /** Card title */
  title?: React.ReactNode;
  /** Extra content in header */
  extra?: React.ReactNode;
  /** Card type */
  type?: 'inner' | 'default';
  /** Card size */
  size?: 'default' | 'small';
  /** Loading state */
  loading?: boolean;
  /** Bordered style */
  bordered?: boolean;
  /** Header bordered */
  headerBordered?: boolean;
  /** Collapsible configuration */
  collapsible?: boolean;
  /** Collapsed state */
  collapsed?: boolean;
  /** Default collapsed state */
  defaultCollapsed?: boolean;
  /** Collapse change handler */
  onCollapse?: (collapsed: boolean) => void;
  /** Ghost style */
  ghost?: boolean;
  /** Hoverable effect */
  hoverable?: boolean;
  /** Split direction for layout */
  split?: 'vertical' | 'horizontal';
  /** Card direction */
  direction?: 'column' | 'row';
  /** Wrap configuration */
  wrap?: boolean;
  /** Body style */
  bodyStyle?: React.CSSProperties;
  /** Head style */
  headStyle?: React.CSSProperties;
  /** Card actions */
  actions?: React.ReactNode[];
  /** Cover image */
  cover?: React.ReactNode;
  /** Tab list configuration */
  tabList?: {
    key: string;
    tab: React.ReactNode;
    disabled?: boolean;
  }[];
  /** Active tab key */
  activeTabKey?: string;
  /** Default active tab key */
  defaultActiveTabKey?: string;
  /** Tab change handler */
  onTabChange?: (key: string) => void;
  /** Tab bar extra content */
  tabBarExtraContent?: React.ReactNode;
  /** Tab props */
  tabProps?: any;
  /** Card style */
  style?: React.CSSProperties;
  /** Card class name */
  className?: string;
  /** Gutter for layout */
  gutter?: number | [number, number];
  /** Layout configuration */
  layout?: 'default' | 'center';
  /** Checkbox configuration */
  checked?: boolean;
  /** Checkbox change handler */
  onChecked?: (checked: boolean) => void;
  /** Children content */
  children?: React.ReactNode;
}

Usage Examples:

import { ProCard } from "@ant-design/pro-components";
import { Button, Space, Avatar } from "antd";

// Basic ProCard usage
const BasicCard = () => (
  <ProCard
    title="Basic Card"
    extra={<Button type="link">More</Button>}
    bordered
    headerBordered
  >
    <div>Card content goes here</div>
  </ProCard>
);

// Collapsible card
const CollapsibleCard = () => (
  <ProCard
    title="Collapsible Card"
    collapsible
    defaultCollapsed={false}
    onCollapse={(collapsed) => console.log('Collapsed:', collapsed)}
  >
    <div>This content can be collapsed</div>
  </ProCard>
);

// Card with tabs
const TabbedCard = () => (
  <ProCard
    title="Tabbed Card"
    tabList={[
      { key: 'overview', tab: 'Overview' },
      { key: 'details', tab: 'Details' },
      { key: 'settings', tab: 'Settings' },
    ]}
    onTabChange={(key) => console.log('Active tab:', key)}
  >
    <div>Tab content here</div>
  </ProCard>
);

// Split layout cards
const SplitCard = () => (
  <ProCard split="vertical">
    <ProCard title="Left Panel" colSpan="30%">
      Left content
    </ProCard>
    <ProCard title="Right Panel">
      Right content
    </ProCard>
  </ProCard>
);

// Card with actions
const ActionCard = () => (
  <ProCard
    title="Action Card"
    actions={[
      <Button key="edit">Edit</Button>,
      <Button key="share">Share</Button>,
      <Button key="more">More</Button>,
    ]}
  >
    <div>Card with action buttons</div>
  </ProCard>
);

CheckCard - Selectable Card Component

Checkbox-style card component with selection capabilities for interactive choices.

/**
 * Checkbox-style card with selection capability
 * @param props - CheckCard configuration props
 * @returns JSX.Element
 */
function CheckCard(props: CheckCardProps): JSX.Element;

/**
 * Group of CheckCard components
 * @param props - CheckCard.Group configuration props
 * @returns JSX.Element
 */
function CheckCard.Group(props: CheckCardGroupProps): JSX.Element;

interface CheckCardProps {
  /** Card title */
  title?: React.ReactNode;
  /** Card description */
  description?: React.ReactNode;
  /** Card avatar/icon */
  avatar?: React.ReactNode;
  /** Card cover image */
  cover?: React.ReactNode;
  /** Selection value */
  value?: any;
  /** Checked state */
  checked?: boolean;
  /** Default checked state */
  defaultChecked?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Card size */
  size?: 'default' | 'small' | 'large';
  /** Bordered style */
  bordered?: boolean;
  /** Multiple selection mode */
  multiple?: boolean;
  /** Change handler */
  onChange?: (checked: boolean) => void;
  /** Card style */
  style?: React.CSSProperties;
  /** Card class name */
  className?: string;
  /** Body style */
  bodyStyle?: React.CSSProperties;
  /** Head style */
  headStyle?: React.CSSProperties;
  /** Extra actions */
  actions?: React.ReactNode[];
  /** Children content */
  children?: React.ReactNode;
}

interface CheckCardGroupProps {
  /** Selected values */
  value?: any[];
  /** Default selected values */
  defaultValue?: any[];
  /** Multiple selection */
  multiple?: boolean;
  /** Change handler */
  onChange?: (checkedValue: any[]) => void;
  /** Options configuration */
  options?: {
    title: React.ReactNode;
    value: any;
    description?: React.ReactNode;
    avatar?: React.ReactNode;
    disabled?: boolean;
  }[];
  /** Children CheckCard components */
  children?: React.ReactNode;
  /** Layout configuration */
  size?: 'default' | 'small' | 'large';
  /** Bordered style */
  bordered?: boolean;
}

Usage Examples:

import { CheckCard } from "@ant-design/pro-components";
import { Avatar, Space } from "antd";

// Basic CheckCard usage
const BasicCheckCard = () => {
  const [checked, setChecked] = useState(false);

  return (
    <CheckCard
      title="Option 1"
      description="This is the first option"
      checked={checked}
      onChange={setChecked}
    />
  );
};

// CheckCard with avatar
const AvatarCheckCard = () => (
  <CheckCard
    avatar={<Avatar src="/avatar.png" />}
    title="John Doe"
    description="Senior Developer"
    value="user1"
  />
);

// CheckCard group for multiple selection
const CheckCardGroup = () => {
  const [selectedValues, setSelectedValues] = useState([]);

  return (
    <CheckCard.Group
      value={selectedValues}
      onChange={setSelectedValues}
      multiple
    >
      <CheckCard
        title="React"
        description="A JavaScript library for building user interfaces"
        value="react"
      />
      <CheckCard
        title="Vue.js"
        description="The Progressive JavaScript Framework"
        value="vue"
      />
      <CheckCard
        title="Angular"
        description="Platform for building mobile and desktop apps"
        value="angular"
      />
    </CheckCard.Group>
  );
};

// CheckCard with options
const OptionsCheckCard = () => (
  <CheckCard.Group
    options={[
      {
        title: 'Basic Plan',
        value: 'basic',
        description: 'Perfect for individuals',
        avatar: <Avatar icon="user" />,
      },
      {
        title: 'Pro Plan',
        value: 'pro',
        description: 'Great for teams',
        avatar: <Avatar icon="team" />,
      },
      {
        title: 'Enterprise',
        value: 'enterprise',
        description: 'For large organizations',
        avatar: <Avatar icon="bank" />,
        disabled: true,
      },
    ]}
    onChange={(values) => console.log('Selected:', values)}
  />
);

StatisticCard - Statistics Display Card

Specialized card for displaying statistical data with enhanced formatting and layout options.

/**
 * Card component for statistics display
 * @param props - StatisticCard configuration props
 * @returns JSX.Element
 */
function StatisticCard(props: StatisticCardProps): JSX.Element;

/**
 * Group of StatisticCard components
 * @param props - StatisticCard.Group configuration props
 * @returns JSX.Element
 */
function StatisticCard.Group(props: StatisticCardGroupProps): JSX.Element;

/**
 * Divider for StatisticCard groups
 * @param props - Divider configuration props
 * @returns JSX.Element
 */
function StatisticCard.Divider(props: StatisticCardDividerProps): JSX.Element;

interface StatisticCardProps {
  /** Card title */
  title?: React.ReactNode;
  /** Statistic value */
  statistic?: {
    value?: string | number;
    suffix?: React.ReactNode;
    prefix?: React.ReactNode;
    precision?: number;
    formatter?: (value: any) => React.ReactNode;
    valueStyle?: React.CSSProperties;
    description?: React.ReactNode;
    trend?: 'up' | 'down';
    status?: 'increase' | 'decrease';
  };
  /** Card description */
  description?: React.ReactNode;
  /** Chart component */
  chart?: React.ReactNode;
  /** Footer content */
  footer?: React.ReactNode;
  /** Loading state */
  loading?: boolean;
  /** Card layout */
  layout?: 'default' | 'vertical' | 'horizontal';
  /** Bordered style */
  bordered?: boolean;
  /** Card size */
  size?: 'default' | 'small';
  /** Card style */
  style?: React.CSSProperties;
  /** Card class name */
  className?: string;
  /** Body style */
  bodyStyle?: React.CSSProperties;
  /** Head style */
  headStyle?: React.CSSProperties;
  /** Extra actions */
  actions?: React.ReactNode[];
}

interface StatisticCardGroupProps {
  /** Group title */
  title?: React.ReactNode;
  /** Group direction */
  direction?: 'row' | 'column';
  /** Card size */
  size?: 'default' | 'small';
  /** Loading state */
  loading?: boolean;
  /** Children StatisticCard components */
  children?: React.ReactNode;
  /** Group style */
  style?: React.CSSProperties;
  /** Group class name */
  className?: string;
}

interface StatisticCardDividerProps {
  /** Divider type */
  type?: 'vertical' | 'horizontal';
  /** Divider style */
  style?: React.CSSProperties;
}

Usage Examples:

import { StatisticCard } from "@ant-design/pro-components";
import { ArrowUpOutlined, ArrowDownOutlined } from "@ant-design/icons";

// Basic StatisticCard
const BasicStatisticCard = () => (
  <StatisticCard
    title="Total Sales"
    statistic={{
      value: 112893,
      prefix: '$',
      precision: 2,
      description: 'Total revenue this month',
      trend: 'up',
      status: 'increase',
    }}
    chart={<div>Chart component here</div>}
    footer="Compared to last month: +12.5%"
  />
);

// StatisticCard with custom formatting
const FormattedStatisticCard = () => (
  <StatisticCard
    title="Active Users"
    statistic={{
      value: 234567,
      formatter: (value) => `${(value / 1000).toFixed(1)}K`,
      suffix: <ArrowUpOutlined style={{ color: '#3f8600' }} />,
      valueStyle: { color: '#3f8600' },
    }}
    description="Monthly active users"
  />
);

// StatisticCard group
const StatisticCardGroup = () => (
  <StatisticCard.Group title="Key Metrics" direction="row">
    <StatisticCard
      title="Revenue"
      statistic={{
        value: 45670,
        prefix: '$',
        trend: 'up',
      }}
    />
    <StatisticCard.Divider />
    <StatisticCard
      title="Orders"
      statistic={{
        value: 1234,
        trend: 'up',
      }}
    />
    <StatisticCard.Divider />
    <StatisticCard
      title="Conversion Rate"
      statistic={{
        value: 12.5,
        suffix: '%',
        trend: 'down',
        status: 'decrease',
      }}
    />
  </StatisticCard.Group>
);

// Loading StatisticCard
const LoadingStatisticCard = () => (
  <StatisticCard
    title="Loading Data"
    loading
    chart={<div style={{ height: 100 }} />}
  />
);

Statistic - Basic Statistics Component

Basic statistics display component for numerical data presentation.

/**
 * Basic statistic component for numerical display
 * @param props - Statistic configuration props
 * @returns JSX.Element
 */
function Statistic(props: StatisticProps): JSX.Element;

interface StatisticProps {
  /** Statistic title */
  title?: React.ReactNode;
  /** Statistic value */
  value?: string | number;
  /** Decimal precision */
  precision?: number;
  /** Value formatter function */
  formatter?: (value: any) => React.ReactNode;
  /** Value prefix */
  prefix?: React.ReactNode;
  /** Value suffix */
  suffix?: React.ReactNode;
  /** Title style */
  titleStyle?: React.CSSProperties;
  /** Value style */
  valueStyle?: React.CSSProperties;
  /** Loading state */
  loading?: boolean;
  /** Group separator */
  groupSeparator?: string;
  /** Decimal separator */
  decimalSeparator?: string;
}

Card Layout and Styling

// Layout configurations for cards
interface CardLayoutConfig {
  /** Default layout */
  default: {
    direction: 'column';
    spacing: 'default';
  };
  
  /** Horizontal layout */
  horizontal: {
    direction: 'row';
    spacing: 'compact';
  };
  
  /** Vertical layout */
  vertical: {
    direction: 'column';
    spacing: 'large';
  };
  
  /** Grid layout */
  grid: {
    columns: number;
    gutter: [number, number];
    responsive: boolean;
  };
}

// Size configurations
interface CardSizeConfig {
  small: {
    padding: number;
    fontSize: number;
    lineHeight: number;
  };
  
  default: {
    padding: number;
    fontSize: number;
    lineHeight: number;
  };
  
  large: {
    padding: number;
    fontSize: number;
    lineHeight: number;
  };
}

Card Tabs Configuration

interface ProCardTabsProps {
  /** Tab type */
  type?: 'line' | 'card' | 'editable-card';
  /** Tab size */
  size?: 'small' | 'default' | 'large';
  /** Tab position */
  tabPosition?: 'top' | 'right' | 'bottom' | 'left';
  /** Animated */
  animated?: boolean | { inkBar: boolean; tabPane: boolean };
  /** Centered */
  centered?: boolean;
  /** Hide add button */
  hideAdd?: boolean;
  /** Tab bar gutter */
  tabBarGutter?: number;
  /** Tab bar style */
  tabBarStyle?: React.CSSProperties;
  /** Tab pane props */
  tabPaneProps?: any;
}

Common Card Types

// Extended type definitions used across card components
interface ProCardType extends Omit<CardProps, 'title' | 'extra'> {
  title?: React.ReactNode;
  extra?: React.ReactNode;
  tooltip?: string;
  colSpan?: number | string;
  layout?: 'default' | 'center';
  split?: 'vertical' | 'horizontal';
  checked?: boolean;
  onChecked?: (checked: boolean) => void;
  checkable?: boolean;
}

interface StatisticsCardProps {
  /** Alternative interface name for StatisticCard */
  title?: React.ReactNode;
  value?: number | string;
  trend?: 'up' | 'down';
  status?: 'success' | 'error' | 'warning' | 'default';
  description?: React.ReactNode;
  chart?: React.ReactNode;
}

// Checkbox card group state management
interface CheckCardGroupState {
  /** Currently selected values */
  value?: any[];
  /** Selection change handler */
  onChange?: (value: any[]) => void;
  /** Multiple selection enabled */
  multiple?: boolean;
  /** Disabled state */
  disabled?: boolean;
}

Card Animation and Effects

interface CardAnimationConfig {
  /** Hover effects */
  hover: {
    enabled: boolean;
    scale?: number;
    shadow?: string;
    duration?: number;
  };
  
  /** Loading animation */
  loading: {
    type: 'skeleton' | 'spinner' | 'pulse';
    duration?: number;
  };
  
  /** Collapse animation */
  collapse: {
    duration: number;
    easing: string;
  };
  
  /** Check animation for CheckCard */
  check: {
    duration: number;
    type: 'fade' | 'scale' | 'slide';
  };
}