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

layout.mddocs/

Layout Components

Complete admin layout solution with navigation, page containers, breadcrumbs, headers, footers, and responsive design for building professional enterprise applications.

Capabilities

ProLayout - Main Layout Component

Complete admin layout with sidebar navigation, header, breadcrumbs, and responsive design.

/**
 * Complete admin layout with navigation and responsive design
 * @param props - ProLayout configuration props
 * @returns JSX.Element
 */
function ProLayout(props: ProLayoutProps): JSX.Element;

interface ProLayoutProps {
  /** Application title */
  title?: string;
  /** Application logo */
  logo?: React.ReactNode;
  /** Layout type */
  layout?: 'side' | 'top' | 'mix';
  /** Theme configuration */
  theme?: 'light' | 'dark' | 'realDark';
  /** Primary color */
  primaryColor?: string;
  /** Content width type */
  contentWidth?: 'Fluid' | 'Fixed';
  /** Navigation theme */
  navTheme?: 'light' | 'dark' | 'realDark';
  /** Header theme */
  headerTheme?: 'light' | 'dark';
  /** Fixed header */
  fixedHeader?: boolean;
  /** Fixed sidebar */
  fixSiderbar?: boolean;
  /** Sidebar collapsed state */
  collapsed?: boolean;
  /** Collapse change handler */
  onCollapse?: (collapsed: boolean) => void;
  /** Menu data render function */
  menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[];
  /** Menu header click handler */
  onMenuHeaderClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
  /** Menu item render function */
  menuItemRender?: (menuItemProps: MenuDataItem, defaultDom: React.ReactNode) => React.ReactNode;
  /** Submenu render function */
  subMenuItemRender?: (menuItemProps: MenuDataItem, defaultDom: React.ReactNode) => React.ReactNode;
  /** Header render function */
  headerRender?: (props: HeaderProps, defaultDom: React.ReactNode) => React.ReactNode;
  /** Header title render function */
  headerTitleRender?: (logo: React.ReactNode, title: React.ReactNode, props: HeaderProps) => React.ReactNode;
  /** Header content render function */
  headerContentRender?: () => React.ReactNode;
  /** Right content render function */
  rightContentRender?: (props: HeaderProps) => React.ReactNode;
  /** Footer render function */
  footerRender?: (props: FooterProps, defaultDom: React.ReactNode) => React.ReactNode | false;
  /** Breadcrumb render function */
  breadcrumbRender?: (routers: Route[]) => React.ReactNode;
  /** Page title render function */
  pageTitleRender?: (props: PageTitleProps, defaultPageTitle?: string) => string;
  /** Watermark properties */
  waterMarkProps?: WaterMarkProps;
  /** Menu configuration */
  menu?: {
    locale?: boolean;
    defaultOpenAll?: boolean;
    loading?: boolean;
    onLoadingChange?: (loading: boolean) => void;
    params?: Record<string, any>;
    request?: (params: any) => Promise<MenuDataItem[]>;
  };
  /** App list configuration */
  appList?: AppItemProps[];
  /** Settings drawer */
  settingDrawer?: SettingDrawerProps | boolean;
  /** Disable mobile detection */
  disableMobile?: boolean;
  /** Split menus */
  splitMenus?: boolean;
  /** Suppress sider warnings */
  suppressSiderWhenMenuEmpty?: boolean;
  /** Pure mode without sidebar */
  pure?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Location for routing */
  location?: {
    pathname?: string;
    search?: string;
    hash?: string;
  };
  /** Token override */
  token?: ProTokenType;
}

interface MenuDataItem {
  /** Menu item path */
  path?: string;
  /** Menu item name */
  name?: string;
  /** Menu item icon */
  icon?: React.ReactNode;
  /** Child menu items */
  children?: MenuDataItem[];
  /** Hide in menu */
  hideInMenu?: boolean;
  /** Hide children in menu */
  hideChildrenInMenu?: boolean;
  /** Hide in breadcrumb */
  hideInBreadcrumb?: boolean;
  /** Authority/permission */
  authority?: string | string[];
  /** Menu item key */
  key?: string;
  /** Disable menu item */
  disabled?: boolean;
  /** External link */
  target?: string;
  /** Component reference */
  component?: string;
  /** Exact match for routing */
  exact?: boolean;
  /** Locale key for internationalization */
  locale?: string;
}

