Buma UI - Documentation

Guidelines

Design

Updated

Vue

Updated

Flutter

Updated

Anatomy

A container that holds all the buttons and organizes them into a cohesive navigation structure.
Interactive elements representing individual tabs within the side tab.
Optional graphical representation that enhances recognition of the button's purpose.
Textual description of the button's purpose

Side Tab State

Default

The default state represents a non-interacted, available tab. The tile tab has no background fill. It remains visually simple, indicating that the tab is ready to be interacted with but is not currently selected

Hover

The hover state provides a visual cue when a user’s cursor is over a tile tab. The background of the tile tab changes to background-light

Active

The active state indicates the currently selected tab. When active, the background of the tile tab (not the entire side tab) changes to green.

Disable

The disable state indicates that a tile tab is not available for interaction. The tile tab has no background fill, similar to the default state. However, it is distinguished by having 50% opacity, which visually communicates that the tab is disabled.

Usage

Usage Recommendation:

Use side tab to group related information into different categories, helping to reduce cognitive load.
Navigating between major sections of an website.
Help users navigate between different content sections within the same page, without the need to load a new page.
Help users understand the structure of the information and easily access different sections.
Typically used on the info page of the module.

Accessibility

Side Tab Terms of Switching to PWA

The side tab component can be switched to a Progressive Web App (PWA) format. This ensures that the navigation functionality remains consistent and user-friendly across both desktop and mobile platforms.

Content

Pattern

We provide a pattern that can be used to create information pages, ensuring consistency across all features.

Use case

This is an example of using side tabs on an information page.

Additionally, this is an example of using side tabs for other purposes.

Web

Usage

The package is already installed in the repository's shell. To use the component, you only need to add the following code:

<BTab :items="ItemTypes" vertical switch/>

Attributes

If there is a question mark ? in the Data Type, it means that the properties are optional.

Name	Data Type	Description	Default Value
items	`ItemTypes[]`	Array of tab items.	`none`
vertical	`boolean`	Enables vertical tabs	`False`
switch	`boolean`	Changes tabs to switch type.	`False`
small	`boolean`	Sets the tab to small size.	`false`
itemFullBlock	`boolean`	tab item occupies the full block space.	`False`
itemClass	`string`	Custom class to style the item	`none`
linkClass	`string`	Custom class to style the link	`none`
id	`string`	ID for the tab.	`none`
icon	`string`	Icon for the tab.	`none`
hint	`number`	Hint number displayed on the tab.	`none`
dropdownOption	`DropdownOption[]`	Dropdown options for the tab.	`none`

ItemTypes

The <BTab /> items must be defined using the following structure. If there is a question mark ? in the Data Type, it means that the properties are optional:

Variant	Data Type	Description	Default Value
id	`string`	Unique identifier for the tab.	`none`
text	`string`	Text displayed on the tab.	`none`
icon?	`string`	Icon for the tab	`none`
hint?	`number`	Hint number displayed	`none`
disabled?	`boolean`	Disables the tab if set to	`false`