Tab Group

Tabs is a view often used in record details to display related information and actions. The only working component there is the <as-tab-group> which holds all the logic. Elements inside <as-tab> & <as-tab-panel> are only there as placeholders (though tabs logic uses these), these might be added later as full-blown components.

Examples (1)
Example Code
Overview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id ante nisl. Nulla ac purus imperdiet ligula mollis lobortis quis sed nunc. Vivamus eu blandit mauris, vel fringilla nisl. Vestibulum quis sapien non quam euismod feugiat et eu dolor. Maecenas tincidunt at arcu ac ultrices. Maecenas placerat lorem vel risus cursus ultricies. Sed dictum mauris porta lectus commodo, non iaculis nisi rhoncus. Nam sit amet erat risus. Etiam nisl massa, facilisis eget eleifend nec, vehicula vitae lectus. Vestibulum ullamcorper felis et bibendum feugiat. Integer ante nisi, mattis et libero non, laoreet placerat metus.

Messages

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id ante nisl. Nulla ac purus imperdiet ligula mollis lobortis quis sed nunc. Vivamus eu blandit mauris, vel fringilla nisl. Vestibulum quis sapien non quam euismod feugiat et eu dolor. Maecenas tincidunt at arcu ac ultrices. Maecenas placerat lorem vel risus cursus ultricies. Sed dictum mauris porta lectus commodo, non iaculis nisi rhoncus. Nam sit amet erat risus. Etiam nisl massa, facilisis eget eleifend nec, vehicula vitae lectus. Vestibulum ullamcorper felis et bibendum feugiat. Integer ante nisi, mattis et libero non, laoreet placerat metus.

Images

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id ante nisl. Nulla ac purus imperdiet ligula mollis lobortis quis sed nunc. Vivamus eu blandit mauris, vel fringilla nisl. Vestibulum quis sapien non quam euismod feugiat et eu dolor. Maecenas tincidunt at arcu ac ultrices. Maecenas placerat lorem vel risus cursus ultricies. Sed dictum mauris porta lectus commodo, non iaculis nisi rhoncus. Nam sit amet erat risus. Etiam nisl massa, facilisis eget eleifend nec, vehicula vitae lectus. Vestibulum ullamcorper felis et bibendum feugiat. Integer ante nisi, mattis et libero non, laoreet placerat metus.

Log

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id ante nisl. Nulla ac purus imperdiet ligula mollis lobortis quis sed nunc. Vivamus eu blandit mauris, vel fringilla nisl. Vestibulum quis sapien non quam euismod feugiat et eu dolor. Maecenas tincidunt at arcu ac ultrices. Maecenas placerat lorem vel risus cursus ultricies. Sed dictum mauris porta lectus commodo, non iaculis nisi rhoncus. Nam sit amet erat risus. Etiam nisl massa, facilisis eget eleifend nec, vehicula vitae lectus. Vestibulum ullamcorper felis et bibendum feugiat. Integer ante nisi, mattis et libero non, laoreet placerat metus.

 <as-tab-group>
  <as-tab icon-name="inbox">Overview</as-tab>
  <as-tab-panel>[tab content]</as-tab-panel>
  <as-tab icon-name="message">Messages</as-tab>
  <as-tab-panel>[tab content]</as-tab-panel>
  <as-tab selected icon-name="star">Images</as-tab>
  <as-tab-panel>[tab content]</as-tab-panel>
  <as-tab selected icon-name="list-ul">Log</as-tab>
  <as-tab-panel>[tab content]</as-tab-panel>
</as-tab-group>
Properties (1)
Property name Description Type
selected Optional: When present within <as-tab> declaration marks active tab. If no of the <as-tab> elements has selected attribute by default first tab is set to selected. string
Events (2)
Event name Description Example value
as-tab-group:created Fired when component is instantiated. Has detail object. {id: "a", tabs: "b1,c1,d1,e1"}
as-tab-group:selected Fired when component tab is clicked and selected. Has detail object. {id: "a", tab: "b1"}
Files