Tabs
Simply Tabs
Usage
Unless where specified otherwise, the components can be used outside of the Enso ecosystem.
Demo
For live examples and demos, you may visit laravel-enso.com
Installation
Install the package:
yarn add @enso-ui/tabs
(within Enso, remember to cd
into the client
folder before installing front-end assets)
Import the desired component(s):
import { Tabs, Tab } from '@enso-ui/tabs/bulma';
Exports
@enso-ui/tabs/bulma
:
Tab
Tabs
EnsoTabs
@enso-ui/tabs/renderless
:
CoreTabs
bulma/Tabs.vue
The bulma styled tabs component built on top of its renderless version.
Example 1:
<tabs>
<tab id="Foo Tab">
Foo Contents
</tab>
<tab id="Bar Tab">
Bar Contents
</tab>
</tabs>
Example 2:
<tabs>
<template v-slot:label="{ tab }">
<span>
{{ tab }}
</span>
</template>
<div class="columns is-reverse-mobile">
<div class="column is-two-thirds">
<tab v-for="folder in folders"
:key="folder"
:id="folder">
Tab content here
</tab>
</div>
</div>
</tabs>
Properties:
alignment
-string
, optional, defaultleft
, the alignment of the tabs, valid options are: 'left', 'centered', 'right'boxed
-boolean
, optional, defaultfalse
, if true, applies the 'is-boxed' class for the tab listfullwidth
-boolean
, optional, defaultfalse
, if true, applies the 'is-fullwidth' classsize
-string
, optional, defaultnormal
, the size of the tabs, valid options are: 'normal', 'small', 'medium', 'large'toggle
-boolean
, optional, defaultfalse
, if true, applies the 'is-toggle' classtoggleRounded
-boolean
, optional, defaultfalse
, if true, applies the 'is-toggle-rounded' class
Slots:
label
, slot for the tab labelsdefault
, slot for the actual tabs/contents
bulma/EnsoTabs.vue
This bulma styled tabs component built on top of its renderless version is designed to be used within the Enso ecosystem, requiring less configuration from the dev.
Properties:
size
-string
, optional, defaultnormal
, the size of the tabs, valid options are: 'normal', 'small', 'medium', 'large'
Slots:
label
, slot for the tab labelsdefault
, slot for the actual tabs/contents
renderless/EnsoTabs.vue
The renderless version tabs component. It can be built upon to implement custom component designs.
Methods:
register(tab)
, registers a tab component. If it's the only tab, it also activates that tab.remove(tab)
, removes a tab from the tab listselect(tab)
, emits aselected
event and activates the tabactivate(activeTab)
, activates a tab and emits theactivated
eventtabIndex(tab)
, returns the index of a tab
tabs/Tab.vue
A type of tab to be used within the Tabs component.
Props:
id
-string|Object
, required, the id of the tabdefault
-boolean
, optional, defaultfalse
, if true, the tab is activated after creationkeepAlive
-boolean
, optional, defaultfalse
, if true, the type of the tab isAlive
otherwiseStatic
is used
Methods:
register()
, emits aregister
event, the event payload isthis
activate()
, emits aactivate
event, the event payload isthis
enable()
, marks this tab as enableddisable()
, marks this tab as disabledremove()
, emits aremove
event, the event payload isthis
tabs/Alive.vue
An alive type of tab used within the Tab component.
Props:
active
-boolean
, optional, defaultfalse
, if true, the tab is visible.
In case of the Alive tab (as opposed to the Static tab), the tab is hidden when not visible, but not destroyed. For example if the content of the tab is a complex, resources intensive component, the component is not destroyed & recreated when the user switches back & forth to this tab.
tabs/Static.vue
A static type of tab used within the Tab component.
Props:
active
-boolean
, optional, defaultfalse
, if true, the tab is visible
In case of the Static tab (as opposed to the Alive tab), the tab is hidden when not visible, and also destroyed. For example if the content of the tab is a complex, resources intensive component, the component is destroyed & recreated when the user switches back & forth to this tab which might take longer to display, generate multiple requests, consume extra resources.
One advantage of using a Static tab is that, the data within the tab will be as recent as the last time the tab was activated by the user, since that is when it got recreated.
Questions & Issues
For questions and support please use the issues functionality for this package's github repository.
Please make sure to search for existing issues before creating a new issue, and when opening a new issue, fill the required information in the issue template.
Issues not conforming to the guidelines may be closed immediately.
Depends on
animate.css
bulma
vue
Contributions
are welcome. Pull requests are great, but issues are good too.
Thank you to all the people who already contributed to Enso!