interface HeaderProps {
  /** Current collapsed state */
  collapsed?: boolean;
  /** Collapse handler */
  onCollapse?: (collapsed: boolean) => void;
  /** Is mobile view */
  isMobile?: boolean;
  /** Current logo */
  logo?: React.ReactNode;
  /** Header theme */
  theme?: 'light' | 'dark';
  /** Layout type */
  layout?: 'side' | 'top' | 'mix';
}

interface FooterProps {
  /** Footer links */
  links?: {
    key: string;
    title: React.ReactNode;
    href: string;
    blankTarget?: boolean;
  }[];
  /** Copyright text */
  copyright?: React.ReactNode;
}

Usage Examples:

import { ProLayout, PageContainer } from "@ant-design/pro-components";
import { useState } from "react";

// Basic ProLayout usage
const BasicLayout = ({ children }) => {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <ProLayout
      title="My Application"
      logo={<img alt="logo" src="/logo.svg" />}
      layout="mix"
      theme="light"
      fixedHeader
      fixSiderbar
      collapsed={collapsed}
      onCollapse={setCollapsed}
      menuDataRender={() => [
        {
          path: '/',
          name: 'Dashboard',
          icon: <DashboardOutlined />,
        },
        {
          path: '/users',
          name: 'User Management',
          icon: <UserOutlined />,
          children: [
            { path: '/users/list', name: 'User List' },
            { path: '/users/create', name: 'Create User' },
          ],
        },
        {
          path: '/settings',
          name: 'Settings',
          icon: <SettingOutlined />,
        },
      ]}
      headerContentRender={() => (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Input.Search placeholder="Search..." style={{ width: 200 }} />
        </div>
      )}
      rightContentRender={() => (
        <div>
          <Avatar icon={<UserOutlined />} />
        </div>
      )}
      footerRender={() => (
        <div style={{ textAlign: 'center' }}>
          © 2023 My Company. All rights reserved.
        </div>
      )}
    >
      {children}
    </ProLayout>
  );
};

// Layout with dynamic menu loading
const DynamicLayout = () => {
  return (
    <ProLayout
      title="Dynamic Menu App"
      menu={{
        request: async () => {
          // Fetch menu data from API
          const response = await fetch('/api/menu');
          return response.json();
        },
        loading: false,
      }}
      onMenuHeaderClick={(e) => {
        // Handle menu header click
        console.log('Menu header clicked', e);
      }}
    >
      <PageContainer>
        <div>Dynamic content here</div>
      </PageContainer>
    </ProLayout>
  );
};

PageContainer - Page Wrapper Component

Page wrapper with breadcrumbs, page header, and content areas.

/**
 * Page wrapper with breadcrumbs and header
 * @param props - PageContainer configuration props
 * @returns JSX.Element
 */
function PageContainer(props: PageContainerProps): JSX.Element;

interface PageContainerProps {
  /** Page title */
  title?: React.ReactNode;
  /** Page subtitle */
  subTitle?: React.ReactNode;
  /** Page description */
  content?: React.ReactNode;
  /** Extra actions */
  extra?: React.ReactNode;
  /** Tab list configuration */
  tabList?: {
    key: string;
    tab: React.ReactNode;
    disabled?: boolean;
    closable?: boolean;
  }[];
  /** Active tab key */
  tabActiveKey?: string;
  /** Tab change handler */
  onTabChange?: (activeKey: string) => void;
  /** Tab bar extra content */
  tabBarExtraContent?: React.ReactNode;
  /** Tab props */
  tabProps?: any;
  /** Breadcrumb configuration */
  breadcrumb?: BreadcrumbProps | false;
  /** Breadcrumb render function */
  breadcrumbRender?: (props: any, originBreadcrumb: React.ReactNode) => React.ReactNode;
  /** Loading state */
  loading?: boolean;
  /** Page header properties */
  header?: PageHeaderProps;
  /** Affix configuration for header */
  affixProps?: AffixProps;
  /** Ghost mode styling */
  ghost?: boolean;
  /** Footer content */
  footer?: React.ReactNode[];
  /** Water mark properties */
  waterMarkProps?: WaterMarkProps;
  /** Page container class name */
  className?: string;
  /** Page container style */
  style?: React.CSSProperties;
}

interface BreadcrumbProps {
  /** Breadcrumb routes */
  routes?: {
    path?: string;
    breadcrumbName: string;
    children?: any[];
  }[];
  /** Custom item render */
  itemRender?: (route: any, params: any, routes: any[], paths: string[]) => React.ReactNode;
  /** Separator */
  separator?: React.ReactNode;
}

