or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mddata-display.mddata-entry.mdfeedback.mdindex.mdlayout.mdnavigation.mdother-components.md
tile.json

layout.mddocs/

Layout Components

Layout and structure components for organizing page content and implementing responsive design. These components provide the foundation for creating consistent and flexible page layouts.

Capabilities

Layout Component

Comprehensive layout structure with header, footer, sidebar, and content areas.

interface LayoutProps {
  className?: string;
  direction?: "ltr" | "rtl";
  hasSider?: boolean;
  style?: React.CSSProperties;
}

interface SiderProps {
  breakpoint?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
  className?: string;
  collapsed?: boolean;
  collapsedWidth?: number | string;
  collapsible?: boolean;
  defaultCollapsed?: boolean;
  reverseArrow?: boolean;
  style?: React.CSSProperties;
  theme?: "light" | "dark";
  trigger?: React.ReactNode;
  width?: number | string;
  zeroWidthTriggerStyle?: React.CSSProperties;
  onBreakpoint?: (broken: boolean) => void;
  onCollapse?: (collapsed: boolean, type: "clickTrigger" | "responsive") => void;
}

interface BasicLayoutProps {
  className?: string;
  style?: React.CSSProperties;
}

declare const Layout: React.FC<LayoutProps> & {
  Header: React.FC<BasicLayoutProps>;
  Footer: React.FC<BasicLayoutProps>;
  Content: React.FC<BasicLayoutProps>;
  Sider: React.FC<SiderProps>;
};

Usage Examples:

import { Layout, Menu, Breadcrumb, theme } from "antd";
import { LaptopOutlined, NotificationOutlined, UserOutlined } from "@ant-design/icons";

const { Header, Content, Sider } = Layout;
const { SubMenu } = Menu;

// Basic layout
<Layout>
  <Header className="header">
    <div className="logo" />
    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={["2"]}>
      <Menu.Item key="1">nav 1</Menu.Item>
      <Menu.Item key="2">nav 2</Menu.Item>
      <Menu.Item key="3">nav 3</Menu.Item>
    </Menu>
  </Header>
  <Content style={{ padding: "0 50px" }}>
    <Breadcrumb style={{ margin: "16px 0" }}>
      <Breadcrumb.Item>Home</Breadcrumb.Item>
      <Breadcrumb.Item>List</Breadcrumb.Item>
      <Breadcrumb.Item>App</Breadcrumb.Item>
    </Breadcrumb>
    <div className="site-layout-content">Content</div>
  </Content>
  <Layout.Footer style={{ textAlign: "center" }}>
    Ant Design ©2023 Created by Ant UED
  </Layout.Footer>
</Layout>

// Layout with collapsible sidebar
<Layout style={{ minHeight: "100vh" }}>
  <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
    <div className="logo" />
    <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
      <Menu.Item key="1" icon={<PieChartOutlined />}>
        Option 1
      </Menu.Item>
      <Menu.Item key="2" icon={<DesktopOutlined />}>
        Option 2
      </Menu.Item>
      <SubMenu key="sub1" icon={<UserOutlined />} title="User">
        <Menu.Item key="3">Tom</Menu.Item>
        <Menu.Item key="4">Bill</Menu.Item>
        <Menu.Item key="5">Alex</Menu.Item>
      </SubMenu>
    </Menu>
  </Sider>
  <Layout className="site-layout">
    <Header className="site-layout-background" style={{ padding: 0 }} />
    <Content style={{ margin: "0 16px" }}>
      <Breadcrumb style={{ margin: "16px 0" }}>
        <Breadcrumb.Item>User</Breadcrumb.Item>
        <Breadcrumb.Item>Bill</Breadcrumb.Item>
      </Breadcrumb>
      <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
        Bill is a cat.
      </div>
    </Content>
    <Layout.Footer style={{ textAlign: "center" }}>
      Ant Design ©2023 Created by Ant UED
    </Layout.Footer>
  </Layout>
</Layout>

