Tabs

Description

Tab primitives and Bulma tab shells for Enso UI.

Installation

Install the package:

yarn add @enso-ui/tabs

Features

• exports Tab, Tabs, EnsoTabs as its public surface
• keeps the Bulma presentation layer separate from the renderless/stateful layer where applicable
• supports optional controlled active-tab state through v-model

Usage

<script setup>
import { Tab, Tabs, EnsoTabs } from '@enso-ui/tabs/bulma';
</script>

API

Tab

Public export available from src/tabs/Tab.vue.

Props:

• id
• default
• keepAlive

Controlled Tabs

Tabs and EnsoTabs can be controlled with v-model when the parent owns the active tab, for example when syncing the active tab with a route query param.

<EnsoTabs v-model="activeTab">
    ...
</EnsoTabs>

When modelValue is omitted, the component keeps its original internal behavior and activates the default tab or the first available tab.

Events:

• update:modelValue
• selected
• activated

Tabs

Public export available from src/bulma/Tabs.vue.

Bulma modifiers are configured through classes on the component:

<Tabs class="is-centered is-small is-boxed">
    ...
</Tabs>

<Tabs class="is-toggle is-toggle-rounded is-fullwidth">
    ...
</Tabs>

Supported tab modifier classes:

• is-left, is-centered, is-right
• is-small, is-normal, is-medium, is-large
• is-boxed, is-toggle, is-toggle-rounded, is-fullwidth

Non-modifier classes stay on the component wrapper, so wrapper-level classes such as form-tabs, spacing helpers, or local hooks keep working.

EnsoTabs

Public export available from src/bulma/EnsoTabs.vue.

EnsoTabs always renders the shared Enso toggle/fullwidth shell. Additional tab modifiers are configured through classes:

<EnsoTabs class="is-small">
    ...
</EnsoTabs>

Non-modifier classes stay on the component wrapper.

Upgrade Notes

Tab styling props were removed. Use Bulma classes instead:

• size="small" -> class="is-small"
• alignment="centered" -> class="is-centered"
• boxed -> class="is-boxed"
• toggle -> class="is-toggle"
• toggle-rounded / toggleRounded -> class="is-toggle-rounded"
• fullwidth -> class="is-fullwidth"

Depends On

• No additional Enso UI dependencies.

Contributions

are welcome. Pull requests are great, but issues are good too. Thank you to all the people who already contributed to Enso!

License

MIT