<Group> Component<Group> merges a list of components to form a single composite component.
Almost all our Reusable-UI Components can be <Group>-ed, with a few exceptions like <Modal>, <Popup>, <Dropdown>, and non-static positioned components.
<Group> supports of (virtually) unlimited depth of nested <Group>s.
Here the demo:
<Group> ComponentThere are 2 ways to install <Group> component into your react app project:
The alternative appearances of the <Group> layout without changing the <Group>'s functionality.
listStyle PropertySets the alternative appearances of the <Group>.
The possible values are:
undefined'regular''flat''flush''joined'Here the preview:
orientation PropertySets the orientation of the <Group>.
The possible values are:
undefined'inline''block'Here the preview:
size PropertyDefines the alternative size of the <Group>.
The possible values are:
undefined'sm''md''lg'Here the preview:
theme PropertyDefines the contextual theme of the <Group>.
The possible values are:
undefined'primary''secondary''success''info''warning''danger''light''dark'Here the preview:
gradient PropertyActivates a 3D mode of the <Group>.
The possible values are:
undefined'inherit'truefalseHere the preview:
outlined PropertyActivates an outlined mode (background-less, contrast foreground, and contrast border) of the <Group>.
The possible values are:
undefined'inherit'truefalseHere the preview:
mild PropertyActivates a mild mode (mild background, contrast foreground, and contrast border) of the <Group>.
The possible values are:
undefined'inherit'truefalseHere the preview:
Because <Group> is made from <List>, so all properties from <List> are inherited.
You can see the documentation of <List> here.
There are several variables of <Group> you can customize. Changing the variables affects all <Group> instance and other components that depend on <Group>.
Here the exposed variables:
The example of accessing, modifying, & adding variables: