Charms
The Charms bars is a systems toolbars that houses for important services. Create additional control area with charm component.
About charms
The Charms bars is a systems toolbars that houses for important services.
The Charms bars is a vertical or horizontal toolbar, found on the: right-side
, left-side
, top-side
or bottom-side
of the screen.
To create charms
add attribute data-role="charms"
to block element. and setup charms position with attribute data-position="right|left|top|bottom"
.
<div data-role="charms" data-position="right"></div>
Position
You can setup position for charms
.
To set position
add attribute data-position
with one of values: right
, left
, top
or bottom
.
<div data-role="charms" data-position="top"><div>top</div></div>
<div data-role="charms" data-position="bottom"><div>bottom</div></div>
<div data-role="charms" data-position="left"><div>left</div></div>
<div data-role="charms" data-position="right"><div>right</div></div>
Opacity
To set opacity
for charms use attribute data-opacity
. The value can be between 0
and 1
.
<div data-role="charms" data-opacity=".5"></div>
Events
When charms works, it generated the numbers of events. You can use callback for this event to behavior with charms.
Event | Data-* | Desc |
---|---|---|
onCharmsCreate(el) | data-on-charms-create |
Fired when charms was created |
onOpen(el) | data-on-open |
Fired when charms open |
onClose(el) | data-on-close |
Fired when charms close |
<div data-role="charms"
data-on-open="console.log('charms was opened')"
data-on-close="console.log('charms was closed')"
></div>
Methods
You can use charms methods ti interact with the charms component.
- open() - open charms
- close() - close charms
- toggle() - toggle charms
- opacity() - get charms opacity value
- opacity(val) - eet charms opacity
var charms = $(el).data('charms');
charms.open();
charms.close();
charms.toggle();
charms.opacity(.5);
console.log(charms.opacity());
Also Metro 4 also implements a special object for working with the component Metro.charms
with same methods:
- check(el) - Check element is a charm
- isOpen(el) - Check charms is open
- open(el) - open specific charms
- close(el) - close specific charms
- toggle(el) - toggle specific charms
- opacity(el, opacity) - set opacity for specific charms
<div data-role="charms" id="specific-charms"></div>
<script>
Metro.charms.open("#specific-charms");
</script>
Customize
You can use attribute data-cls-charms="..."
to set additional classes for charms.