RazorBlades - Web Component
Walk through & features
Javscript & CSS
<script type="module" src="blades-webcomponent.js"></script>
Hosted in a parent element
The host consume all space from its parent using
position:absolute;left:0;top:0;width:100%;height:100%. You have to box it adequately.
Blade Stacks are aligned in stacks
Note: multiple stacks are not yet implemented
<blade-host> <blade-stack id="stack1"> </blade-stack> </blade-host>
The stacks overflow horizontally. Be prepared for a scrollbar.
blade-host DOM Element has a property
stacks which returns an array of the displayed stacks.
Blades are added to stacks and have content
<blade-host> <blade-stack id="stack1"> <blade-blade id="blade1" title="Settings" sub-title="Overview" icon="🎚"> Hello World </blade-blade> </blade-stack> </blade-host>
The title and sub-title attributes are mandatory.
blade-stack DOM Element has a property
blades which returns an array of the displayed blades.
Adding buttons into web component slots
<blade-host> <blade-stack id="stack1"> <blade-blade id="blade1" title="Settings" sub-title="Overview" icon="🎚"> <button slot="blade-buttons" onclick="document.getElementById('blade1').setAttribute('title', 'blub');">➕ Change Title</button> Hello World </blade-blade </blade-stack> </blade-host>
Buttons in the body can be added to a
slot within the blade's button row. They are formatted by the web component but behave otherwise like any button.
Specification, Testing & Other
- RazorBlades are tested and developed using Firefox.
- Firefox (Evergreen at moment of release)
- Chrome (Evergreen at moment of release)
- IE11 support may be achieved using polyfills. We do not test or support this.