Switches between views of the same object (Config / Status / Snapshots). Tabs are built from the kern-tab-panel children; arrow keys, Home and End move between them.
Each kern-tab-panel becomes a tab: label is the tab text, name the value kern-tabs selects by, and count adds a number badge. label on kern-tabs names the tab list for screen readers.
value picks the initially selected panel by its name (the first one by default) and reflects the current choice. kernTabChange fires when the user switches tabs.
All events of the last 24 hours.Rollladen Süd was not reachable 3 times.No errors.
Switch a tab.
<kern-tabs label="Log" value="warnings" style="max-width:520px">
<kern-tab-panel name="all" label="All" count="128">All events of the last 24 hours.</kern-tab-panel>
<kern-tab-panel name="warnings" label="Warnings" count="3">Rollladen Süd was not reachable 3 times.</kern-tab-panel>
<kern-tab-panel name="errors" label="Errors" count="0">No errors.</kern-tab-panel>
</kern-tabs>
<p class="out" style="font-size:13px;color:var(--text-muted)">Switch a tab.</p>
root.querySelector('kern-tabs').addEventListener('kernTabChange', (e) => {
root.querySelector('.out').textContent = `kernTabChange → ${e.detail.value}`;
});
Keyboard
Only the selected tab is in the Tab order. Arrow Left and Arrow Right move to the previous or next tab (wrapping around), Home and End jump to the first and last. Tab then moves into the panel.
Bad Lüftung, Bad LichtKüche LichtRollladen Süd, Stehlampe, HeizungGarage Tor