{% extends "component-demo-base.html" %} {% set TAG_NAME="x-iconbutton" %} {% set COMPONENT_NAME="iconbutton" %} {% block demoContent %}
<x-iconbutton>
s provide a simple way to declare buttons with icons by abstracting away the HTML layout and CSS styling that goes into properly anchoring and centering the contents.
any markup
here!
<x-iconbutton src="firefox.png">
Put <code>any markup</code> here!
</x-iconbutton>
icon-anchor
and src
.contentEl
and .iconEl
When editing the actual contents of the iconbutton, in order to help preserve the underlying shadow DOM, we provide access to the content-label and icon DOM elements through .contentEl
and .iconEl
, respectively.
Important: Edit these elements instead of directly editing .innerHTML
or .textContent
of an <x-iconbutton>
.
Content
// assume that randomColor and randomWord are already provided
var iconElToggle = document.getElementById("iconel-edit-button");
var contentElToggle = document.getElementById("contentel-edit-button");
var iconButton = document.getElementById("dom-demo-button");
// "edit .iconEl" button
iconElToggle.addEventListener("click", function(e){
iconButton.iconEl.style.backgroundColor = randomColor();
});
// "edit .contentEl" button
contentElToggle.addEventListener("click", function(e){
iconButton.contentEl.innerHTML = "<code>"+randomWord(7)+"</code>";
});
x-iconbutton
applies styles to the entire button
x-iconbutton .x-iconbutton-icon
applies styles to the icon only
x-iconbutton .x-iconbutton-content
applies styles to the content label only
x-iconbutton[active]
applies styles that only appear when the button is clicked
<x-iconbutton id="custom-style-iconbutton" src="firefox.png">
How fancy!
</x-iconbutton>
#custom-style-iconbutton{
border: 1px solid grey;
border-radius: 4px;
box-shadow: 1px 1px grey;
padding: 5px;
background-color: #93bce0;
background-image: none;
}
#custom-style-iconbutton:hover{
background-color: #bbd5eb;
background-image: none;
}
#custom-style-iconbutton[active]{
box-shadow: inset 1px 1px 4px grey;
background-color: #bbd5eb;
background-image: none;
}
#custom-style-iconbutton > .x-iconbutton-content{
font-family: font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-size: 2em;
color: white;
text-shadow: -1px -1px #ddd;
}