x-iconbutton
<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.
Basic usage
any markup
here!
Initializing markup
<x-iconbutton src="firefox.png">
Put <code>any markup</code> here!
</x-iconbutton>
Editing the icon with icon-anchor
and src
Initializing markup
Editing the button with .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>
.
Initializing markup
JavaScript
// 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.style.color = randomColor();
iconButton.contentEl.textContent = randomWord(7);
});
Custom styling the button
- Applying styles to
x-iconbutton
applies styles to the entire button - Applying styles to
x-iconbutton .x-iconbutton-icon
applies styles to the icon only - Applying styles to
x-iconbutton .x-iconbutton-content
applies styles to the content label only - Applying styles to
x-iconbutton[active]
applies styles that only appear when the button is clicked
Initializing markup
<x-iconbutton id="custom-style-iconbutton" src="firefox.png">
How fancy!
</x-iconbutton>
CSS styling
#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;
}