Toggle Group
A set of two-state buttons that can be toggled on or off.
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 { ToggleGroup, ToggleGroupItem } = VM.require(
"uiisnear.near/widget/toggleGroup"
);
const { ToggleConf } = VM.require("uiisnear.near/widget/toggle");
if (ToggleConf == undefined) return "";
const [toggleItemClassname, setToggleItemClassname] = useState("");
if (toggleItemClassname === "")
return <ToggleConf output={setToggleItemClassname} />;
if (Tailwind == undefined) return "";<Tailwind>
<ToggleGroup type="single">
<ToggleGroupItem value="a" className={toggleItemClassname}>A</ToggleGroupItem>
<ToggleGroupItem value="b" className={toggleItemClassname}>B</ToggleGroupItem>
<ToggleGroupItem value="c" className={toggleItemClassname}>C</ToggleGroupItem>
</ToggleGroup>
</Tailwind>API Reference
ToggleGroup
Contains all the parts of a toggle group.
| Prop | Type | Default |
|---|---|---|
type* | enum | --- |
value | string | --- |
defaultValue | string | --- |
onValueChange | function | --- |
value | string[] | [] |
defaultValue | string[] | [] |
onValueChange | function | --- |
disabled | boolean | false |
rovingFocus | boolean | true |
orientation | enum | undefined |
dir | enum | --- |
loop | boolean | true |
| Data attribute | Values |
|---|---|
| [data-orientation] | "vertical" | "horizontal" |
ToggleGroupItem
An item in the group.
| Prop | Type | Default |
|---|---|---|
value* | string | --- |
disabled | boolean | --- |
| Data attribute | Values |
|---|---|
| [data-state] | "on" | "off" |
| [data-disabled] | Present when disabled |
| [data-orientation] | "vertical" | "horizontal" |
Classnames
Classnames available to customize the component.
| Function | Classname |
|---|---|
| ToggleGroup | toggleGroupClassname |