Have ideas to improve npm?Join in the discussion! »

    fluentui-react-grid
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    fluentui-react-grid

    NPM version NPM downloads NPM license Codecov Travis Bundle size

    About

    React components for Fluent UI layout styles

    Alternatives

    Contents

    Demo

    Playground – play with library in Storybook

    How to Install

    First, install the library in your project by npm:

    $ npm install fluentui-react-grid

    Or Yarn:

    $ yarn add fluentui-react-grid

    You also need to include CSS styles (in HTML head section e.g.: in index.html file):

    <link
      rel="stylesheet"
      href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
    />

    Components

    Grid

    Available options

    HTML div element props

    You need to add dir="ltr" – (order from left to right) or dir="rtl" – (right to left/reversed order) for correct grid positioning

    Row

    Available options

    HTML div element props

    Col

    Available options

    HTML div element props and dedicated params based on Fluent UI class names

    Check corresponding Fulent UI class names here

    Param Type
    sizeSm number or string (between 1-12)
    sizeMd number or string (between 1-12)
    sizeLg number or string (between 1-12)
    sizeXl number or string (between 1-12)
    sizeXxl number or string (between 1-12)
    sizeXxxl number or string (between 1-12)
    smPush number or string (between 1-12)
    mdPush number or string (between 1-12)
    lgPush number or string (between 1-12)
    xlPush number or string (between 1-12)
    xxlPush number or string (between 1-12)
    xxxlPush number or string (between 1-12)
    smPull number or string (between 1-12)
    mdPull number or string (between 1-12)
    lgPull number or string (between 1-12)
    xlPull number or string (between 1-12)
    xxlPull number or string (between 1-12)
    xxxlPull number or string (between 1-12)
    hiddenSm boolean
    hiddenMd boolean
    hiddenMdDown boolean
    hiddenMdUp boolean
    hiddenLg boolean
    hiddenLgDown boolean
    hiddenLgUp boolean
    hiddenXl boolean
    hiddenXlDown boolean
    hiddenXlUp boolean
    hiddenXxl boolean
    hiddenXxlDown boolean
    hiddenXxlUp boolean
    hiddenXxxl boolean

    Example

    Basics

    <Grid dir="ltr">
      <Grid.Row>
        <Grid.Col sizeSm={6} sizeMd={4} sizeLg={2}>
          A
        </Grid.Col>
     
        <Grid.Col sizeSm={6} sizeMd={6} sizeLg={10}>
          B
        </Grid.Col>
      </Grid.Row>
    </Grid>

    Inheritance

    <Grid dir="ltr">
      <Grid.Row>
        <Grid.Col sizeSm={12} sizeLg={4}>
          Example
        </Grid.Col>
      </Grid.Row>
    </Grid>

    Push and pull

    <Grid dir="ltr">
      <Grid.Row>
        <Grid.Col sizeSm={4} smPush={8}>
          First in code
        </Grid.Col>
     
        <Grid.Col sizeSm={8} smPull={4}>
          Second in code
        </Grid.Col>
      </Grid.Row>
    </Grid>

    Visibility

    <Grid dir="ltr">
      <Grid.Row>
        <Grid.Col sizeSm={12} hiddenXxlUp>
          Visible on smaller screens
        </Grid.Col>
     
        <Grid.Col sizeSm={12} hiddenXlDown>
          Visible on larger screens
        </Grid.Col>
      </Grid.Row>
    </Grid>

    License

    This project is licensed under the MIT License © 2020-present Jakub Biesiada

    Install

    npm i fluentui-react-grid

    DownloadsWeekly Downloads

    40

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    41.2 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar