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.

                    <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.