TileView

View Source

Auto place children into a grid and let the browser handle columns responsively, showing fewer columns on smaller viewports, and more columns as the viewport increases.

Cell 0

Cell 1

Cell 2

Cell 3

Cell 4

Cell 5

Cell 6

Cell 7

Cell 8

render(
  <TileView minCellWidth={30} spacing={2}>
    {[0, 1, 2, 3, 4, 5, 6, 7, 8].map((index) => (
      <StackView
        key={index}
        padding={1}
        radius={3}
        backgroundColor="blue-5"
        color="white"
      >
        Cell {index}
      </StackView>
    ))}
  </TileView>
)

render(
  <TileView minCellWidth={30} spacing={2}>
    {[0, 1, 2, 3, 4, 5, 6, 7, 8].map((index) => (
      <StackView
        key={index}
        padding={1}
        radius={3}
        backgroundColor="blue-5"
        color="white"
      >
        Cell {index}
      </StackView>
    ))}
  </TileView>
)

Sidebar

Cell 0

Cell 1

Cell 2

Cell 3

Cell 4

Cell 5

Cell 6

Cell 7

Cell 8

Cell 9

Cell 10

Cell 11

Cell 12

render(
  <ColumnView sizes={[30, 'auto']} spacing={2}>
    <ColumnView.Column>
      <StackView
        height="100%"
        padding={1}
        radius={3}
        backgroundColor="backgroundSecondary"
      >
        Sidebar
      </StackView>
    </ColumnView.Column>
    <ColumnView.Column>
      <TileView minCellWidth={10} spacing={2}>
        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((index) => (
          <StackView
            key={index}
            padding={1}
            radius={3}
            backgroundColor="blue-5"
            color="white"
          >
            Cell {index}
          </StackView>
        ))}
      </TileView>
    </ColumnView.Column>
  </ColumnView>
)

render(
  <ColumnView sizes={[30, 'auto']} spacing={2}>
    <ColumnView.Column>
      <StackView
        height="100%"
        padding={1}
        radius={3}
        backgroundColor="backgroundSecondary"
      >
        Sidebar
      </StackView>
    </ColumnView.Column>
    <ColumnView.Column>
      <TileView minCellWidth={10} spacing={2}>
        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((index) => (
          <StackView
            key={index}
            padding={1}
            radius={3}
            backgroundColor="blue-5"
            color="white"
          >
            Cell {index}
          </StackView>
        ))}
      </TileView>
    </ColumnView.Column>
  </ColumnView>
)

Props

Accepts all valid HTML attributes.

asany

Render custom component or HTML element tag. (Defaults to a <div> element).

childrenany

innerRefany

Gain access to the internal ref

mediaQueriesobject

Describes props at different breakpoints. Read about mediaQueries.

minCellWidthnumber

The minimum width a cell must be.

spacingnumber | string

The amount of space between children.

variantsobject

Describes styles at various points in time. Read about variants.

Props

PreviousStackView NextWrapView