Prettified Code!
This commit is contained in:
@@ -25,44 +25,39 @@ export default class TabBar extends Component {
|
||||
}
|
||||
|
||||
if (tabs.length === 1) {
|
||||
return html`
|
||||
${tabs[0].content}
|
||||
`;
|
||||
|
||||
return html` ${tabs[0].content} `;
|
||||
} else {
|
||||
return html`
|
||||
<div class="tab-bar">
|
||||
<div role="tablist" aria-label=${ariaLabel}>
|
||||
${
|
||||
tabs.map((tabItem, index) => {
|
||||
const handleClick = () => this.handleTabClick(index);
|
||||
return html`
|
||||
<button
|
||||
role="tab"
|
||||
aria-selected=${index === this.state.activeIndex}
|
||||
aria-controls=${`tabContent${index}`}
|
||||
id=${`tab-${tabItem.label}`}
|
||||
onclick=${handleClick}
|
||||
>${tabItem.label}</button>
|
||||
`;
|
||||
})
|
||||
}
|
||||
</div>
|
||||
${
|
||||
tabs.map((tabItem, index) => {
|
||||
${tabs.map((tabItem, index) => {
|
||||
const handleClick = () => this.handleTabClick(index);
|
||||
return html`
|
||||
<div
|
||||
tabindex="0"
|
||||
role="tabpanel"
|
||||
id=${`tabContent${index}`}
|
||||
aria-labelledby=${`tab-${tabItem.label}`}
|
||||
hidden=${index !== this.state.activeIndex}
|
||||
>
|
||||
${tabItem.content}
|
||||
</div>
|
||||
<button
|
||||
role="tab"
|
||||
aria-selected=${index === this.state.activeIndex}
|
||||
aria-controls=${`tabContent${index}`}
|
||||
id=${`tab-${tabItem.label}`}
|
||||
onclick=${handleClick}
|
||||
>
|
||||
${tabItem.label}
|
||||
</button>
|
||||
`;
|
||||
})
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
${tabs.map((tabItem, index) => {
|
||||
return html`
|
||||
<div
|
||||
tabindex="0"
|
||||
role="tabpanel"
|
||||
id=${`tabContent${index}`}
|
||||
aria-labelledby=${`tab-${tabItem.label}`}
|
||||
hidden=${index !== this.state.activeIndex}
|
||||
>
|
||||
${tabItem.content}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user