UI MarCom 3

Tabs Stable

With Tabs the user has the ability to switch between different views of similar content easily.

<uimc-tabs items='[{"label": ""}]'>
    <uimc-tabs-item></uimc-tabs-item>
</uimc-tabs>

Tabs container <uimc-tabs>

AttributeDescriptionValuesDefault
itemsContains a list of labels for each itemArray of Objects
SlotSlotted content
defaultSlot as many <uimc-tabs-item> as labels are set in the items attribute

Tabs items <uimc-tabs-item>

AttributeDescriptionValuesDefault
activePresence of this attribute marks the current item
SlotSlotted content
defaultNest the content of one tab panel each

Working sample

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quia officia eum accusantium tenetur commodi odio totam rem. Illum placeat quae officiis repellendus rerum expedita, quibusdam ducimus reprehenderit cumque ipsum.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda magni perspiciatis asperiores totam harum qui tempore deleniti provident, omnis laudantium facilis dolores aliquam voluptatibus, eveniet earum quae recusandae perferendis consequuntur?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt soluta ratione delectus assumenda iure accusantium sunt earum ad fugit dignissimos totam ipsa nesciunt eveniet consequatur et voluptate, molestiae est a.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae illum accusamus earum explicabo laborum? Omnis accusantium, quaerat vero corporis dignissimos unde assumenda fugit minus nisi vel excepturi, necessitatibus obcaecati laboriosam.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet repellat quaerat reiciendis corporis debitis ipsum quae ducimus natus assumenda, dolore dicta nam vel excepturi! Quidem accusantium amet pariatur odit quam?Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias totam labore odit vel temporibus architecto culpa molestias consectetur ratione doloribus voluptates illum natus, eligendi cumque, tempore maiores? Doloribus, quidem amet.
<uimc-tabs items='[{"label": "System Info"},{"label": "Upgrades"},{"label": "Tickets"},{"label": "Activities"},{"label": "Contracts"},{"label": "Documents"}]'>
    <uimc-tabs-item>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quia officia eum accusantium tenetur commodi odio totam rem. Illum placeat quae officiis repellendus rerum expedita, quibusdam ducimus reprehenderit cumque ipsum.</uimc-tabs-item>
    <uimc-tabs-item>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda magni perspiciatis asperiores totam harum qui tempore deleniti provident, omnis laudantium facilis dolores aliquam voluptatibus, eveniet earum quae recusandae perferendis consequuntur?</uimc-tabs-item>
    <uimc-tabs-item>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt soluta ratione delectus assumenda iure accusantium sunt earum ad fugit dignissimos totam ipsa nesciunt eveniet consequatur et voluptate, molestiae est a.</uimc-tabs-item>
    <uimc-tabs-item>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae illum accusamus earum explicabo laborum? Omnis accusantium, quaerat vero corporis dignissimos unde assumenda fugit minus nisi vel excepturi, necessitatibus obcaecati laboriosam.</uimc-tabs-item>
    <uimc-tabs-item>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet repellat quaerat reiciendis corporis debitis ipsum quae ducimus natus assumenda, dolore dicta nam vel excepturi! Quidem accusantium amet pariatur odit quam?</uimc-tabs-item>
    <uimc-tabs-item>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias totam labore odit vel temporibus architecto culpa molestias consectetur ratione doloribus voluptates illum natus, eligendi cumque, tempore maiores? Doloribus, quidem amet.</uimc-tabs-item>
</uimc-tabs>