or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration-theming.mddisplay-components.mdfeedback-components.mdform-components.mdgesture-components.mdindex.mdlayout-components.mdnavigation-components.mdpicker-components.md
tile.json

layout-components.mddocs/

Layout Components

Layout and spacing components for organizing content, managing screen real estate, and responsive design patterns.

Capabilities

Grid

Grid layout system for organizing content in columns.

function Grid(props: GridProps): JSX.Element;

interface GridProps {
  columns: number;
  gap?: number | string | [number | string, number | string];
  children?: React.ReactNode;
} & NativeProps<'--gap' | '--gap-horizontal' | '--gap-vertical'>;

function GridItem(props: GridItemProps): JSX.Element;

interface GridItemProps {
  span?: number;
  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  children?: React.ReactNode;
} & NativeProps;

declare namespace Grid {
  const Item: typeof GridItem;
}

Space

Spacing component for arranging elements with consistent gaps.

function Space(props: SpaceProps): JSX.Element;

interface SpaceProps {
  direction?: 'horizontal' | 'vertical';
  align?: 'start' | 'end' | 'center' | 'baseline';
  justify?: 'start' | 'end' | 'center' | 'around' | 'between' | 'evenly';
  wrap?: boolean;
  block?: boolean;
  gap?: 'small' | 'middle' | 'large' | number | string;
  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  children?: React.ReactNode;
} & NativeProps<'--gap' | '--gap-horizontal' | '--gap-vertical'>;

SafeArea

Safe area component for handling device notches and rounded corners.

function SafeArea(props: SafeAreaProps): JSX.Element;

interface SafeAreaProps {
  position: 'top' | 'bottom';
  children?: React.ReactNode;
} & NativeProps;

AutoCenter

Auto-centering container for content alignment.

function AutoCenter(props: AutoCenterProps): JSX.Element;

interface AutoCenterProps {
  children?: React.ReactNode;
} & NativeProps;

Collapse

Collapsible content panels with accordion behavior.

function Collapse(props: CollapseProps): JSX.Element;

interface CollapseProps {
  activeKey?: string | string[];
  defaultActiveKey?: string | string[];
  accordion?: boolean;
  onChange?: (activeKey: string | string[]) => void;
  children?: React.ReactNode;
} & NativeProps;

function CollapsePanel(props: CollapsePanelProps): JSX.Element;

interface CollapsePanelProps {
  key: string;
  title: React.ReactNode;
  disabled?: boolean;
  forceRender?: boolean;
  destroyOnClose?: boolean;
  onClick?: (event: React.MouseEvent<Element, MouseEvent>) => void;
  children?: React.ReactNode;
} & NativeProps;

declare namespace Collapse {
  const Panel: typeof CollapsePanel;
}

Ellipsis

Text ellipsis component with expand functionality.

function Ellipsis(props: EllipsisProps): JSX.Element;

interface EllipsisProps {
  content: string;
  direction?: 'start' | 'end' | 'middle';
  rows?: number;
  expandText?: string;
  collapseText?: string;
  stopPropagationForActionButtons?: string[];
  onContentClick?: (e: React.MouseEvent) => void;
} & NativeProps<'--line-height'>;

Usage Examples

import { Grid, Space, Collapse, SafeArea, AutoCenter } from "antd-mobile";

function LayoutExample() {
  return (
    <div>
      <SafeArea position="top" />
      
      <AutoCenter>
        <h1>Centered Title</h1>
      </AutoCenter>

      <Grid columns={2} gap={16}>
        <Grid.Item>
          <Card>Item 1</Card>
        </Grid.Item>
        <Grid.Item>
          <Card>Item 2</Card>
        </Grid.Item>
        <Grid.Item span={2}>
          <Card>Full Width Item</Card>
        </Grid.Item>
      </Grid>

      <Space direction="vertical" gap="large" block>
        <Collapse accordion>
          <Collapse.Panel key="1" title="Panel 1">
            Content 1
          </Collapse.Panel>
          <Collapse.Panel key="2" title="Panel 2">
            Content 2
          </Collapse.Panel>
        </Collapse>

        <Space justify="between" block>
          <Button>Cancel</Button>
          <Button color="primary">Confirm</Button>
        </Space>
      </Space>

      <SafeArea position="bottom" />
    </div>
  );
}