@lightspeed/cirrus-group

Cirrus Group Component

Stats

StarsIssuesVersionUpdatedCreatedSize
@lightspeed/cirrus-group
8.0.83 years ago4 years agoMinified + gzip package size for @lightspeed/cirrus-group in KB

Readme

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
addon content vertical alignment `.cr-group-addon__content--{top
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>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.