Function Tiles

Parameters

• params: {
      bulkChange: (event: BulkChange) => void;
      checkedChange?: (event: { tiles: string[] }) => void;
      checkEnabled: boolean;
      children?: ReactNode;
      className?: string;
      click?: (event: { tile: string }) => void;
      contextMenu?: (
          event: { clientX: number; clientY: number; tile: string },
      ) => void;
      direction: CoreDirection;
      dragEnabled: boolean;
      dragEnd?: (event: { dnd: HTMLElement; id: string }) => void;
      dragMove?: (event: { dnd: HTMLElement; id: string }) => void;
      dragStart?: (event: { dnd: HTMLElement; id: string }) => void;
      groupContextMenu?: (
          event: {
              clientX: number;
              clientY: number;
              group: string;
              original: Event;
          },
      ) => void;
      groupDragEnd?: (event: { element: HTMLDivElement; id: string }) => void;
      groupDragMove?: (event: { element: HTMLDivElement; id: string }) => void;
      groupDragStart?: (event: { element: HTMLDivElement; id: string }) => void;
      groupHeight?: number;
      groupWidth?: number;
      id?: string;
      inlineGroups?: number;
      open?: boolean;
      plus?: TilePlus;
      ref?: Ref<HTMLDivElement | null>;
      renameGroup: (event: { id: string; label: string }) => void;
      renamingGroupsEnabled: boolean;
      reorderGroups: (event: Map<number, string>) => void;
      style?: CSSProperties;
  }

  • bulkChange: (event: BulkChange) => void

    Event triggered for a bulk change.

  • OptionalcheckedChange?: (event: { tiles: string[] }) => void

    Event triggered for a change on which tiles are currently checked.

  • checkEnabled: boolean

    Whether checking tiles is enabled.

  • Optionalchildren?: ReactNode

  • OptionalclassName?: string

  • Optionalclick?: (event: { tile: string }) => void

    Event triggered when a tile is clicked.

  • OptionalcontextMenu?: (event: { clientX: number; clientY: number; tile: string }) => void

    Event triggered when the context menu button clicks in a tile.

  • direction: CoreDirection

    The direction of the live tile layout.

  • dragEnabled: boolean

    Whether drag-n-drop is enabled.

  • OptionaldragEnd?: (event: { dnd: HTMLElement; id: string }) => void

    Event triggered for a drag end on a tile.

  • OptionaldragMove?: (event: { dnd: HTMLElement; id: string }) => void

    Event triggered for a drag move on a tile.

  • OptionaldragStart?: (event: { dnd: HTMLElement; id: string }) => void

    Event triggered for a drag start on a tile.

  • OptionalgroupContextMenu?: (
        event: {
            clientX: number;
            clientY: number;
            group: string;
            original: Event;
        },
    ) => void

    Event triggered when the context menu button clicks in a group's label.

  • OptionalgroupDragEnd?: (event: { element: HTMLDivElement; id: string }) => void

    Event triggered for a drag end on a group.

  • OptionalgroupDragMove?: (event: { element: HTMLDivElement; id: string }) => void

    Event triggered for a drag move on a group.

  • OptionalgroupDragStart?: (event: { element: HTMLDivElement; id: string }) => void

    Event triggered for a drag start on a group.

  • OptionalgroupHeight?: number

    Height in 1x1 tiles, effective only in a horizontal layout (must be >= 4).

    Default

    6
    Copy

  • OptionalgroupWidth?: number

    Group width in 1x1 tiles, effective only in a vertical layout (must be >= 4).

    Default

    6
    Copy

  • Optionalid?: string

  • OptionalinlineGroups?: number

    Number of inline groups, effective only in a vertical layout (must be >= 1).

    Default

    1
    Copy

  • Optionalopen?: boolean

    Whether to display open or close transition.

    A Tiles component displays a LIVE_TILES_OPENING_OR_CLOSING milliseconds scale/opacity transition when visibility changes; this property indicates whether the container is open or closed.

    Default

    true
    Copy

  • Optionalplus?: TilePlus

    Attaching a TilePlus provides extra control over tiles and testing methods.

    With it you can:

    • Check/uncheck tiles
    • Determine the number of inline groups available for a given width.

  • Optionalref?: Ref<HTMLDivElement | null>

  • renameGroup: (event: { id: string; label: string }) => void

    Event triggered for renaming a group.

  • renamingGroupsEnabled: boolean

    Whether renaming groups is enabled.

  • reorderGroups: (event: Map<number, string>) => void

    Event triggered for re-ordering groups.

  • Optionalstyle?: CSSProperties