@lightspeed/cirrus-group

    8.0.8 • Public • Published

    Group

    Group component bundles other components.

    Installation

    First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

    If using Yarn:

    yarn add @lightspeed/cirrus-group

    Or using npm:

    npm i -S @lightspeed/cirrus-group

    Usage

    Import required styles in your .scss:

    @import '@lightspeed/cirrus-group/Group.scss';

    React Component

    <Group>

    Prop Type Description
    className string Custom className to add in addition to the default ones
    children * React.node The content of the group
    type oneOf(['horizontal', 'vertical']) Group type (default: 'horizontal')
    noSpacing boolean Removes the default spacing between items (default: false)
    block boolean Children scales to parent width (default: false)
    inputBlock boolean Children inputs scales to parent width (default: false)

    <GroupAddon>

    Prop Type Description
    children * React.node The content of the group addon
    className string Custom className to add in addition to the default ones
    align oneOf(['left', 'center', 'right']) Aligns the text rendered element (default: left)
    verticalAlign oneOf(['top', 'middle', 'bottom']) Vertically aligns the text rendered element (default: middle)

    Example

    import React from 'react';
    import Group, { GroupAddon } from '@lightspeed/cirrus-group';
    import Button from '@lightspeed/cirrus-button';
     
    const MyComponent = () => (
      <div>
        <Group>
          <Button>first button</Button>
          <Button>second button</Button>
          <Button>third button</Button>
          <GroupAddon>addon</GroupAddon>
        </Group>
      </div>
    );
     
    export default MyComponent;

    CSS Component

    Component classes

    Type Class
    base .cr-group
    no spacing .cr-group--no-spacing
    block .cr-group--block
    vertical .cr-group--vertical
    item .cr-group__item
    addon .cr-group__item--addon
    addon content .cr-group-addon__content
    addon content alignment .cr-group-addon__content--{left|center|right}
    addon content vertical alignment .cr-group-addon__content--{top|middle|bottom}
    input blocks .cr-group__item--input-block

    Component HTML

    <div class="cr-group cr-group--vertical cr-group--no-spacing">
      <div class="cr-group__item">
        <button type="button" class="cr-button">first button</button>
      </div>
      <div class="cr-group__item">
        <button type="button" class="cr-button">second button</button>
      </div>
      <div class="cr-group__item">
        <button type="button" class="cr-button">third button</button>
      </div>
      <div class="cr-group__item cr-group__item--addon">
        <div class="cr-group-addon__content cr-group-addon__content--left  cr-group-addon__content--center">
          Footer text
        </div>
      </div>
    </div>

    Keywords

    none

    Install

    npm i @lightspeed/cirrus-group

    DownloadsWeekly Downloads

    92

    Version

    8.0.8

    License

    MIT

    Unpacked Size

    27.7 kB

    Total Files

    9

    Last publish

    Collaborators

    • kurt.bergeron
    • tombertrand
    • lightspeedhq
    • ls-guillaume-lambert
    • inooid
    • ls-frederic-bouchard
    • x.drdak
    • anomen
    • xena