universe:ui-react
Available plain components
- Actions
- Button
- Column
- Container
- Content
- Divider
- Grid
- Header
- Icon
- Message
Available components
Modals
Creating modal
1import {Actions, Button, Content, Icon, Modal, Modals} from 'meteor/universe:ui-react';
2
3const ExampleModal = React.createClass({
4 displayName: 'ExampleModal',
5
6 render () {
7 const props = {
8 visible: this.props.visible,
9 modal: {
10 onHide: this.props.modal.onHide,
11 selector: {
12 close: '.actions .close'
13 }
14 }
15 };
16
17 return (
18 <Modal className="small basic" {...props}>
19 <Content>
20 <p>Example content</p>
21 </Content>
22
23 <Actions>
24 <Button className="basic inverted close">
25 <Icon icon="icon"/>
26 Close
27 </Button>
28 </Actions>
29 </Modal>
30 );
31 }
32});
33
34Modals.register({
35 name: 'example',
36 component: ExampleModal
37});
Managing modals
1import {Modals} from 'meteor/universe:ui-react';
2
3// Somewhere in layout
4<Modals />
5
6// Then
7Modals.hide('example');
8Modals.show('example', extraProps);
Predefined modals
AskModal
1Modals.show('ask', {
2 icon: 'help',
3 message: 'Are You sure?',
4
5 no: 'No',
6 noIcon: 'remove',
7 noAction: () => console.log('no action'),
8
9 yes: 'Yes',
10 yesIcon: 'checkmark',
11 yesAction: () => console.log('yes action')
12});
Toasts
1import {Toasts} from 'meteor/universe:ui-react';
2
3// Somewhere in layout
4<Toasts />
5
6// Then
7const modalId = Toasts.create({
8 className,
9 message,
10 header,
11 icon,
12 type, // default: 'info'
13 timeout // default: 2500 - auto remove toast
14});
15
16Toasts.remove(modalId);