Usage Examples:

import { PageContainer } from "@ant-design/pro-components";
import { Button, Descriptions, Tag } from "antd";

// Basic PageContainer usage
const UserDetailPage = () => {
  return (
    <PageContainer
      title="User Details"
      subTitle="View and manage user information"
      content="Detailed view of user account information and settings."
      extra={[
        <Button key="edit" type="primary">Edit User</Button>,
        <Button key="delete" danger>Delete User</Button>,
      ]}
      breadcrumb={{
        routes: [
          { path: '/', breadcrumbName: 'Home' },
          { path: '/users', breadcrumbName: 'Users' },
          { breadcrumbName: 'User Details' },
        ],
      }}
      tabList={[
        { key: 'basic', tab: 'Basic Info' },
        { key: 'permissions', tab: 'Permissions' },
        { key: 'activity', tab: 'Activity Log' },
      ]}
      onTabChange={(key) => console.log('Tab changed:', key)}
    >
      <div style={{ padding: 24 }}>
        <Descriptions title="User Information" bordered>
          <Descriptions.Item label="Name">John Doe</Descriptions.Item>
          <Descriptions.Item label="Email">john@example.com</Descriptions.Item>
          <Descriptions.Item label="Status">
            <Tag color="green">Active</Tag>
          </Descriptions.Item>
        </Descriptions>
      </div>
    </PageContainer>
  );
};

// PageContainer with loading state
const LoadingPage = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setLoading(false), 2000);
  }, []);

  return (
    <PageContainer
      title="Loading Example"
      loading={loading}
      ghost
    >
      <div>Content will appear after loading</div>
    </PageContainer>
  );
};

Navigation Components

Enhanced breadcrumb and page header components.

/**
 * Enhanced breadcrumb navigation
 * @param props - ProBreadcrumb configuration props
 * @returns JSX.Element
 */
function ProBreadcrumb(props: ProBreadcrumbProps): JSX.Element;

/**
 * Enhanced page header component
 * @param props - ProPageHeader configuration props
 * @returns JSX.Element
 */
function ProPageHeader(props: ProPageHeaderProps): JSX.Element;

interface ProBreadcrumbProps extends BreadcrumbProps {
  /** Route context */
  routes?: Route[];
  /** Params for breadcrumb */
  params?: Record<string, any>;
  /** Breadcrumb list */
  breadcrumbList?: BreadcrumbListItem[];
}

interface ProPageHeaderProps extends PageHeaderProps {
  /** Page title */
  title?: React.ReactNode;
  /** Page subtitle */
  subTitle?: React.ReactNode;
  /** Breadcrumb configuration */
  breadcrumb?: ProBreadcrumbProps;
  /** Tab list */
  tabList?: TabProps[];
  /** Content area */
  content?: React.ReactNode;
  /** Extra actions */
  extra?: React.ReactNode;
  /** Footer content */
  footer?: React.ReactNode;
  /** Tags */
  tags?: React.ReactNode | React.ReactNode[];
  /** Avatar */
  avatar?: AvatarProps;
  /** Ghost mode */
  ghost?: boolean;
}

interface BreadcrumbListItem {
  /** Breadcrumb title */
  title: React.ReactNode;
  /** Breadcrumb href */
  href?: string;
  /** Click handler */
  onClick?: () => void;
}

interface Route {
  /** Route path */
  path?: string;
  /** Route name */
  breadcrumbName?: string;
  /** Child routes */
  children?: Route[];
}

Header Components

Default header implementations and top navigation.

/**
 * Default header implementation
 * @param props - DefaultHeader configuration props
 * @returns JSX.Element
 */
function DefaultHeader(props: DefaultHeaderProps): JSX.Element;

/**
 * Top navigation header
 * @param props - TopNavHeader configuration props
 * @returns JSX.Element
 */
function TopNavHeader(props: TopNavHeaderProps): JSX.Element;

interface DefaultHeaderProps extends HeaderProps {
  /** Header style */
  style?: React.CSSProperties;
  /** Header class name */
  className?: string;
  /** Prefix class name */
  prefixCls?: string;
  /** Header height */
  height?: number;
}

