Computer Science student at AUTh
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
</head>
buttonGroup = html`
<div style="display: flex;">
<label style="background-color: ${buttonGroup === 'option1' ? 'blue' : 'gray'};">
<input type="radio" name="button-group" value="option1" checked=${buttonGroup === 'option1'} onchange=${() => buttonGroup = 'option1'}>
Option 1
</label>
<label style="background-color: ${buttonGroup === 'option2' ? 'blue' : 'gray'};">
<input type="radio" name="button-group" value="option2" checked=${buttonGroup === 'option2'} onchange=${() => buttonGroup = 'option2'}>
Option 2
</label>
<label style="background-color: ${buttonGroup === 'option3' ? 'blue' : 'gray'};">
<input type="radio" name="button-group" value="option3" checked=${buttonGroup === 'option3'} onchange=${() => buttonGroup = 'option3'}>
Option 3
</label>
</div>
`;
function buttonGroup(options, {value: initialValue}) {
const group = html`<span style="display: flex"></span>`;
let value = initialValue;
function update() {
for (const button of group.children) {
button.style.background = button.value === value ? "#ddd" : null;
}
}
function input(event) {
value = event.target.value;
update();
group.dispatchEvent(new CustomEvent("input"));
}
for (const option of options) {
const button = html`<button style="flex: 1">${option.label}</button>`;
button.value = option.value;
button.onclick = input;
group.appendChild(button);
}
update();
return Object.defineProperty(group, "value", {
get() {
return value;
},
set(newValue) {
value = newValue;
update();
}
});
}
options = [
{label: "Option 1", value: "option1"},
{label: "Option 2", value: "option2"},
{label: "Option 3", value: "option3"}
];
group = buttonGroup(options, {value: "option1"});
group.addEventListener("input", () => {
console.log(`Selected value: ${group.value}`);
});
group.value
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.
