14.3.5 • Published 8 months ago

@rmwc/grid-list v14.3.5

Weekly downloads
2,878
License
MIT
Repository
github
Last release
8 months ago

Grid Lists

Grid lists are an alternative to standard list views. Note that as of Material Components Web 6.0.0, this component is deprecated.

function Example() {
  const [state, setState] = React.useState({
    tileGutter1: false,
    headerCaption: false,
    twolineCaption: false,
    withIconAlignStart: false,
    tileAspect: '1x1'
  });

  return (
    <>
      <GridList
        tileGutter1={state.tileGutter1}
        headerCaption={state.headerCaption}
        twolineCaption={state.twolineCaption}
        withIconAlignStart={state.withIconAlignStart}
        tileAspect={state.tileAspect}
      >
        {Array(8)
          .fill(undefined)
          .map((val, i) => (
            <GridTile key={i}>
              <GridTilePrimary>
                <GridTilePrimaryContent
                  src="images/backgrounds/mb-bg-fb-06.png"
                  alt="test"
                />
              </GridTilePrimary>
              <GridTileSecondary>
                <GridTileIcon icon="info" />
                <GridTileTitle>Tile {i + 1}</GridTileTitle>
              </GridTileSecondary>
            </GridTile>
          ))}
      </GridList>

      {[
        'tileGutter1',
        'headerCaption',
        'twoLineCaption',
        'withIconAlignStart'
      ].map((key) => (
        <Checkbox
          key={key}
          label={key}
          onChange={(evt) =>
            setState({ ...state, [key]: evt.currentTarget.checked })
          }
        />
      ))}

      <Select
        value={state.tileAspect}
        onChange={(evt) =>
          setState({
            ...state,
            tileAspect: String(evt.currentTarget.value)
          })
        }
        label="tileAspect"
        options={['1x1', '16x9', '2x3', '3x2', '4x3', '3x4']}
      />
    </>
  );
}

GridList

Grid List Component

Props

NameTypeDescription
headerCaptionbooleanMove the caption to the top of the card.
tileAspect"1x1" \| "16x9" \| "2x3" \| "3x2" \| "4x3" \| "3x4"One of the following values: 1x1, 16x9, 2x3, 3x2, 4x3, 3x4.
tileGutter1booleanUse a 1px gutter.
twolineCaptionbooleanMake the caption two lines.
withIconAlignStartbooleanLeaves space for a start aligned icon.

GridTile

A grid tile

GridTileIcon

The icon for a Grid tile. This is an instance of Icon component.

Props

NameTypeDescription
iconIconPropTThe icon to use. This can be a string for a font icon, a url, or whatever the selected strategy needs.

GridTilePrimary

The primary content for a Grid tile

GridTileSecondary

The secondary content for a Grid tile

GridTileTitleSupportText

Supporting Text for the Grid Tile

GridTileTitle

The title for a Grid tile

14.3.5

8 months ago

14.3.4

9 months ago

14.3.3

10 months ago

14.2.7

1 year ago

14.2.8

1 year ago

14.2.9

1 year ago

14.2.5

1 year ago

14.2.6

1 year ago

14.3.0

12 months ago

14.3.1

12 months ago

14.3.2

11 months ago

14.2.2

1 year ago

14.2.0

1 year ago

14.2.1

1 year ago

14.1.5

1 year ago

14.1.4

1 year ago

14.1.3

1 year ago

14.1.2

1 year ago

14.1.1

1 year ago

14.1.0

1 year ago

14.0.12

1 year ago

14.0.11

1 year ago

14.0.10

1 year ago

14.0.9

1 year ago

14.0.8

1 year ago

14.0.7

1 year ago

14.0.6

1 year ago

14.0.5

2 years ago

14.0.4

2 years ago

14.0.1-alpha.0

2 years ago

14.0.2-alpha.3

2 years ago

14.0.2-alpha.0

2 years ago

14.0.2-alpha.1

2 years ago

14.0.2-alpha.6

2 years ago

14.0.2-alpha.7

2 years ago

14.0.2-alpha.4

2 years ago

14.0.2-alpha.5

2 years ago

14.0.0

2 years ago

14.0.1

2 years ago

14.0.0-alpha.0

2 years ago

14.0.2

2 years ago

14.0.3

2 years ago

8.0.8

2 years ago

8.0.7

2 years ago

8.0.6

2 years ago

8.0.5

2 years ago

8.0.4

2 years ago

8.0.3

3 years ago

8.0.2

3 years ago

