mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-29 15:44:22 +00:00
fix
This commit is contained in:
shadcn
@@ -71,10 +71,10 @@ type BlockViewerContext = {
|
||||
resizablePanelRef: React.RefObject<PanelImperativeHandle | null> | null
|
||||
tree: ReturnType<typeof createFileTreeForRegistryItemFiles> | null
|
||||
highlightedFiles:
|
||||
| (z.infer<typeof registryItemFileSchema> & {
|
||||
highlightedContent: string
|
||||
})[]
|
||||
| null
|
||||
| (z.infer<typeof registryItemFileSchema> & {
|
||||
highlightedContent: string
|
||||
})[]
|
||||
| null
|
||||
iframeKey?: number
|
||||
setIframeKey?: React.Dispatch<React.SetStateAction<number>>
|
||||
}
|
||||
@@ -154,7 +154,7 @@ function BlockViewerToolbar({ styleName }: { styleName: Style["name"] }) {
|
||||
value={view}
|
||||
onValueChange={(value) => setView(value as "preview" | "code")}
|
||||
>
|
||||
<TabsList className="grid h-8! grid-cols-2 items-center p-1 *:data-[slot=tabs-trigger]:h-6 *:data-[slot=tabs-trigger]:rounded-sm *:data-[slot=tabs-trigger]:px-2 *:data-[slot=tabs-trigger]:text-xs rounded-lg">
|
||||
<TabsList className="grid h-8! grid-cols-2 items-center rounded-lg p-1 *:data-[slot=tabs-trigger]:h-6 *:data-[slot=tabs-trigger]:rounded-sm *:data-[slot=tabs-trigger]:px-2 *:data-[slot=tabs-trigger]:text-xs">
|
||||
<TabsTrigger value="preview">Preview</TabsTrigger>
|
||||
<TabsTrigger value="code">Code</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
@@ -96,6 +96,16 @@ Use `orientation="vertical"` for vertical toggle groups.
|
||||
|
||||
<ComponentPreview styleName="base-nova" name="toggle-group-disabled" />
|
||||
|
||||
### Custom
|
||||
|
||||
A custom toggle group example.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="base-nova"
|
||||
name="toggle-group-font-weight-selector"
|
||||
previewClassName="*:data-[slot=field]:max-w-xs"
|
||||
/>
|
||||
|
||||
## RTL
|
||||
|
||||
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
|
||||
|
||||
@@ -96,6 +96,16 @@ Use `orientation="vertical"` for vertical toggle groups.
|
||||
|
||||
<ComponentPreview styleName="radix-nova" name="toggle-group-disabled" />
|
||||
|
||||
### Custom
|
||||
|
||||
A custom toggle group example.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-nova"
|
||||
name="toggle-group-font-weight-selector"
|
||||
previewClassName="*:data-[slot=field]:max-w-xs"
|
||||
/>
|
||||
|
||||
## RTL
|
||||
|
||||
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
|
||||
|
||||
@@ -5244,6 +5244,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"toggle-group-font-weight-selector": {
|
||||
name: "toggle-group-font-weight-selector",
|
||||
filePath: "examples/radix/toggle-group-font-weight-selector.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/toggle-group-font-weight-selector")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "toggle-group-font-weight-selector"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"toggle-group-outline": {
|
||||
name: "toggle-group-outline",
|
||||
filePath: "examples/radix/toggle-group-outline.tsx",
|
||||
@@ -10862,6 +10875,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"toggle-group-font-weight-selector": {
|
||||
name: "toggle-group-font-weight-selector",
|
||||
filePath: "examples/base/toggle-group-font-weight-selector.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/toggle-group-font-weight-selector")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "toggle-group-font-weight-selector"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"toggle-group-outline": {
|
||||
name: "toggle-group-outline",
|
||||
filePath: "examples/base/toggle-group-outline.tsx",
|
||||
|
||||
61
apps/v4/examples/base/toggle-group-font-weight-selector.tsx
Normal file
61
apps/v4/examples/base/toggle-group-font-weight-selector.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Field, FieldDescription, FieldLabel } from "@/examples/base/ui/field"
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
|
||||
|
||||
export function ToggleGroupFontWeightSelector() {
|
||||
const [fontWeight, setFontWeight] = React.useState("normal")
|
||||
return (
|
||||
<Field>
|
||||
<FieldLabel>Font Weight</FieldLabel>
|
||||
<ToggleGroup
|
||||
value={[fontWeight]}
|
||||
onValueChange={(value) => setFontWeight(value[0])}
|
||||
variant="outline"
|
||||
spacing={2}
|
||||
size="lg"
|
||||
>
|
||||
<ToggleGroupItem
|
||||
value="light"
|
||||
aria-label="Light"
|
||||
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
||||
>
|
||||
<span className="text-2xl leading-none font-light">Aa</span>
|
||||
<span className="text-muted-foreground text-xs">Light</span>
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="normal"
|
||||
aria-label="Normal"
|
||||
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
||||
>
|
||||
<span className="text-2xl leading-none font-normal">Aa</span>
|
||||
<span className="text-muted-foreground text-xs">Normal</span>
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="medium"
|
||||
aria-label="Medium"
|
||||
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
||||
>
|
||||
<span className="text-2xl leading-none font-medium">Aa</span>
|
||||
<span className="text-muted-foreground text-xs">Medium</span>
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="bold"
|
||||
aria-label="Bold"
|
||||
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
||||
>
|
||||
<span className="text-2xl leading-none font-bold">Aa</span>
|
||||
<span className="text-muted-foreground text-xs">Bold</span>
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
<FieldDescription>
|
||||
Use{" "}
|
||||
<code className="bg-muted rounded-md px-1 py-0.5 font-mono">
|
||||
font-{fontWeight}
|
||||
</code>{" "}
|
||||
to set the font weight.
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
@@ -289,8 +289,8 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
|
||||
title="Toggle Sidebar"
|
||||
className={cn(
|
||||
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
|
||||
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize rtl:in-data-[side=left]:cursor-e-resize rtl:in-data-[side=right]:cursor-w-resize",
|
||||
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-e-resize",
|
||||
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize rtl:in-data-[side=left]:cursor-e-resize rtl:in-data-[side=right]:cursor-e-resize",
|
||||
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
||||
"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:start-full rtl:group-data-[collapsible=offcanvas]:-translate-x-0",
|
||||
"[[data-side=left][data-collapsible=offcanvas]_&]:-end-2",
|
||||
"[[data-side=right][data-collapsible=offcanvas]_&]:-start-2",
|
||||
@@ -565,7 +565,7 @@ function SidebarMenuAction({
|
||||
className: cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 end-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
|
||||
showOnHover &&
|
||||
"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
|
||||
"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
|
||||
className
|
||||
),
|
||||
},
|
||||
|
||||
@@ -314,7 +314,8 @@ function SidebarContentInner({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Sidebar collapsible="icon" dir={dir}>
|
||||
<Sidebar collapsible="icon" dir={dir}
|
||||
side={dir === "ltr" ? "left" : "right"}>
|
||||
<SidebarHeader>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
|
||||
62
apps/v4/examples/radix/toggle-group-font-weight-selector.tsx
Normal file
62
apps/v4/examples/radix/toggle-group-font-weight-selector.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Field, FieldDescription, FieldLabel } from "@/examples/radix/ui/field"
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/examples/radix/ui/toggle-group"
|
||||
|
||||
export function ToggleGroupFontWeightSelector() {
|
||||
const [fontWeight, setFontWeight] = React.useState("normal")
|
||||
return (
|
||||
<Field>
|
||||
<FieldLabel>Font Weight</FieldLabel>
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
value={fontWeight}
|
||||
onValueChange={(value) => setFontWeight(value)}
|
||||
variant="outline"
|
||||
spacing={2}
|
||||
size="lg"
|
||||
>
|
||||
<ToggleGroupItem
|
||||
value="light"
|
||||
aria-label="Light"
|
||||
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
||||
>
|
||||
<span className="text-2xl leading-none font-light">Aa</span>
|
||||
<span className="text-muted-foreground text-xs">Light</span>
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="normal"
|
||||
aria-label="Normal"
|
||||
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
||||
>
|
||||
<span className="text-2xl leading-none font-normal">Aa</span>
|
||||
<span className="text-muted-foreground text-xs">Normal</span>
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="medium"
|
||||
aria-label="Medium"
|
||||
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
||||
>
|
||||
<span className="text-2xl leading-none font-medium">Aa</span>
|
||||
<span className="text-muted-foreground text-xs">Medium</span>
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="bold"
|
||||
aria-label="Bold"
|
||||
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
||||
>
|
||||
<span className="text-2xl leading-none font-bold">Aa</span>
|
||||
<span className="text-muted-foreground text-xs">Bold</span>
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
<FieldDescription>
|
||||
Use{" "}
|
||||
<code className="bg-muted rounded-md px-1 py-0.5 font-mono">
|
||||
font-{fontWeight}
|
||||
</code>{" "}
|
||||
to set the font weight.
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
@@ -288,8 +288,8 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
|
||||
title="Toggle Sidebar"
|
||||
className={cn(
|
||||
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
|
||||
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize rtl:in-data-[side=left]:cursor-e-resize rtl:in-data-[side=right]:cursor-w-resize",
|
||||
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-e-resize",
|
||||
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize rtl:in-data-[side=left]:cursor-e-resize rtl:in-data-[side=right]:cursor-e-resize",
|
||||
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
||||
"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:start-full rtl:group-data-[collapsible=offcanvas]:-translate-x-0",
|
||||
"[[data-side=left][data-collapsible=offcanvas]_&]:-end-2",
|
||||
"[[data-side=right][data-collapsible=offcanvas]_&]:-start-2",
|
||||
@@ -554,7 +554,7 @@ function SidebarMenuAction({
|
||||
className={cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
showOnHover &&
|
||||
"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
|
||||
"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,7 +1,16 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import {
|
||||
Example,
|
||||
ExampleWrapper,
|
||||
} from "@/registry/bases/base/components/example"
|
||||
import {
|
||||
Field,
|
||||
FieldDescription,
|
||||
FieldLabel,
|
||||
} from "@/registry/bases/base/ui/field"
|
||||
import { Input } from "@/registry/bases/base/ui/input"
|
||||
import {
|
||||
Select,
|
||||
@@ -34,6 +43,7 @@ export default function ToggleGroupExample() {
|
||||
<ToggleGroupVerticalOutline />
|
||||
<ToggleGroupVerticalOutlineWithIcons />
|
||||
<ToggleGroupVerticalWithSpacing />
|
||||
<ToggleGroupFontWeightSelector />
|
||||
</ExampleWrapper>
|
||||
)
|
||||
}
|
||||
@@ -460,6 +470,64 @@ function ToggleGroupVerticalOutlineWithIcons() {
|
||||
)
|
||||
}
|
||||
|
||||
function ToggleGroupFontWeightSelector() {
|
||||
const [fontWeight, setFontWeight] = React.useState("normal")
|
||||
return (
|
||||
<Example title="Font Weight Selector">
|
||||
<Field>
|
||||
<FieldLabel>Font Weight</FieldLabel>
|
||||
<ToggleGroup
|
||||
value={[fontWeight]}
|
||||
onValueChange={(value) => setFontWeight(value[0])}
|
||||
variant="outline"
|
||||
spacing={2}
|
||||
size="lg"
|
||||
>
|
||||
<ToggleGroupItem
|
||||
value="light"
|
||||
aria-label="Light"
|
||||
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
||||
>
|
||||
<span className="text-2xl leading-none font-light">Aa</span>
|
||||
<span className="text-muted-foreground text-xs">Light</span>
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="normal"
|
||||
aria-label="Normal"
|
||||
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
||||
>
|
||||
<span className="text-2xl leading-none font-normal">Aa</span>
|
||||
<span className="text-muted-foreground text-xs">Normal</span>
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="medium"
|
||||
aria-label="Medium"
|
||||
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
||||
>
|
||||
<span className="text-2xl leading-none font-medium">Aa</span>
|
||||
<span className="text-muted-foreground text-xs">Medium</span>
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="bold"
|
||||
aria-label="Bold"
|
||||
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
||||
>
|
||||
<span className="text-2xl leading-none font-bold">Aa</span>
|
||||
<span className="text-muted-foreground text-xs">Bold</span>
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
<FieldDescription>
|
||||
Use{" "}
|
||||
<code className="bg-muted rounded-md px-1 py-0.5 font-mono">
|
||||
font-{fontWeight}
|
||||
</code>{" "}
|
||||
to set the font weight.
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
</Example>
|
||||
)
|
||||
}
|
||||
|
||||
function ToggleGroupVerticalWithSpacing() {
|
||||
return (
|
||||
<Example title="Vertical With Spacing">
|
||||
|
||||
@@ -1,7 +1,16 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import {
|
||||
Example,
|
||||
ExampleWrapper,
|
||||
} from "@/registry/bases/radix/components/example"
|
||||
import {
|
||||
Field,
|
||||
FieldDescription,
|
||||
FieldLabel,
|
||||
} from "@/registry/bases/radix/ui/field"
|
||||
import { Input } from "@/registry/bases/radix/ui/input"
|
||||
import {
|
||||
Select,
|
||||
@@ -34,6 +43,7 @@ export default function ToggleGroupExample() {
|
||||
<ToggleGroupVerticalOutline />
|
||||
<ToggleGroupVerticalOutlineWithIcons />
|
||||
<ToggleGroupVerticalWithSpacing />
|
||||
<ToggleGroupFontWeightSelector />
|
||||
</ExampleWrapper>
|
||||
)
|
||||
}
|
||||
@@ -471,6 +481,65 @@ function ToggleGroupVerticalOutlineWithIcons() {
|
||||
)
|
||||
}
|
||||
|
||||
function ToggleGroupFontWeightSelector() {
|
||||
const [fontWeight, setFontWeight] = React.useState("normal")
|
||||
return (
|
||||
<Example title="Font Weight Selector">
|
||||
<Field>
|
||||
<FieldLabel>Font Weight</FieldLabel>
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
value={fontWeight}
|
||||
onValueChange={(value) => setFontWeight(value)}
|
||||
variant="outline"
|
||||
spacing={2}
|
||||
size="lg"
|
||||
>
|
||||
<ToggleGroupItem
|
||||
value="light"
|
||||
aria-label="Light"
|
||||
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
||||
>
|
||||
<span className="text-2xl leading-none font-light">Aa</span>
|
||||
<span className="text-muted-foreground text-xs">Light</span>
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="normal"
|
||||
aria-label="Normal"
|
||||
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
||||
>
|
||||
<span className="text-2xl leading-none font-normal">Aa</span>
|
||||
<span className="text-muted-foreground text-xs">Normal</span>
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="medium"
|
||||
aria-label="Medium"
|
||||
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
||||
>
|
||||
<span className="text-2xl leading-none font-medium">Aa</span>
|
||||
<span className="text-muted-foreground text-xs">Medium</span>
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="bold"
|
||||
aria-label="Bold"
|
||||
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
||||
>
|
||||
<span className="text-2xl leading-none font-bold">Aa</span>
|
||||
<span className="text-muted-foreground text-xs">Bold</span>
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
<FieldDescription>
|
||||
Use{" "}
|
||||
<code className="bg-muted rounded-md px-1 py-0.5 font-mono">
|
||||
font-{fontWeight}
|
||||
</code>{" "}
|
||||
to set the font weight.
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
</Example>
|
||||
)
|
||||
}
|
||||
|
||||
function ToggleGroupVerticalWithSpacing() {
|
||||
return (
|
||||
<Example title="Vertical With Spacing">
|
||||
|
||||
Reference in New Issue
Block a user