interface TopNavHeaderProps {
  /** Theme */
  theme?: 'light' | 'dark';
  /** Logo */
  logo?: React.ReactNode;
  /** Title */
  title?: React.ReactNode;
  /** Menu data */
  menuData?: MenuDataItem[];
  /** Right content */
  rightContentRender?: () => React.ReactNode;
  /** Content width */
  contentWidth?: 'Fixed' | 'Fluid';
  /** Layout */
  layout?: 'side' | 'top' | 'mix';
}

Footer Components

Default footer implementation and footer toolbar.

/**
 * Default footer implementation
 * @param props - DefaultFooter configuration props
 * @returns JSX.Element
 */
function DefaultFooter(props: DefaultFooterProps): JSX.Element;

/**
 * Footer toolbar for page actions
 * @param props - FooterToolbar configuration props
 * @returns JSX.Element
 */
function FooterToolbar(props: FooterToolbarProps): JSX.Element;

interface DefaultFooterProps extends FooterProps {
  /** Footer style */
  style?: React.CSSProperties;
  /** Footer class name */
  className?: string;
  /** Prefix class name */
  prefixCls?: string;
}

interface FooterToolbarProps {
  /** Extra content on the left */
  extra?: React.ReactNode;
  /** Footer style */
  style?: React.CSSProperties;
  /** Footer class name */
  className?: string;
  /** Render footer */
  renderContent?: (props: FooterToolbarProps, dom: JSX.Element) => React.ReactNode;
  /** Prefix class name */
  prefixCls?: string;
  /** Children content */
  children?: React.ReactNode;
}

Settings and Configuration

Settings drawer and layout configuration components.

/**
 * Layout settings drawer
 * @param props - SettingDrawer configuration props
 * @returns JSX.Element
 */
function SettingDrawer(props: SettingDrawerProps): JSX.Element;

interface SettingDrawerProps {
  /** Settings object */
  settings?: ProSettings;
  /** Settings change handler */
  onSettingChange?: (settings: ProSettings) => void;
  /** Hide colors */
  hideColors?: boolean;
  /** Hide hints */
  hideHintAlert?: boolean;
  /** Hide copy button */
  hideCopyButton?: boolean;
  /** Disable URL sync */
  disableUrlParams?: boolean;
  /** Enable dark theme toggle */
  enableDarkTheme?: boolean;
  /** Color list */
  colorList?: {
    key: string;
    color: string;
  }[];
  /** Drawer props */
  getContainer?: any;
}

interface ProSettings {
  /** Primary color */
  primaryColor?: string;
  /** Navigation theme */
  navTheme?: 'light' | 'dark' | 'realDark';
  /** Header theme */
  headerTheme?: 'light' | 'dark';
  /** Layout type */
  layout?: 'side' | 'top' | 'mix';
  /** Content width */
  contentWidth?: 'Fluid' | 'Fixed';
  /** Fixed header */
  fixedHeader?: boolean;
  /** Fixed sidebar */
  fixSiderbar?: boolean;
  /** Split menus */
  splitMenus?: boolean;
  /** Header height */
  headerHeight?: number;
  /** Menu */
  menu?: {
    locale?: boolean;
    defaultOpenAll?: boolean;
  };
  /** Title */
  title?: string;
  /** Is mobile */
  isMobile?: boolean;
  /** Collapsed */
  collapsed?: boolean;
}

Utility Components

Grid content layout, watermark, and loading components.

/**
 * Grid-based content layout
 * @param props - GridContent configuration props
 * @returns JSX.Element
 */
function GridContent(props: GridContentProps): JSX.Element;

/**
 * Watermark overlay component
 * @param props - WaterMark configuration props
 * @returns JSX.Element
 */
function WaterMark(props: WaterMarkProps): JSX.Element;

/**
 * Page loading indicator
 * @param props - PageLoading configuration props
 * @returns JSX.Element
 */
function PageLoading(props: PageLoadingProps): JSX.Element;

interface GridContentProps {
  /** Content width type */
  contentWidth?: 'Fluid' | 'Fixed';
  /** Children content */
  children?: React.ReactNode;
  /** Container class name */
  className?: string;
  /** Container style */
  style?: React.CSSProperties;
}

