or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

configuration.md data-display.md data-entry.md feedback.md index.md layout.md other-components.md

tile.json

Other Components

Additional specialized components for specific use cases including floating actions, user guidance, data transfer, and content protection. These components provide unique functionality for enhanced user experiences.

Capabilities

FloatButton Component

Floating action button that stays in a fixed position, typically used for primary actions.

interface FloatButtonProps {
  badge?: BadgeProps;
  className?: string;
  description?: React.ReactNode;
  href?: string;
  icon?: React.ReactNode;
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
  shape?: "circle" | "square";
  size?: "small" | "default" | "large";
  target?: React.HTMLAttributeAnchorTarget;
  tooltip?: React.ReactNode;
  type?: "default" | "primary";
}

interface FloatButtonGroupProps {
  children: React.ReactNode;
  className?: string;
  closeIcon?: React.ReactNode;
  description?: React.ReactNode;
  icon?: React.ReactNode;
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
  open?: boolean;
  placement?: "top" | "left" | "right" | "bottom";
  shape?: "circle" | "square";
  size?: "small" | "default" | "large";
  tooltip?: React.ReactNode;
  trigger?: "click" | "hover";
  type?: "default" | "primary";
  onOpenChange?: (open: boolean) => void;
}

interface FloatButtonRef {
  nativeElement: HTMLElement;
}

declare const FloatButton: React.ForwardRefExoticComponent<FloatButtonProps & React.RefAttributes<FloatButtonRef>> & {
  Group: React.FC<FloatButtonGroupProps>;
  BackTop: React.FC<BackTopProps>;
};

Usage Examples:

import { FloatButton } from "antd";
import { CustomerServiceOutlined, CommentOutlined, QuestionCircleOutlined } from "@ant-design/icons";

// Basic float button
<FloatButton 
  icon={<CustomerServiceOutlined />} 
  type="primary" 
  style={{ right: 24 }} 
  onClick={() => console.log("FloatButton clicked")}
/>

// Float button group
<FloatButton.Group
  trigger="click"
  type="primary"
  style={{ right: 24 }}
  icon={<CustomerServiceOutlined />}
>
  <FloatButton />
  <FloatButton icon={<CommentOutlined />} />
  <FloatButton icon={<QuestionCircleOutlined />} />
</FloatButton.Group>

// Back to top button
<FloatButton.BackTop />

// Controlled float button group
<FloatButton.Group
  open={open}
  trigger="click"
  style={{ right: 24 }}
  icon={<CustomerServiceOutlined />}
  onOpenChange={(open) => setOpen(open)}
>
  <FloatButton icon={<QuestionCircleOutlined />} />
  <FloatButton />
  <FloatButton icon={<CommentOutlined />} />
</FloatButton.Group>

Tour Component

Step-by-step user guide component for introducing features and guiding users through interfaces.

interface TourProps {
  arrow?: boolean | { pointAtCenter: boolean };
  className?: string;
  current?: number;
  gap?: Gap;
  indicatorsRender?: (current: number, total: number) => React.ReactNode;
  mask?: boolean | { style?: React.CSSProperties; color?: string };
  onChange?: (current: number) => void;
  onClose?: (current: number) => void;
  onFinish?: () => void;
  open?: boolean;
  placement?: "center" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight";
  rootClassName?: string;
  scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
  steps?: TourStepProps[];
  type?: "default" | "primary";
  zIndex?: number;
}

interface TourStepProps {
  arrow?: boolean | { pointAtCenter: boolean };
  className?: string;
  closeIcon?: React.ReactNode;
  cover?: React.ReactNode;
  description?: React.ReactNode;
  mask?: boolean | { style?: React.CSSProperties; color?: string };
  nextButtonProps?: { children?: React.ReactNode } & ButtonProps;
  placement?: "center" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight";
  prevButtonProps?: { children?: React.ReactNode } & ButtonProps;
  scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
  target?: TourStepTarget | (() => TourStepTarget);
  title?: React.ReactNode;
  type?: "default" | "primary";
}

declare const Tour: React.FC<TourProps>;

Usage Examples:

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

const App: React.FC = () => {
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  const ref3 = useRef(null);

  const [open, setOpen] = useState<boolean>(false);

  const steps: TourProps['steps'] = [
    {
      title: 'Upload File',
      description: 'Put your files here.',
      cover: (
        <img
          alt="tour.png"
          src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
        />
      ),
      target: () => ref1.current,
    },
    {
      title: 'Save',
      description: 'Save your changes.',
      target: () => ref2.current,
    },
    {
      title: 'Other Actions',
      description: 'Click to see other actions.',
      target: () => ref3.current,
    },
  ];

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        Begin Tour
      </Button>

      <Divider />

      <Space>
        <Button ref={ref1}> Upload</Button>
        <Button ref={ref2} type="primary">
          Save
        </Button>
        <Button ref={ref3} icon={<EllipsisOutlined />} />
      </Space>

      <Tour open={open} onClose={() => setOpen(false)} steps={steps} />
    </>
  );
};

