IconButton({ icon: "play_arrow" })
buttonWTooltip = IconButton({ icon: "play_arrow", "data-mdc-tooltip": "Click me", name: "my-button" })
// Initialize tooltips on items.
initTooltips([buttonWTooltip])
toggle1 = IconButton({ icon: "play_arrow", iconOff: "pause" })
toggle2 = IconButton({ icon: "play_arrow", iconOff: "pause", on: true })
function IconButton({
icon,
iconOff,
on,
...attributes
}) {
mdcStyles();
const _iconOn = typeof icon === "string" ? Icon(icon) : icon;
_iconOn.classList.add("mdc-icon-button__icon");
const _iconOff = typeof iconOff === "string" ? Icon(iconOff) : iconOff;
_iconOff && _iconOff.classList.add("mdc-icon-button__icon");
const el = html`<button class="mdc-icon-button">
<span class="mdc-icon-button__ripple"></span>
<span class="mdc-icon-button__focus-ring"></span>
${_iconOn}
${_iconOff ?? ""}
<span class="mdc-icon-button__touch"></span>
</button>`;
// Add any other attributes.
Object.entries(attributes)
.forEach(([ name, val ]) => el.setAttribute(name, val));
if (_iconOff) {
// Add toggle class.
_iconOn.classList.add("mdc-icon-button__icon--on");
// Add toggle class to root if necessary.
on && el.classList.add("mdc-icon-button--on");
// Instantiate toggle.
// const mdc = await import('https://cdn.skypack.dev/material-components-web@14.0.0?min');
el.toggle = new mdc.iconButton.MDCIconButtonToggle(el);
}
return el;
}
function Icon(iconName) {
materialIcons();
return htl.html`<span class="material-icons-outlined">${iconName}</span>`;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