// Responsive layout
<Layout>
  <Sider
    breakpoint="lg"
    collapsedWidth="0"
    onBreakpoint={(broken) => {
      console.log(broken);
    }}
    onCollapse={(collapsed, type) => {
      console.log(collapsed, type);
    }}
  >
    <div className="logo" />
    <Menu theme="dark" mode="inline" defaultSelectedKeys={["4"]}>
      <Menu.Item key="1" icon={<UserOutlined />}>
        nav 1
      </Menu.Item>
      <Menu.Item key="2" icon={<VideoCameraOutlined />}>
        nav 2
      </Menu.Item>
      <Menu.Item key="3" icon={<UploadOutlined />}>
        nav 3
      </Menu.Item>
      <Menu.Item key="4" icon={<UserOutlined />}>
        nav 4
      </Menu.Item>
    </Menu>
  </Sider>
  <Layout>
    <Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
    <Content style={{ margin: "24px 16px 0" }}>
      <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
        content
      </div>
    </Content>
    <Layout.Footer style={{ textAlign: "center" }}>
      Ant Design ©2023 Created by Ant UED
    </Layout.Footer>
  </Layout>
</Layout>

Grid System

Flexible grid system with rows and columns for responsive layouts.

interface RowProps {
  align?: "top" | "middle" | "bottom" | "stretch" | { sm?: "top" | "middle" | "bottom" | "stretch"; md?: "top" | "middle" | "bottom" | "stretch"; lg?: "top" | "middle" | "bottom" | "stretch"; xl?: "top" | "middle" | "bottom" | "stretch"; xxl?: "top" | "middle" | "bottom" | "stretch" };
  className?: string;
  gutter?: number | object | array;
  justify?: "start" | "end" | "center" | "space-around" | "space-between" | "space-evenly" | { sm?: "start" | "end" | "center" | "space-around" | "space-between" | "space-evenly"; md?: "start" | "end" | "center" | "space-around" | "space-between" | "space-evenly"; lg?: "start" | "end" | "center" | "space-around" | "space-between" | "space-evenly"; xl?: "start" | "end" | "center" | "space-around" | "space-between" | "space-evenly"; xxl?: "start" | "end" | "center" | "space-around" | "space-between" | "space-evenly" };
  style?: React.CSSProperties;
  wrap?: boolean;
}

interface ColProps {
  className?: string;
  flex?: string | number;
  offset?: number;
  order?: number;
  pull?: number;
  push?: number;
  span?: number;
  style?: React.CSSProperties;
  xs?: number | ColSize;
  sm?: number | ColSize;
  md?: number | ColSize;
  lg?: number | ColSize;
  xl?: number | ColSize;
  xxl?: number | ColSize;
}

interface ColSize {
  flex?: string | number;
  span?: number;
  order?: number;
  offset?: number;
  push?: number;
  pull?: number;
}

interface GridProps {
  useBreakpoint: () => BreakpointMap;
}

declare const Row: React.FC<RowProps>;
declare const Col: React.FC<ColProps>;
declare const Grid: GridProps;

Usage Examples:

import { Row, Col, Divider } from "antd";

// Basic grid
<Row>
  <Col span={24}>col</Col>
</Row>
<Row>
  <Col span={12}>col-12</Col>
  <Col span={12}>col-12</Col>
</Row>
<Row>
  <Col span={8}>col-8</Col>
  <Col span={8}>col-8</Col>
  <Col span={8}>col-8</Col>
</Row>
<Row>
  <Col span={6}>col-6</Col>
  <Col span={6}>col-6</Col>
  <Col span={6}>col-6</Col>
  <Col span={6}>col-6</Col>
</Row>

// Grid with gutter
<Row gutter={16}>
  <Col className="gutter-row" span={6}>
    <div style={{ background: "#0092ff", padding: "8px 0" }}>col-6</div>
  </Col>
  <Col className="gutter-row" span={6}>
    <div style={{ background: "#0092ff", padding: "8px 0" }}>col-6</div>
  </Col>
  <Col className="gutter-row" span={6}>
    <div style={{ background: "#0092ff", padding: "8px 0" }}>col-6</div>
  </Col>
  <Col className="gutter-row" span={6}>
    <div style={{ background: "#0092ff", padding: "8px 0" }}>col-6</div>
  </Col>
