Xing Tab

Tab component

Source on GitHub
Rendered
Default.vue

Content 1

Content 2

Content 3

Rendered
Ios.vue

Content 1

Content 2

Content 3

Rendered
Pill.vue

Content 1

Content 2

Content 3

Rendered
Skateboard.vue

Content 1

Content 2

Content 3

Rendered
Dropdown.vue

Content 1

Content 2

Content 3

Rendered
Disable.vue

Content 1

Content 2

Content 3

Content 1

Content 2

Content 3

npm
pnpm
bun
npx nidexingg-ui add tab

🦄 Features

  • Offers a variety of customization options to enhance the user experience, including different styles and configurations for tabs.
  • Incorporates XingIcon making the component more user-friendly and customizable.

🧑‍🏫 Usage Guide

Props

XingTab

variantstring
default
Specifies the visual style of the tab component.
mainrequiredstring
Identifies the currently active tab by its ID.
disablestring
Allows disabling a specific tab or all tabs at once.

TabItem

idrequiredstring
Unique identifier for each tab item.
namerequiredstring
Display name for the tab item.
iconstring
Optional icon to display alongside the tab name.

🧑‍💻 Maintainers and Credits

Xing Kbd
The keyboard shortcut key to display on your app.
Xing Textarea
Simple textarea with customizations