ethereum:elements gives you useful elements to make building a dapp more fun.
One element, which was there since a while has now got a better API.
Instead of realing on iron:router, it uses now a global object called EthElements.Modal
to show and hide modals, read below to see how you can make use of them.
Note that when you use the modals in combination with the dapp-styles, they look even more awesome!
To start just place a modal placeholder before the closing body tag.
{{> dapp_modalPlaceholder}}
Render without route
To render the modal simply call:
EthElements.Modal.show('myContentTemplate');
// Or with data for the template
EthElements.Modal.show({
template: 'myContentTemplate',
data: {
myData: 'some data'
}
});
Additional options:
closeable
– Prevents the default behaviour, which closes the modal when the overlay is clicked.-
class
– A class, which will be add to the modal section elementEthElements.Modal.show('myContentTemplate', { closeable: false, class: 'my-modal-class' });
To navigate to a path on close do:
(This will only work when the iron:router package is installed)
EthElements.Modal.show('myContentTemplate', {closePath: '/dashboard'});
Close modal
EthElements.Modal.hide();
Modal Question
The question modal is a modal content template, which can be used to display a text and allow OK and Cancel options.
You basically just can pass a text
, ok
and/or cancel
property as a data context to set callbacks, which will be fired when the button is pressed.
Additional you can:
– Set the ok
or cancel
property to true
, it will just close the modal without any action.
– Pass false
or leave the ok
or cancel
property empty and it won’t show that buttons.
EthElements.Modal.question({
text: 'Do you want to ...',
ok: function(){
// do something on ok
},
cancel: true // simply show th cancel button and close the modal on click
});
Using a template
Instead of passing a text you can also pass a template, which will be shown above the ok/cancel buttons
EthElements.Modal.question({
template: 'myTemplate',
data: {
my: 'template data'
},
ok: function(){
// do something on ok
},
cancel: function(){
// do something on cancel
}
});
Close question modal
EthElements.Modal.hide();
Additional you can pass the same options as the modal as the second parameter:
EthElements.Modal.question({
text: 'Alright?',
ok: function(){
// do something on ok
}
}, {
closeable: false
});
Localization
The modal question can use the tap:i18n
package for the ok and cancel button texts.
If the TAPi18n
helper is available it will use TAPi18n.__('buttons.ok')
and TAPi18n.__('buttons.cancel')
for the buttons.