</Row>

// Responsive grid
<Row gutter={[16, 16]}>
  <Col xs={24} sm={12} md={8} lg={6} xl={4}>
    <div style={{ background: "#0092ff", padding: "8px 0" }}>Col</div>
  </Col>
  <Col xs={24} sm={12} md={8} lg={6} xl={4}>
    <div style={{ background: "#0092ff", padding: "8px 0" }}>Col</div>
  </Col>
  <Col xs={24} sm={12} md={8} lg={6} xl={4}>
    <div style={{ background: "#0092ff", padding: "8px 0" }}>Col</div>
  </Col>
  <Col xs={24} sm={12} md={8} lg={6} xl={4}>
    <div style={{ background: "#0092ff", padding: "8px 0" }}>Col</div>
  </Col>
</Row>

// Grid with offset
<Row>
  <Col span={8}>col-8</Col>
  <Col span={8} offset={8}>
    col-8 col-offset-8
  </Col>
</Row>
<Row>
  <Col span={6} offset={6}>
    col-6 col-offset-6
  </Col>
  <Col span={6} offset={6}>
    col-6 col-offset-6
  </Col>
</Row>

// Flex layout
<Row justify="center">
  <Col span={4}>col-4</Col>
  <Col span={4}>col-4</Col>
  <Col span={4}>col-4</Col>
  <Col span={4}>col-4</Col>
</Row>

<Row justify="space-between">
  <Col span={4}>col-4</Col>
  <Col span={4}>col-4</Col>
  <Col span={4}>col-4</Col>
  <Col span={4}>col-4</Col>
</Row>

// Use breakpoint hook
import { Grid } from "antd";

const { useBreakpoint } = Grid;

const MyComponent = () => {
  const screens = useBreakpoint();
  
  return (
    <div>
      Current breakpoints: {JSON.stringify(screens)}
      {screens.xs && <div>XS screen</div>}
      {screens.md && <div>MD screen or larger</div>}
      {screens.lg && <div>LG screen or larger</div>}
    </div>
  );
};

Space Component

Spacing wrapper component for setting consistent spacing between elements.

interface SpaceProps {
  align?: "start" | "end" | "center" | "baseline";
  className?: string;
  direction?: "vertical" | "horizontal";
  size?: SizeType | number | [SizeType | number, SizeType | number];
  split?: React.ReactNode;
  style?: React.CSSProperties;
  wrap?: boolean;
}

interface SpaceCompactProps {
  block?: boolean;
  className?: string;
  direction?: "vertical" | "horizontal";
  size?: SizeType;
  style?: React.CSSProperties;
}

declare const Space: React.FC<SpaceProps> & {
  Compact: React.FC<SpaceCompactProps>;
};

Usage Examples:

import { Space, Button, Card, Divider } from "antd";

// Basic space
<Space>
  <Button type="primary">Primary</Button>
  <Button>Default</Button>
  <Button type="dashed">Dashed</Button>
  <Button type="link">Link</Button>
</Space>

// Vertical space
<Space direction="vertical">
  <Card title="Card 1" size="small">
    <p>Card content</p>
  </Card>
  <Card title="Card 2" size="small">
    <p>Card content</p>
  </Card>
</Space>

// Custom size
<Space size="large">
  <Button type="primary">Primary</Button>
  <Button>Default</Button>
  <Button type="dashed">Dashed</Button>
</Space>

// Size array [horizontal, vertical]
<Space size={[8, 16]} wrap>
  {Array.from({ length: 20 }, (_, i) => (
    <Button key={i}>Button</Button>
  ))}
</Space>

// Space with split
<Space split={<Divider type="vertical" />}>
  <Typography.Link>Link</Typography.Link>
  <Typography.Link>Link</Typography.Link>
  <Typography.Link>Link</Typography.Link>
</Space>

// Compact space
<Space.Compact>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
</Space.Compact>

<Space.Compact>
  <Input placeholder="Input content" />
  <Button type="primary">Submit</Button>
