-
Notifications
You must be signed in to change notification settings - Fork 1
Group
esr360 edited this page Jul 16, 2019
·
9 revisions
Often, you may find yourself grouping (or wrapping) certain modules. Lucid provides a <Group>
component to be used in such scenarios. Consider several grouped <Button>
modules:
<Group>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</Group>
Styles can be provided to the Wrapper
component from child modules, so long as all children are the same module:
const styles = {
backgroundColor: 'blue',
color: 'white',
padding: '10px',
group: {
position: 'relative',
marginBottom: '20px'
}
}
const Button = (props) => (
<Module styles={styles}>{props.children}</Module>
);
export default Button;
You can utilise the usual features of Lucid on the Group component:
<Group large>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</Group>
const styles = {
backgroundColor: 'blue',
color: 'white',
padding: '1em',
fontSize: '1em',
group: ({ state }) => ({
position: 'relative',
fontSize: state.large ? '1.4em' : '1em',
marginBottom: state.large ? '40px' : '20px'
})
}
const Button = (props) => (
<Module styles={styles}>{props.children}</Module>
);
export default Button;
...or alternatively:
const styles = ({ context }) => ({
backgroundColor: 'blue',
color: 'white',
padding: '10px',
fontSize: '1em',
group: {
position: 'relative',
fontSize: context.group.large ? '1.4em' : '1em',
marginBottom: context.group.large ? '40px' : '20px'
}
});
...