8.0.1

3 years ago

8.0.0

3 years ago

7.0.3

3 years ago

7.0.2

3 years ago

7.0.1

3 years ago

7.0.0

3 years ago

6.1.4

5 years ago

6.1.3

5 years ago

6.0.14

5 years ago

6.0.13

5 years ago

6.0.12

5 years ago

6.0.11

5 years ago

6.0.10

5 years ago

6.0.9

5 years ago

6.0.5

5 years ago

6.0.4

5 years ago

6.0.1

5 years ago

6.0.3

5 years ago

6.0.2

5 years ago

6.0.0

5 years ago

6.0.0-rc.4

5 years ago

6.0.0-rc.1

5 years ago

6.0.0-rc.3

5 years ago

6.0.0-rc.2

5 years ago

6.0.0-rc.0

5 years ago

6.0.0-alpha.16

5 years ago

6.0.0-alpha.14

5 years ago

6.0.0-alpha.15

5 years ago

6.0.0-alpha.13

5 years ago

6.0.0-alpha.12

5 years ago

6.0.0-alpha.11

5 years ago

6.0.0-alpha.7

6 years ago

5.7.2

6 years ago

6.0.0-alpha.6

6 years ago

6.0.0-alpha.5

6 years ago

6.0.0-alpha.3

6 years ago

6.0.0-alpha.1

6 years ago

5.7.0

6 years ago

5.6.0

6 years ago

5.5.2

6 years ago

5.5.1

6 years ago

5.5.0

6 years ago

5.4.3

6 years ago

5.4.2

6 years ago

5.4.1

6 years ago

5.4.0

6 years ago

5.3.1

6 years ago

5.3.0

6 years ago

5.2.2

6 years ago

5.2.1

6 years ago

5.2.0

6 years ago

5.2.0-alpha.0

6 years ago

5.1.8

6 years ago

5.1.7

6 years ago

5.1.6

6 years ago

5.1.5

6 years ago

5.1.4

6 years ago

5.1.3

6 years ago

5.1.2

6 years ago

5.1.1

6 years ago

5.1.0

6 years ago

5.0.30-rc.0

6 years ago

5.0.29-rc.0

6 years ago

5.0.28-rc.0

6 years ago

5.0.27-rc.0

6 years ago

5.0.26-rc.0

6 years ago

5.0.25-rc.0

6 years ago

5.0.24-rc.0

6 years ago

5.0.23-rc.0

6 years ago

5.0.23-alpha.0

6 years ago

5.0.22-alpha.0

6 years ago

5.0.21-alpha.0

6 years ago

5.0.20-alpha.0

6 years ago

5.0.19-alpha.0

6 years ago

5.0.18-alpha.0

6 years ago

5.0.17-alpha.0

6 years ago

5.0.16-alpha.0

6 years ago

5.0.15-alpha.0

6 years ago

5.0.14-alpha.0

6 years ago

5.0.13-alpha.0

6 years ago

5.0.12-alpha.0

6 years ago

5.0.8-alpha.0

6 years ago

5.0.7-alpha.0

6 years ago

5.0.6-alpha.0

6 years ago

5.0.5-alpha.0

6 years ago

5.0.4-alpha.0

6 years ago

5.0.3-alpha.0

6 years ago

5.0.2-alpha.0

6 years ago

5.0.1-alpha.0

6 years ago

5.0.0-alpha.0

6 years ago

4.0.6

6 years ago

4.0.5

6 years ago

4.0.4

6 years ago

4.0.1

7 years ago

4.0.0

7 years ago

3.0.11

7 years ago

3.0.10

7 years ago

3.0.9

7 years ago

3.0.8

7 years ago

3.0.7

7 years ago

3.0.6

7 years ago

3.0.5

7 years ago

3.0.4

7 years ago

3.0.3

7 years ago

3.0.0

7 years ago

2.2.2

7 years ago

2.2.0

7 years ago

2.1.3

7 years ago

2.1.2

7 years ago

2.1.1

7 years ago

2.1.0

7 years ago

2.0.2

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago

2.0.0-alpha.7

7 years ago

2.0.0-alpha.6

7 years ago

2.0.0-alpha.5

7 years ago

2.0.0-alpha.4

7 years ago

2.0.0-alpha.3

7 years ago

2.0.0-alpha.2

7 years ago

2.0.0-alpha.1

7 years ago

2.0.0-alpha.0

7 years ago

1.10.1-alpha.0

7 years ago

1.10.0-alpha.0

7 years ago