link(rel="stylesheet", href="./input-label-tabs.css")
script(src="./input-label-tabs.js")
//- todo make input-label-tabs.js and tabs handling
form#null.d-none(
action='data:,',
method='null',
onsubmit='return!1'
)
h1 Tab example
x-tabs.radio(role='tabs', aria-label='My tabs')
input#for-tab-1.sr-only(
type='radio', name='tabs1', form='null',
role='tab?', aria-labelfor='tab1',
tab-label='Tab 1 btn',
disabled=false, checked=true
)
input#for-tab-2.sr-only(
type='radio', name='tabs1', form='null',
role='tab?', aria-labelfor='tab2',
tab-label='Tab 2 btn',
disabled=false
)
x-tabs-list.d-flex-center-XY.has-m-z5.has-p-z3(aria-hidden=true)
label.btn(for='for-tab-1') #[u.link Tab 1 btn]
label.mbtn(for='for-tab-2') #[u.link Tab 2 btn]
button.mbtn a
hr
x-tabs-container
x-tab#tab1
h2 This is tab 1
x-tab#tab2
h2 This is tab 2