@lightspeed/cirrus-group NPM

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>

@lightspeed/cirrus-input classnames

@everything-registry/sub-chunk-548 @lightspeed/cirrus-dialog @zalastax/nolb-_lig

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago