Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Account

Make changes to your account here. Click save when you're done.

Name

Username

Usage

Import the component. It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
 
const {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} = VM.require("uiisnear.near/widget/tabs");
 
if (Tailwind == undefined) return "";

<Tailwind>
  <Tabs defaultValue="account" className="w-96">
    <TabsList>
      <TabsTrigger value="account">Account</TabsTrigger>
      <TabsTrigger value="password">Password</TabsTrigger>
    </TabsList>
    <TabsContent value="account">Make changes to your account here.</TabsContent>
    <TabsContent value="password">Change your password here.</TabsContent>
  </Tabs>
</Tailwind>

API Reference

Tabs

Contains all the tabs component parts.

Prop	Type	Default
defaultValue	string	---
value	string	---
onValueChange	function	---
orientation	enum	"horizontal"
dir	enum	---
activationMode	enum	"automatic"

Data attribute	Values
[data-orientation]	"vertical" \| "horizontal"

TabsList

Contains the triggers that are aligned along the edge of the active content.

Prop	Type	Default
loop	boolean	true

Data attribute	Values
[data-orientation]	"vertical" \| "horizontal"

TabsTrigger

The button that activates its associated content.

Prop	Type	Default
value*	string	---
disabled	boolean	false

Data attribute	Values
[data-state]	"active" \| "inactive"
[data-disabled]	Present when disabled
[data-orientation]	"vertical" \| "horizontal"

TabsContent

Contains the content associated with each trigger.

Prop	Type	Default
value*	string	---
forceMount	boolean	---

Data attribute	Values
[data-state]	"active" \| "inactive"
[data-orientation]	"vertical" \| "horizontal"

Classnames

Classnames available to customize the component.

Function	Classname
TabsList	tabsListClassname
TabsTrigger	tabsTriggerClassname
TabsContent	tabsContentClassname

Table Textarea