// Primary tour with custom indicators
<Tour
  type="primary"
  open={open}
  onClose={() => setOpen(false)}
  steps={steps}
  indicatorsRender={(current, total) => (
    <span>
      {current + 1} / {total}
    </span>
  )}
/>

Transfer Component

Dual-list component for transferring items between two lists with search and selection capabilities.

interface TransferProps {
  className?: string;
  dataSource?: RecordType[];
  disabled?: boolean;
  filterOption?: (inputValue: string, option: RecordType) => boolean;
  footer?: (props: TransferListProps, info?: { direction: TransferDirection }) => React.ReactNode;
  listStyle?: ((listType: TransferListType) => React.CSSProperties) | React.CSSProperties;
  locale?: Partial<TransferLocale>;
  oneWay?: boolean;
  operations?: string[];
  operationStyle?: React.CSSProperties;
  pagination?: boolean | PaginationProps;
  render?: (item: RecordType) => RenderResult;
  selectAllLabels?: (React.ReactNode | ((info: { selectedCount: number; totalCount: number }) => React.ReactNode))[];
  selectedKeys?: string[];
  showSearch?: boolean;
  showSelectAll?: boolean;
  status?: "error" | "warning";
  targetKeys?: string[];
  titles?: React.ReactNode[];
  onChange?: (targetKeys: string[], direction: TransferDirection, moveKeys: string[]) => void;
  onScroll?: (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => void;
  onSearch?: (direction: TransferDirection, value: string) => void;
  onSelectChange?: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void;
}

interface RecordType {
  key: string;
  title?: string;
  description?: string;
  disabled?: boolean;
  [name: string]: any;
}

declare const Transfer: React.FC<TransferProps>;

Usage Examples:

import { Transfer } from "antd";

const mockData = Array.from({ length: 20 }).map((_, i) => ({
  key: i.toString(),
  title: `content${i + 1}`,
  description: `description of content${i + 1}`,
  disabled: i % 3 < 1,
}));

const App = () => {
  const [targetKeys, setTargetKeys] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState([]);

  const onChange = (nextTargetKeys, direction, moveKeys) => {
    console.log('targetKeys:', nextTargetKeys);
    console.log('direction:', direction);
    console.log('moveKeys:', moveKeys);
    setTargetKeys(nextTargetKeys);
  };

  const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    console.log('sourceSelectedKeys:', sourceSelectedKeys);
    console.log('targetSelectedKeys:', targetSelectedKeys);
    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
  };

  return (
    <Transfer
      dataSource={mockData}
      titles={['Source', 'Target']}
      targetKeys={targetKeys}
      selectedKeys={selectedKeys}
      onChange={onChange}
      onSelectChange={onSelectChange}
      render={(item) => item.title}
    />
  );
};

// Transfer with search
<Transfer
  dataSource={mockData}
  showSearch
  filterOption={(inputValue, option) =>
    option.description.indexOf(inputValue) > -1
  }
  targetKeys={targetKeys}
  onChange={onChange}
  onSearch={(dir, value) => {
    console.log('search:', dir, value);
  }}
  render={(item) => item.title}
/>

// One way transfer
<Transfer
  dataSource={mockData}
  targetKeys={targetKeys}
  onChange={onChange}
  render={(item) => item.title}
  oneWay
  style={{ marginBottom: 16 }}
/>

Watermark Component

Watermark overlay component for adding watermarks to prevent unauthorized screenshots and content theft.

interface WatermarkProps {
  className?: string;
  content?: string | string[];
  font?: {
    color?: string;
    fontSize?: number | string;
    fontWeight?: "normal" | "light" | "weight" | number;
    fontFamily?: string;
    fontStyle?: "none" | "normal" | "italic" | "oblique";
  };
  gap?: [number, number];
  height?: number;
  image?: string;
  inherit?: boolean;
  offset?: [number, number];
  rotate?: number;
  style?: React.CSSProperties;
  width?: number;
  zIndex?: number;
}

declare const Watermark: React.FC<WatermarkProps>;

Usage Examples:

import { Watermark, Typography } from "antd";

// Basic text watermark
<Watermark content="Ant Design">
  <div style={{ height: 500 }}>
    <Typography>
      <Paragraph>
        The light-speed iteration of the digital world makes products more complex. However, human
        consciousness and attention resources are limited. Facing this design contradiction, the
        pursuit of natural interaction will be the consistent direction of Ant Design.
      </Paragraph>
      <Paragraph>
        Natural user interface is transparent to the user, making the user unaware of its existence.
        With natural interactions, users can achieve their goals through the interface without any
        stumbling blocks.
      </Paragraph>
    </Typography>
  </div>
</Watermark>

// Multi-line watermark
<Watermark content={['Ant Design', 'Happy Working']}>
  <div style={{ height: 500 }}>
    {/* Content */}
  </div>
</Watermark>

