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>