Tabs

HTML

<x-tabs></x-tabs>

JavaScript

const tabs = [
    { label: 'Tab 1', type: 'tab', action: () => { showSnackbar('Left most tab clicked')}},
    { label: 'Tab 2', type: 'tab', action: () => { showSnackbar('2nd tab clicked')}},
    { label: 'Tab 3', type: 'tab', action: () => { showSnackbar('Tab 3 clicked')}},
    { label: 'Tab 4', type: 'tab', action: () => { showSnackbar('4th tab clicked')}},
    { label: 'Button 1', type: 'button', action: () => { showSnackbar('Button 1 clicked')}},
    { type: 'spacer' },
    { type: 'search', placeholder: '検索文字列', action: search },
    { label: '', type: 'button', icon: 'fas fa-shopping-cart', action: () => { showSnackbar('Button 3 clicked'); console.log('Button 3 clicked');}}
];
document.querySelector('x-tabs').setTabs(tabs);

Button colors

• primary
• secondary
• dark
• light
• red
• green
• orange
• yellow
• gray
• purple
• pink