Skip to content

Gallery.md

Latest commit

 

History

History
134 lines (114 loc) · 3.06 KB

Gallery.md

File metadata and controls

134 lines (114 loc) · 3.06 KB
id Gallery
cssPrefix pf-v6-l-gallery
section foundations-and-styles
subsection layouts
propComponents
Gallery
GalleryItem

import './gallery.css';

Examples

Basic

import { Gallery, GalleryItem } from '@patternfly/react-core';

<Gallery>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
</Gallery>;

With gutters

import { Gallery, GalleryItem } from '@patternfly/react-core';

<Gallery hasGutter>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
</Gallery>;

Adjusting min widths

import { Gallery, GalleryItem } from '@patternfly/react-core';

<Gallery
  hasGutter
  minWidths={{
    md: '100px',
    lg: '150px',
    xl: '200px',
    '2xl': '300px'
  }}
>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
</Gallery>;

Adjusting max widths

import { Gallery, GalleryItem } from '@patternfly/react-core';

<Gallery
  hasGutter
  maxWidths={{
    md: '280px',
    lg: '320px',
    '2xl': '400px'
  }}
>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
</Gallery>;

Adjusting min and max widths

import { Gallery, GalleryItem } from '@patternfly/react-core';

<Gallery
  hasGutter
  minWidths={{
    default: '100%',
    md: '100px',
    xl: '300px'
  }}
  maxWidths={{
    md: '200px',
    xl: '1fr'
  }}
>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
  <GalleryItem>Gallery Item</GalleryItem>
</Gallery>;

Alternative components

import { Gallery, GalleryItem } from '@patternfly/react-core';

<Gallery component="ul">
  <GalleryItem component="li">Gallery item</GalleryItem>
  <GalleryItem component="li">Gallery item</GalleryItem>
  <GalleryItem component="li">Gallery item</GalleryItem>
  <GalleryItem component="li">Gallery item</GalleryItem>
  <GalleryItem component="li">Gallery item</GalleryItem>
</Gallery>;