</Space.Compact>

// Block compact space
<Space.Compact block>
  <Input placeholder="Input content" />
  <Button type="primary">Submit</Button>
</Space.Compact>

Divider Component

Visual divider for separating content sections.

interface DividerProps {
  className?: string;
  dashed?: boolean;
  orientation?: "left" | "right" | "center";
  orientationMargin?: string | number;
  plain?: boolean;
  style?: React.CSSProperties;
  type?: "horizontal" | "vertical";
}

declare const Divider: React.FC<DividerProps>;

Usage Examples:

import { Divider, Typography } from "antd";

const { Title, Paragraph, Text } = Typography;

// Basic divider
<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <Divider />
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
</div>

// Divider with title
<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <Divider>Text</Divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <Divider orientation="left">Left Text</Divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <Divider orientation="right">Right Text</Divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
</div>

// Dashed divider
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <Divider dashed />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

// Vertical divider
<div>
  Text
  <Divider type="vertical" />
  <a href="#">Link</a>
  <Divider type="vertical" />
  <a href="#">Link</a>
</div>

// Plain divider
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <Divider plain>Text</Divider>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <Divider orientation="left" plain>
    Left Text
  </Divider>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <Divider orientation="right" plain>
    Right Text
  </Divider>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Flex Component

Modern flex layout component for flexible and responsive layouts.

interface FlexProps {
  align?: React.CSSProperties["alignItems"];
  className?: string;
  flex?: React.CSSProperties["flex"];
  gap?: React.CSSProperties["gap"];
  justify?: React.CSSProperties["justifyContent"];
  style?: React.CSSProperties;
  vertical?: boolean;
  wrap?: React.CSSProperties["flexWrap"];
}

declare const Flex: React.FC<FlexProps>;

Usage Examples:

import { Flex, Button, Segmented } from "antd";

// Basic flex
<Flex gap="middle" vertical>
  <Flex wrap="wrap" gap="small">
    <Button type="primary">Primary</Button>
    <Button>Default</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="text">Text</Button>
    <Button type="link">Link</Button>
  </Flex>
</Flex>

// Flex with justify and align
<Flex gap="middle" align="start" vertical>
  <Flex justify="space-between" align="center" style={{ width: "100%" }}>
    <Button type="primary">Primary</Button>
    <Button>Default</Button>
    <Button type="dashed">Dashed</Button>
  </Flex>
  <Flex justify="center" align="center" style={{ width: "100%" }}>
    <Button type="primary">Primary</Button>
    <Button>Default</Button>
    <Button type="dashed">Dashed</Button>
  </Flex>
  <Flex justify="flex-end" align="center" style={{ width: "100%" }}>
    <Button type="primary">Primary</Button>
    <Button>Default</Button>
    <Button type="dashed">Dashed</Button>
  </Flex>
</Flex>

// Flex with wrap
<Flex wrap="wrap" gap="small">
  {Array.from({ length: 24 }, (_, i) => (
    <Button key={i} type="primary">
      Button
    </Button>
  ))}
</Flex>

// Controlled flex properties
const [justify, setJustify] = useState<any>("flex-start");
const [alignItems, setAlignItems] = useState<any>("flex-start");

<Flex gap="middle" vertical>
  <p>Select justify :</p>
  <Segmented
    options={["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"]}
    onChange={setJustify}
  />
  <p>Select align :</p>
  <Segmented options={["flex-start", "center", "flex-end"]} onChange={setAlignItems} />
  <Flex style={{ width: "100%", height: 120, borderRadius: 6, border: "1px solid #40a9ff" }} justify={justify} align={alignItems}>
    <Button type="primary">Primary</Button>  
    <Button type="primary">Primary</Button>
    <Button type="primary">Primary</Button>
    <Button type="primary">Primary</Button>
  </Flex>
</Flex>

Splitter Component

Resizable layout splitter for creating adjustable panels.