interface WaterMarkProps {
  /** Watermark text */
  content?: string | string[];
  /** Text color */
  fontColor?: string;
  /** Font size */
  fontSize?: number;
  /** Font family */
  fontFamily?: string;
  /** Font style */
  fontStyle?: 'normal' | 'italic' | 'oblique';
  /** Font variant */
  fontVariant?: string;
  /** Font weight */
  fontWeight?: number | string;
  /** Line height */
  lineHeight?: number;
  /** Rotate angle */
  rotate?: number;
  /** Z-index */
  zIndex?: number;
  /** Width */
  width?: number;
  /** Height */
  height?: number;
  /** Gap between watermarks */
  gapX?: number;
  /** Gap between watermarks */
  gapY?: number;
  /** Offset X */
  offsetX?: number;
  /** Offset Y */
  offsetY?: number;
  /** Image source */
  image?: string;
}

interface PageLoadingProps {
  /** Loading tip */
  tip?: string;
  /** Loading size */
  size?: 'small' | 'default' | 'large';
  /** Spinning */
  spinning?: boolean;
}

Layout Context and Utilities

Context providers and utility functions for layout management.

/**
 * Route context for layout components
 */
const RouteContext: React.Context<RouteContextType>;

/**
 * Get menu data from route configuration
 * @param routes - Route configuration
 * @param menu - Menu options
 * @returns Processed menu data
 */
function getMenuData(
  routes: Route[], 
  menu?: { locale?: boolean; defaultOpenAll?: boolean }
): { breadcrumb: Record<string, MenuDataItem>; menuData: MenuDataItem[] };

/**
 * Generate page title from route
 * @param props - Page title props
 * @param ignoreTitle - Ignore title
 * @returns Generated page title
 */
function getPageTitle(props: PageTitleProps, ignoreTitle?: boolean): string;

interface RouteContextType {
  /** Current breadcrumb */
  breadcrumb?: Record<string, MenuDataItem>;
  /** Menu data */
  menuData?: MenuDataItem[];
  /** Is mobile */
  isMobile?: boolean;
  /** Collapsed state */
  collapsed?: boolean;
  /** Collapse handler */
  onCollapse?: (collapsed: boolean) => void;
  /** Current menu selected keys */
  selectedKeys?: string[];
  /** Current menu open keys */
  openKeys?: string[];
  /** Set selected keys */
  setSelectedKeys?: (keys: string[]) => void;
  /** Set open keys */
  setOpenKeys?: (keys: string[]) => void;
}

interface PageTitleProps {
  /** Route pathname */
  pathname?: string;
  /** Breadcrumb */
  breadcrumb?: Record<string, MenuDataItem>;
  /** Menu data */
  menuData?: MenuDataItem[];
  /** Title */
  title?: string;
  /** Formatter function */
  pageTitleRender?: (props: PageTitleProps, defaultPageTitle?: string) => string;
}

// App list types for application switcher
interface AppItemProps {
  /** App title */
  title?: React.ReactNode;
  /** App icon */
  icon?: string | React.ReactNode;
  /** App description */
  desc?: React.ReactNode;
  /** App URL */
  url?: string;
  /** App target */
  target?: string;
  /** App children/submenu */
  children?: AppItemProps[];
}

interface AppListProps {
  /** App list data */
  appList?: AppItemProps[];
  /** Item click handler */
  onItemClick?: (item: AppItemProps) => void;
}

Help Components

Various help and documentation components for layout assistance.

// Help system components for documentation and assistance
type HelpComponents = React.ComponentType<any>;

Common Layout Types

// Token types for theme customization
interface ProTokenType {
  /** Layout token */
  layout?: any;
  /** Header token */
  header?: any;
  /** Sider token */
  sider?: any;
  /** PageContainer token */
  pageContainer?: any;
}

// Size type for components
type SizeType = 'small' | 'middle' | 'large';

// Common props for affix functionality
interface AffixProps {
  /** Offset top */
  offsetTop?: number;
  /** Offset bottom */
  offsetBottom?: number;
  /** Target container */
  target?: () => HTMLElement | Window | null;
  /** Change handler */
  onChange?: (affixed?: boolean) => void;
}

// Avatar props
interface AvatarProps {
  /** Avatar size */
  size?: 'large' | 'small' | 'default' | number;
  /** Avatar icon */
  icon?: React.ReactNode;
  /** Avatar shape */
  shape?: 'circle' | 'square';
  /** Avatar source */
  src?: string;
  /** Avatar alt text */
  alt?: string;
}

// Tab props for page containers
interface TabProps {
  /** Tab key */
  key: string;
  /** Tab label */
  tab: React.ReactNode;
  /** Disabled state */
  disabled?: boolean;
  /** Closable */
  closable?: boolean;
}