Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: resizable demos not working (#399)

Browse Source
This commit is contained in:
Davlatov Shahzod 2024-03-08 19:13:59 +03:00 committed by GitHub
parent 86a0ef2854
commit 7e8d658c21
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 32 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/www/src/lib/registry/default/example/ResizableDemo.vue
View File

@ -8,24 +8,25 @@ import {
<template> <template>
<ResizablePanelGroup <ResizablePanelGroup
id="demo-group-1"
direction="horizontal" direction="horizontal"
class="max-w-md rounded-lg border" class="max-w-md rounded-lg border"
> >
<ResizablePanel :default-size="50"> <ResizablePanel id="demo-panel-1" :default-size="50">
<div class="flex h-[200px] items-center justify-center p-6"> <div class="flex h-[200px] items-center justify-center p-6">
<span class="font-semibold">One</span> <span class="font-semibold">One</span>
</div> </div>
</ResizablePanel> </ResizablePanel>
<ResizableHandle /> <ResizableHandle id="demo-handle-1" />
<ResizablePanel :default-size="50"> <ResizablePanel id="demo-panel-2" :default-size="50">
<ResizablePanelGroup direction="vertical"> <ResizablePanelGroup id="demo-group-2" direction="vertical">
<ResizablePanel :default-size="25"> <ResizablePanel id="demo-panel-3" :default-size="25">
<div class="flex h-full items-center justify-center p-6"> <div class="flex h-full items-center justify-center p-6">
<span class="font-semibold">Two</span> <span class="font-semibold">Two</span>
</div> </div>
</ResizablePanel> </ResizablePanel>
<ResizableHandle /> <ResizableHandle id="demo-handle-2" />
<ResizablePanel :default-size="75"> <ResizablePanel id="demo-panel-4" :default-size="75">
<div class="flex h-full items-center justify-center p-6"> <div class="flex h-full items-center justify-center p-6">
<span class="font-semibold">Three</span> <span class="font-semibold">Three</span>
</div> </div>

7
apps/www/src/lib/registry/default/example/ResizableHandleDemo.vue
View File

@ -8,16 +8,17 @@ import {
<template> <template>
<ResizablePanelGroup <ResizablePanelGroup
id="handle-demo-group-1"
direction="horizontal" direction="horizontal"
class="min-h-[200px] max-w-md rounded-lg border" class="min-h-[200px] max-w-md rounded-lg border"
> >
<ResizablePanel :default-size="25"> <ResizablePanel id="handle-demo-panel-1" :default-size="25">
<div class="flex h-full items-center justify-center p-6"> <div class="flex h-full items-center justify-center p-6">
<span class="font-semibold">Sidebar</span> <span class="font-semibold">Sidebar</span>
</div> </div>
</ResizablePanel> </ResizablePanel>
<ResizableHandle with-handle /> <ResizableHandle id="handle-demo-handle-1" with-handle />
<ResizablePanel :default-size="75"> <ResizablePanel id="handle-demo-panel-2" :default-size="75">
<div class="flex h-full items-center justify-center p-6"> <div class="flex h-full items-center justify-center p-6">
<span class="font-semibold">Content</span> <span class="font-semibold">Content</span>
</div> </div>

7
apps/www/src/lib/registry/default/example/ResizableVerticalDemo.vue
View File

@ -8,16 +8,17 @@ import {
<template> <template>
<ResizablePanelGroup <ResizablePanelGroup
id="vertical-demo-group-1"
direction="vertical" direction="vertical"
class="min-h-[200px] max-w-md rounded-lg border" class="min-h-[200px] max-w-md rounded-lg border"
> >
<ResizablePanel :default-size="25"> <ResizablePanel id="vertical-demo-panel-1" :default-size="25">
<div class="flex h-full items-center justify-center p-6"> <div class="flex h-full items-center justify-center p-6">
<span class="font-semibold">Header</span> <span class="font-semibold">Header</span>
</div> </div>
</ResizablePanel> </ResizablePanel>
<ResizableHandle /> <ResizableHandle id="vertical-demo-handle-1" />
<ResizablePanel :default-size="75"> <ResizablePanel id="vertical-demo-panel-2" :default-size="75">
<div class="flex h-full items-center justify-center p-6"> <div class="flex h-full items-center justify-center p-6">
<span class="font-semibold">Content</span> <span class="font-semibold">Content</span>
</div> </div>

15
apps/www/src/lib/registry/new-york/example/ResizableDemo.vue
View File

@ -8,24 +8,25 @@ import {
<template> <template>
<ResizablePanelGroup <ResizablePanelGroup
id="demo-group-1"
direction="horizontal" direction="horizontal"
class="max-w-md rounded-lg border" class="max-w-md rounded-lg border"
> >
<ResizablePanel :default-size="50"> <ResizablePanel id="demo-panel-1" :default-size="50">
<div class="flex h-[200px] items-center justify-center p-6"> <div class="flex h-[200px] items-center justify-center p-6">
<span class="font-semibold">One</span> <span class="font-semibold">One</span>
</div> </div>
</ResizablePanel> </ResizablePanel>
<ResizableHandle /> <ResizableHandle id="demo-handle-1" />
<ResizablePanel :default-size="50"> <ResizablePanel id="demo-panel-2" :default-size="50">
<ResizablePanelGroup direction="vertical"> <ResizablePanelGroup id="demo-group-2" direction="vertical">
<ResizablePanel :default-size="25"> <ResizablePanel id="demo-panel-3" :default-size="25">
<div class="flex h-full items-center justify-center p-6"> <div class="flex h-full items-center justify-center p-6">
<span class="font-semibold">Two</span> <span class="font-semibold">Two</span>
</div> </div>
</ResizablePanel> </ResizablePanel>
<ResizableHandle /> <ResizableHandle id="demo-handle-2" />
<ResizablePanel :default-size="75"> <ResizablePanel id="demo-panel-4" :default-size="75">
<div class="flex h-full items-center justify-center p-6"> <div class="flex h-full items-center justify-center p-6">
<span class="font-semibold">Three</span> <span class="font-semibold">Three</span>
</div> </div>

7
apps/www/src/lib/registry/new-york/example/ResizableHandleDemo.vue
View File

@ -8,16 +8,17 @@ import {
<template> <template>
<ResizablePanelGroup <ResizablePanelGroup
id="handle-demo-group-1"
direction="horizontal" direction="horizontal"
class="min-h-[200px] max-w-md rounded-lg border" class="min-h-[200px] max-w-md rounded-lg border"
> >
<ResizablePanel :default-size="25"> <ResizablePanel id="handle-demo-panel-1" :default-size="25">
<div class="flex h-full items-center justify-center p-6"> <div class="flex h-full items-center justify-center p-6">
<span class="font-semibold">Sidebar</span> <span class="font-semibold">Sidebar</span>
</div> </div>
</ResizablePanel> </ResizablePanel>
<ResizableHandle with-handle /> <ResizableHandle id="handle-demo-handle-1" with-handle />
<ResizablePanel :default-size="75"> <ResizablePanel id="handle-demo-panel-2" :default-size="75">
<div class="flex h-full items-center justify-center p-6"> <div class="flex h-full items-center justify-center p-6">
<span class="font-semibold">Content</span> <span class="font-semibold">Content</span>
</div> </div>

7
apps/www/src/lib/registry/new-york/example/ResizableVerticalDemo.vue
View File

@ -8,16 +8,17 @@ import {
<template> <template>
<ResizablePanelGroup <ResizablePanelGroup
id="vertical-demo-group-1"
direction="vertical" direction="vertical"
class="min-h-[200px] max-w-md rounded-lg border" class="min-h-[200px] max-w-md rounded-lg border"
> >
<ResizablePanel :default-size="25"> <ResizablePanel id="vertical-demo-panel-1" :default-size="25">
<div class="flex h-full items-center justify-center p-6"> <div class="flex h-full items-center justify-center p-6">
<span class="font-semibold">Header</span> <span class="font-semibold">Header</span>
</div> </div>
</ResizablePanel> </ResizablePanel>
<ResizableHandle /> <ResizableHandle id="vertical-demo-handle-1" />
<ResizablePanel :default-size="75"> <ResizablePanel id="vertical-demo-panel-2" :default-size="75">
<div class="flex h-full items-center justify-center p-6"> <div class="flex h-full items-center justify-center p-6">
<span class="font-semibold">Content</span> <span class="font-semibold">Content</span>
</div> </div>