interface SplitterProps {
  className?: string;
  direction?: "horizontal" | "vertical";
  resizerStyle?: React.CSSProperties | ((active: boolean, hover: boolean) => React.CSSProperties);
  size?: "small" | "middle" | "large";
  split?: React.ReactNode;
  style?: React.CSSProperties;
  onResize?: (sizes: number[]) => void;
  onResizeEnd?: (sizes: number[]) => void;
  onResizeStart?: (sizes: number[]) => void;
}

interface SplitterPanelProps {
  className?: string;
  collapsedSize?: number | string;
  collapsible?: boolean | { start?: boolean; end?: boolean };
  defaultSize?: number | string;
  max?: number | string;
  min?: number | string;
  resizable?: boolean;
  size?: number | string;
  split?: React.ReactNode;
  style?: React.CSSProperties;
}

declare const Splitter: React.FC<SplitterProps> & {
  Panel: React.FC<SplitterPanelProps>;
};

Usage Examples:

import { Splitter, Typography } from "antd";

// Basic splitter
<Splitter style={{ height: 200, boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)" }}>
  <Splitter.Panel defaultSize="40%">
    <div style={{ padding: 24, background: "rgba(0, 0, 255, 0.02)" }}>
      <Typography.Title level={5}>First Panel</Typography.Title>
      <Typography.Text>Left Panel Content</Typography.Text>
    </div>
  </Splitter.Panel>
  <Splitter.Panel>
    <div style={{ padding: 24, background: "rgba(255, 0, 0, 0.02)" }}>
      <Typography.Title level={5}>Second Panel</Typography.Title>
      <Typography.Text>Right Panel Content</Typography.Text>
    </div>
  </Splitter.Panel>
</Splitter>

// Vertical splitter
<Splitter direction="vertical" style={{ height: 300, boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)" }}>
  <Splitter.Panel defaultSize="30%">
    <div style={{ padding: 24, background: "rgba(0, 0, 255, 0.02)" }}>
      <Typography.Title level={5}>Top Panel</Typography.Title>
    </div>
  </Splitter.Panel>
  <Splitter.Panel>
    <div style={{ padding: 24, background: "rgba(255, 0, 0, 0.02)" }}>
      <Typography.Title level={5}>Bottom Panel</Typography.Title>
    </div>
  </Splitter.Panel>
</Splitter>

// Multiple panels
<Splitter style={{ height: 200, boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)" }}>
  <Splitter.Panel defaultSize="25%">
    <div style={{ padding: 24, background: "rgba(0, 0, 255, 0.02)" }}>Panel 1</div>
  </Splitter.Panel>
  <Splitter.Panel defaultSize="50%">
    <div style={{ padding: 24, background: "rgba(0, 255, 0, 0.02)" }}>Panel 2</div>
  </Splitter.Panel>
  <Splitter.Panel>
    <div style={{ padding: 24, background: "rgba(255, 0, 0, 0.02)" }}>Panel 3</div>
  </Splitter.Panel>
</Splitter>

// Nested splitters
<Splitter style={{ height: 300, boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)" }}>
  <Splitter.Panel defaultSize="40%">
    <div style={{ padding: 24, background: "rgba(0, 0, 255, 0.02)" }}>Left Panel</div>
  </Splitter.Panel>
  <Splitter.Panel>
    <Splitter direction="vertical">
      <Splitter.Panel defaultSize="50%">
        <div style={{ padding: 24, background: "rgba(0, 255, 0, 0.02)" }}>Top Right</div>
      </Splitter.Panel>
      <Splitter.Panel>
        <div style={{ padding: 24, background: "rgba(255, 0, 0, 0.02)" }}>Bottom Right</div>
      </Splitter.Panel>
    </Splitter>
  </Splitter.Panel>
</Splitter>

// Collapsible panels
<Splitter style={{ height: 200, boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)" }}>
  <Splitter.Panel collapsible defaultSize="25%">
    <div style={{ padding: 24, background: "rgba(0, 0, 255, 0.02)" }}>Collapsible Panel</div>
  </Splitter.Panel>
  <Splitter.Panel>
    <div style={{ padding: 24, background: "rgba(255, 0, 0, 0.02)" }}>Main Panel</div>
  </Splitter.Panel>
</Splitter>