// Image watermark
<Watermark
  height={30}
  width={130}
  image="https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr"
>
  <div style={{ height: 500 }}>
    {/* Content */}
  </div>
</Watermark>

// Custom font watermark
<Watermark
  content="Ant Design"
  font={{
    fontSize: 16,
    color: 'rgba(0, 0, 0, 0.15)',
    fontFamily: 'serif',
    fontWeight: 'bold',
  }}
>
  <div style={{ height: 500 }}>
    {/* Content */}
  </div>
</Watermark>

Segmented Component

Segmented control component for displaying multiple options and allowing users to select one.

interface SegmentedProps<ValueType = any> {
  block?: boolean;
  className?: string;
  defaultValue?: ValueType;
  disabled?: boolean;
  onChange?: (value: ValueType) => void;
  options: (ValueType | SegmentedLabeledOption<ValueType>)[];
  size?: "large" | "middle" | "small";
  style?: React.CSSProperties;
  value?: ValueType;
}

interface SegmentedLabeledOption<ValueType = any> {
  className?: string;
  disabled?: boolean;
  icon?: React.ReactNode;
  label: React.ReactNode;
  value: ValueType;
}

declare const Segmented: <ValueType = any>(props: SegmentedProps<ValueType>) => JSX.Element;

Usage Examples:

import { Segmented } from "antd";
import { AppstoreOutlined, BarsOutlined } from "@ant-design/icons";

// Basic segmented
<Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />

// Segmented with default value
<Segmented
  options={['List', 'Kanban', 'Calendar']}
  defaultValue="List"
  onChange={(value) => {
    console.log(value); // string
  }}
/>

// Block segmented
<Segmented options={['Daily', 'Weekly', 'Monthly']} block />

// Segmented with icons
<Segmented
  options={[
    {
      label: 'List',
      value: 'List',
      icon: <BarsOutlined />,
    },
    {
      label: 'Kanban', 
      value: 'Kanban',
      icon: <AppstoreOutlined />,
    },
  ]}
/>

// Disabled segmented
<Segmented
  options={['Map', 'Transit', 'Satellite']}
  disabled
/>

// Mixed options
<Segmented
  options={[
    'Daily',
    {
      label: 'Weekly',
      value: 'Weekly',
      disabled: true,
    },
    'Monthly',
    {
      label: 'Quarterly',
      value: 'Quarterly',
      disabled: true,
    },
    'Yearly',
  ]}
/>

// Custom render function
<Segmented
  options={[
    {
      label: (
        <div style={{ padding: 4 }}>
          <Avatar src="https://joeschmoe.io/api/v1/random" />
          <div>User 1</div>
        </div>
      ),
      value: 'user1',
    },
    {
      label: (
        <div style={{ padding: 4 }}>
          <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
          <div>User 2</div>
        </div>
      ),
      value: 'user2',
    },
  ]}
/>

QRCode Component

QR code generation and display component with customization options.

interface QRCodeProps {
  value: string;
  className?: string;
  color?: string;
  bgColor?: string;
  size?: number;
  icon?: string;
  iconSize?: number;
  bordered?: boolean;
  errorLevel?: "L" | "M" | "Q" | "H";
  status?: "active" | "expired" | "loading" | "scanned";
  onRefresh?: () => void;
}

interface QRPropsCanvas extends QRCodeProps {
  type?: "canvas";
}

interface QRPropsSvg extends QRCodeProps {
  type?: "svg";
}

declare const QRCode: React.FC<QRPropsCanvas | QRPropsSvg>;

Usage Examples:

import { QRCode, Space, theme } from "antd";

// Basic QR code
<QRCode value="https://ant.design/" />

// Custom size and colors
<QRCode
  value="https://ant.design/"
  size={200}
  color="#000000"
  bgColor="#ffffff"
/>

// QR code with icon
<QRCode
  value="https://ant.design/"
  icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
  iconSize={40}
/>

// Different status
<Space direction="vertical" align="center">
  <QRCode value="https://ant.design/" status="loading" />
  <QRCode value="https://ant.design/" status="expired" onRefresh={() => console.log('refresh')} />
  <QRCode value="https://ant.design/" status="scanned" />
</Space>

// SVG type
<QRCode type="svg" value="https://ant.design/" />

// Different error levels
<Space>
  <QRCode value="https://ant.design/" errorLevel="L" />
  <QRCode value="https://ant.design/" errorLevel="M" />
  <QRCode value="https://ant.design/" errorLevel="Q" />
  <QRCode value="https://ant.design/" errorLevel="H" />
</Space>

// Bordered QR code
<QRCode value="https://ant.design/" bordered={false} />

// Dynamic QR code
const [text, setText] = useState('https://ant.design/');

<Space direction="vertical">
  <Input
    placeholder="Enter text"
    maxLength={60}
    value={text}
    onChange={(e) => setText(e.target.value || 'https://ant.design/')}
  />
  <QRCode value={text} />
</Space>

Version

Tile

Files