docs: improve the installation section for each component (#50)
* docs: improve the installation section for each component * docs: improve the installation section for each component --------- Co-authored-by: Selemondev <selemondev@Selemondevs-MacBook-Pro.local>
This commit is contained in:
Selemondev
GitHub
parent
e9634a9f5e
commit
d5bb3a8a7a
|
|
@ -11,5 +11,6 @@ module.exports = {
|
|||
'symbol-description': 'off',
|
||||
'no-console': 'warn',
|
||||
'no-tabs': 'off',
|
||||
'no-invalid-character': 'off',
|
||||
},
|
||||
}
|
||||
|
|
|
|||
39
apps/www/.vitepress/theme/components/TabPreview.vue
Normal file
39
apps/www/.vitepress/theme/components/TabPreview.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<script setup lang="ts">
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
name: string
|
||||
align?: 'center' | 'start' | 'end'
|
||||
sfcTsCode?: string
|
||||
sfcTsHtml?: string
|
||||
}>(), { align: 'center' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Tabs :default-value="props.name" class="relative mr-auto w-full">
|
||||
<div class="flex items-center justify-between pb-3">
|
||||
<TabsList class="w-full justify-start rounded-none border-b bg-transparent p-0">
|
||||
<TabsTrigger
|
||||
value="CLI"
|
||||
class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
|
||||
>
|
||||
CLI
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="Manual"
|
||||
class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
|
||||
>
|
||||
Manual
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
<TabsContent value="CLI" class="relative space-y-10">
|
||||
<slot name="CLI" />
|
||||
</TabsContent>
|
||||
<TabsContent value="Manual">
|
||||
<slot name="Manual" />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
export { default as ComponentPreview } from './ComponentPreview.vue'
|
||||
export { default as TabPreview } from './TabPreview.vue'
|
||||
export { default as Callout } from './Callout.vue'
|
||||
export { default as LinkedCard } from './LinkedCard.vue'
|
||||
export { default as ManualInstall } from './ManualInstall.vue'
|
||||
|
|
|
|||
|
|
@ -694,99 +694,99 @@ export const Index = {
|
|||
name: 'TypographyBlockquote',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyBlockquote.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyBlockquote.vue'],
|
||||
component: () => import('../src/lib/registry/default/example/TypographyBlockquote.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TypographyBlockquote.vue'],
|
||||
},
|
||||
TypographyDemo: {
|
||||
name: 'TypographyDemo',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyDemo.vue'],
|
||||
component: () => import('../src/lib/registry/default/example/TypographyDemo.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TypographyDemo.vue'],
|
||||
},
|
||||
TypographyH1: {
|
||||
name: 'TypographyH1',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyH1.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyH1.vue'],
|
||||
component: () => import('../src/lib/registry/default/example/TypographyH1.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TypographyH1.vue'],
|
||||
},
|
||||
TypographyH2: {
|
||||
name: 'TypographyH2',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyH2.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyH2.vue'],
|
||||
component: () => import('../src/lib/registry/default/example/TypographyH2.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TypographyH2.vue'],
|
||||
},
|
||||
TypographyH3: {
|
||||
name: 'TypographyH3',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyH3.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyH3.vue'],
|
||||
component: () => import('../src/lib/registry/default/example/TypographyH3.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TypographyH3.vue'],
|
||||
},
|
||||
TypographyH4: {
|
||||
name: 'TypographyH4',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyH4.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyH4.vue'],
|
||||
component: () => import('../src/lib/registry/default/example/TypographyH4.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TypographyH4.vue'],
|
||||
},
|
||||
TypographyInlineCode: {
|
||||
name: 'TypographyInlineCode',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyInlineCode.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyInlineCode.vue'],
|
||||
component: () => import('../src/lib/registry/default/example/TypographyInlineCode.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TypographyInlineCode.vue'],
|
||||
},
|
||||
TypographyLarge: {
|
||||
name: 'TypographyLarge',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyLarge.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyLarge.vue'],
|
||||
component: () => import('../src/lib/registry/default/example/TypographyLarge.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TypographyLarge.vue'],
|
||||
},
|
||||
TypographyLead: {
|
||||
name: 'TypographyLead',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyLead.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyLead.vue'],
|
||||
component: () => import('../src/lib/registry/default/example/TypographyLead.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TypographyLead.vue'],
|
||||
},
|
||||
TypographyList: {
|
||||
name: 'TypographyList',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyList.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyList.vue'],
|
||||
component: () => import('../src/lib/registry/default/example/TypographyList.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TypographyList.vue'],
|
||||
},
|
||||
TypographyMuted: {
|
||||
name: 'TypographyMuted',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyMuted.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyMuted.vue'],
|
||||
component: () => import('../src/lib/registry/default/example/TypographyMuted.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TypographyMuted.vue'],
|
||||
},
|
||||
TypographyP: {
|
||||
name: 'TypographyP',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyP.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyP.vue'],
|
||||
component: () => import('../src/lib/registry/default/example/TypographyP.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TypographyP.vue'],
|
||||
},
|
||||
TypographySmall: {
|
||||
name: 'TypographySmall',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographySmall.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographySmall.vue'],
|
||||
component: () => import('../src/lib/registry/default/example/TypographySmall.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TypographySmall.vue'],
|
||||
},
|
||||
TypographyTable: {
|
||||
name: 'TypographyTable',
|
||||
type: 'components:example',
|
||||
registryDependencies: [],
|
||||
component: () => import('../src/lib/registry/new-york/example/TypographyTable.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyTable.vue'],
|
||||
component: () => import('../src/lib/registry/default/example/TypographyTable.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TypographyTable.vue'],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,38 +8,204 @@ primitive: https://www.radix-vue.com/components/accordion.html
|
|||
|
||||
<ComponentPreview name="AccordionDemo" class="[&_.accordion]:sm:max-w-[70%]" />
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
<Steps>
|
||||
|
||||
### Run the following command
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add accordion
|
||||
```
|
||||
|
||||
<ManualInstall>
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
1. Install `radix-vue`:
|
||||
Add the following animations to your `tailwind.config.js` file:
|
||||
|
||||
```js title="tailwind.config.js" {5-18}
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
keyframes: {
|
||||
'accordion-down': {
|
||||
from: { height: 0 },
|
||||
to: { height: 'var(--radix-accordion-content-height)' },
|
||||
},
|
||||
'accordion-up': {
|
||||
from: { height: 'var(--radix-accordion-content-height)' },
|
||||
to: { height: 0 },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'accordion-down': 'accordion-down 0.2s ease-out',
|
||||
'accordion-up': 'accordion-up 0.2s ease-out',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
|
||||
<template #Manual>
|
||||
|
||||
<Steps>
|
||||
|
||||
### Install the following dependencies:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
|
||||
npm install --save-dev @iconify/vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from 'radix-vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
const accordionItems = [
|
||||
{
|
||||
value: 'item-1',
|
||||
title: 'Is it accessible?',
|
||||
content: 'Yes. It adheres to the WAI-ARIA design pattern.',
|
||||
},
|
||||
{
|
||||
value: 'item-2',
|
||||
title: 'Is it unstyled?',
|
||||
content: 'Yes. It\'s unstyled by default, giving you freedom over the look and feel.',
|
||||
},
|
||||
{
|
||||
value: 'item-3',
|
||||
title: 'Can it be animated?',
|
||||
content: 'Yes! You can use the transition prop to configure the animation.',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AccordionRoot
|
||||
class="bg-mauve6 w-[300px] rounded-md shadow-[0_2px_10px] shadow-black/5"
|
||||
default-value="'item-1'"
|
||||
type="single"
|
||||
:collapsible="true"
|
||||
>
|
||||
<template v-for="item in accordionItems" :key="item.value">
|
||||
<AccordionItem class="accordion-item" :value="item.value">
|
||||
<AccordionHeader class="flex">
|
||||
<AccordionTrigger class="accordion-trigger group">
|
||||
<span>{{ item.title }}</span>
|
||||
<Icon
|
||||
icon="radix-icons:chevron-down"
|
||||
class="text-green10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
|
||||
aria-hidden
|
||||
/>
|
||||
</AccordionTrigger>
|
||||
</AccordionHeader>
|
||||
<AccordionContent class="accordion-content">
|
||||
<div class="px-5 py-4">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</template>
|
||||
</AccordionRoot>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.accordion-item {
|
||||
@apply focus-within:shadow-mauve12 mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b focus-within:relative focus-within:z-10 focus-within:shadow-[0_0_0_2px];
|
||||
}
|
||||
|
||||
.accordion-trigger {
|
||||
@apply text-grass11 shadow-mauve6 hover:bg-mauve2 flex h-[45px] flex-1 cursor-default items-center justify-between bg-white px-5 text-[15px] leading-none shadow-[0_1px_0] outline-none;
|
||||
}
|
||||
|
||||
.accordion-content {
|
||||
@apply text-mauve11 bg-mauve2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[15px];
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following animations to your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { green, grass, mauve } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...mauve,
|
||||
...green,
|
||||
...grass,
|
||||
},
|
||||
keyframes: {
|
||||
slideDown: {
|
||||
from: { height: 0 },
|
||||
to: { height: 'var(--radix-accordion-content-height)' },
|
||||
},
|
||||
slideUp: {
|
||||
from: { height: 'var(--radix-accordion-content-height)' },
|
||||
to: { height: 0 },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
slideDown: 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
slideUp: 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
|
||||
</script>
|
||||
|
||||
<AccordionRoot>
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger>Is it accessible?</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
Yes. It adheres to the WAI-ARIA design pattern.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</AccordionRoot>
|
||||
<template>
|
||||
<Accordion type="single" collapsible class="w-full">
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger>Is it accessible?</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
Yes. It adheres to the WAI-ARIA design pattern.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
<AccordionItem value="item-2">
|
||||
<AccordionTrigger>Is it styled?</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
Yes. It comes with default styles that matches the other
|
||||
components' aesthetic.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
<AccordionItem value="item-3">
|
||||
<AccordionTrigger>Is it animated?</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
Yes. It's animated by default, but you can disable it if you prefer.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -8,25 +8,136 @@ primitive: https://www.radix-vue.com/components/alert-dialog.html
|
|||
|
||||
<ComponentPreview name="AlertDialogDemo" />
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add alert-dialog
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependency:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogPortal,
|
||||
AlertDialogRoot,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from 'radix-vue'
|
||||
|
||||
function handleAction() {
|
||||
alert('clicked action button!')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AlertDialogRoot>
|
||||
<AlertDialogTrigger
|
||||
class="bg-white text-grass11 font-semibold hover:bg-white/90 shadow-sm inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] leading-none outline-none focus:shadow-[0_0_0_2px] focus:shadow-black transition-all"
|
||||
>
|
||||
Delete account
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay class="alert-dialog-overlay" />
|
||||
<AlertDialogContent
|
||||
class="alert-dialog-content"
|
||||
>
|
||||
<AlertDialogTitle class="text-mauve12 m-0 text-[17px] font-semibold">
|
||||
Are you absolutely sure?
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription class="text-mauve11 mt-4 mb-5 text-[15px] leading-normal">
|
||||
This action cannot be undone. This will permanently delete your account and remove your data from our servers.
|
||||
</AlertDialogDescription>
|
||||
<div class="flex justify-end gap-[25px]">
|
||||
<AlertDialogCancel
|
||||
class="text-mauve11 bg-mauve4 hover:bg-mauve5 focus:shadow-mauve7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none outline-none focus:shadow-[0_0_0_2px]"
|
||||
>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
class="text-red11 bg-red4 hover:bg-red5 focus:shadow-red7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none outline-none focus:shadow-[0_0_0_2px]"
|
||||
@click="handleAction"
|
||||
>
|
||||
Yes, delete account
|
||||
</AlertDialogAction>
|
||||
</div>
|
||||
</AlertDialogContent>
|
||||
</AlertDialogPortal>
|
||||
</AlertDialogRoot>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.alert-dialog-overlay {
|
||||
@apply bg-blackA9 data-[state=open]:animate-overlayShow fixed inset-0 z-20;
|
||||
}
|
||||
|
||||
.alert-dialog-content {
|
||||
@apply z-20 text-[15px] data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following animations to your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { mauve, green, grass, blackA } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...mauve,
|
||||
...green,
|
||||
...grass,
|
||||
...blackA,
|
||||
},
|
||||
keyframes: {
|
||||
overlayShow: {
|
||||
from: { opacity: 0 },
|
||||
to: { opacity: 1 },
|
||||
},
|
||||
contentShow: {
|
||||
from: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
|
||||
to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -42,7 +153,7 @@ import {
|
|||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from '@/lib/registry/default/ui/alert-dialog'
|
||||
} from '@/components/ui/alert-dialog'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -6,30 +6,27 @@ description: Displays a callout for user attention.
|
|||
|
||||
<ComponentPreview name="AlertDemo" />
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add alert
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
#### Coming soon...
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/default/ui/alert'
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -10,33 +10,82 @@ primitive: https://www.radix-vue.com/components/aspect-ratio.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add aspect-ratio
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependency:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { AspectRatio } from 'radix-vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="shadow-blackA7 w-full sm:w-[300px] overflow-hidden rounded-md shadow-[0_2px_10px]">
|
||||
<AspectRatio :ratio="16 / 9">
|
||||
<img
|
||||
class="h-full w-full object-cover"
|
||||
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
|
||||
alt="Landscape photograph by Tobias Tullius"
|
||||
>
|
||||
</AspectRatio>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following to your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { AspectRatio } from '@/lib/registry/default/ui/aspect-ratio'
|
||||
import { AspectRatio } from '@/components/ui/aspect-ratio'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AspectRatio>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
|
||||
>
|
||||
</AspectRatio>
|
||||
<div class="w-[450px]">
|
||||
<AspectRatio :ratio="16 / 9">
|
||||
<img src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80">
|
||||
</AspectRatio>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -11,26 +11,100 @@ primitive: https://www.radix-vue.com/components/avatar.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add avatar
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependency:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { AvatarFallback, AvatarImage, AvatarRoot } from 'radix-vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex gap-5">
|
||||
<AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
|
||||
<AvatarImage
|
||||
class="h-full w-full rounded-[inherit] object-cover"
|
||||
src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
|
||||
alt="Colm Tuite"
|
||||
/>
|
||||
<AvatarFallback
|
||||
class="text-grass11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
|
||||
:delay-ms="600"
|
||||
>
|
||||
CT
|
||||
</AvatarFallback>
|
||||
</AvatarRoot>
|
||||
<AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
|
||||
<AvatarImage
|
||||
class="h-full w-full rounded-[inherit] object-cover"
|
||||
src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
|
||||
alt="Pedro Duarte"
|
||||
/>
|
||||
<AvatarFallback
|
||||
class="text-grass11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
|
||||
:delay-ms="600"
|
||||
>
|
||||
JD
|
||||
</AvatarFallback>
|
||||
</AvatarRoot>
|
||||
<AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
|
||||
<AvatarFallback class="text-grass11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium">
|
||||
PD
|
||||
</AvatarFallback>
|
||||
</AvatarRoot>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following to your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA, grass } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...grass,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/avatar'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -6,29 +6,53 @@ description: Displays a badge or a component that looks like a badge.
|
|||
|
||||
<ComponentPreview name="BadgeDemo" />
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add badge
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { VariantProps } from 'class-variance-authority'
|
||||
import { badgeVariants } from '.'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}
|
||||
|
||||
interface Props {
|
||||
variant?: BadgeVariantProps['variant']
|
||||
}
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn(badgeVariants({ variant }), $attrs.class ?? '')">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Badge } from '@/lib/registry/default/ui/badge'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -8,26 +8,55 @@ description: Displays a button or a component that looks like a button.
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add button
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { buttonVariants } from '.'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface Props {
|
||||
variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
|
||||
size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
|
||||
as?: string
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
as: 'button',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component
|
||||
:is="as"
|
||||
:class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
|
||||
>
|
||||
<slot />
|
||||
</component>
|
||||
</template>
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
</Steps>
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import { Button } from '@/components/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -12,26 +12,151 @@ The `Calendar` component is built on top of [VCalendar](https://vcalendar.io/get
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add calendar
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependency
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
npm install v-calendar
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import type { Calendar } from 'v-calendar'
|
||||
import { DatePicker } from 'v-calendar'
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
|
||||
import { computed, nextTick, onMounted, ref } from 'vue'
|
||||
import { buttonVariants } from '../button'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = withDefaults(defineProps< {
|
||||
modelValue?: string | number | Date | Partial<{
|
||||
start: Date
|
||||
end: Date
|
||||
}>
|
||||
modelModifiers?: object
|
||||
columns?: number
|
||||
type?: 'single' | 'range'
|
||||
}>(), {
|
||||
type: 'single',
|
||||
columns: 1,
|
||||
})
|
||||
const emits = defineEmits<{
|
||||
(e: 'update:modelValue', payload: typeof props.modelValue): void
|
||||
}>()
|
||||
|
||||
const modelValue = useVModel(props, 'modelValue', emits, {
|
||||
passive: true,
|
||||
})
|
||||
|
||||
const datePicker = ref<InstanceType<typeof DatePicker>>()
|
||||
// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.
|
||||
const calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)
|
||||
|
||||
function handleNav(direction: 'prev' | 'next') {
|
||||
if (!calendarRef.value)
|
||||
return
|
||||
|
||||
if (direction === 'prev')
|
||||
calendarRef.value.movePrev()
|
||||
else calendarRef.value.moveNext()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick()
|
||||
await nextTick()
|
||||
if (modelValue.value instanceof Date && calendarRef.value)
|
||||
calendarRef.value.focusDate(modelValue.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<div class="absolute top-3 flex justify-between w-full px-4">
|
||||
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
|
||||
<ChevronLeft class="w-4 h-4" />
|
||||
</button>
|
||||
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
|
||||
<ChevronRight class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<DatePicker ref="datePicker" v-model="modelValue" :model-modifiers="modelModifiers" class="calendar" trim-weeks :transition="'none'" :columns="columns" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="postcss">
|
||||
.calendar {
|
||||
@apply p-3 text-center;
|
||||
}
|
||||
.calendar .vc-pane-layout {
|
||||
@apply grid gap-4;
|
||||
}
|
||||
.calendar .vc-title {
|
||||
@apply text-sm font-medium pointer-events-none;
|
||||
}
|
||||
.calendar .vc-pane-header-wrapper {
|
||||
@apply hidden;
|
||||
}
|
||||
.calendar .vc-weeks {
|
||||
@apply mt-4;
|
||||
}
|
||||
.calendar .vc-weekdays {
|
||||
@apply flex;
|
||||
}
|
||||
.calendar .vc-weekday {
|
||||
@apply text-muted-foreground rounded-md w-9 font-normal text-[0.8rem];
|
||||
}
|
||||
.calendar .vc-weeks {
|
||||
@apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
|
||||
}
|
||||
.calendar .vc-day:has(.vc-highlights) {
|
||||
@apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;
|
||||
}
|
||||
.calendar .vc-day-content {
|
||||
@apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;
|
||||
}
|
||||
.calendar .vc-day-content:not(.vc-highlight-content-light) {
|
||||
@apply rounded-md;
|
||||
}
|
||||
.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),
|
||||
.calendar .vc-disabled {
|
||||
@apply text-muted-foreground opacity-50;
|
||||
}
|
||||
.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
|
||||
}
|
||||
.calendar .vc-highlight-content-light {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
</Steps>
|
||||
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Calendar } from '@/lib/registry/default/ui/calendar'
|
||||
import { Calendar } from '@/components/ui/calendar'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -6,23 +6,21 @@ description: Displays a card with header, content, and footer.
|
|||
|
||||
<ComponentPreview name="CardDemo" />
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add card
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
#### Coming soon...
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -35,7 +33,7 @@ import {
|
|||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/lib/registry/default/ui/card'
|
||||
} from '@/components/ui/card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -11,29 +11,95 @@ primitive: https://www.radix-vue.com/components/checkbox.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add checkbox
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependencies:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
|
||||
npm install --save-dev @iconify/vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
const checkboxOne = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-2.5">
|
||||
<label class="flex flex-row gap-4 items-center [&>.checkbox]:hover:bg-neutral-100">
|
||||
<CheckboxRoot
|
||||
v-model="checkboxOne"
|
||||
class="shadow-blackA7 hover:bg-green3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus-within:shadow-[0_0_0_2px_black]"
|
||||
>
|
||||
<CheckboxIndicator class="bg-white h-full w-full rounded flex items-center justify-center">
|
||||
<Icon icon="radix-icons:check" class="h-3.5 w-3.5 text-grass11" />
|
||||
</CheckboxIndicator>
|
||||
</CheckboxRoot>
|
||||
<span class="select-none text-white">Accept terms and conditions.</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following to your tailwind.config.js file:
|
||||
|
||||
```ts
|
||||
const { blackA, green } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...green,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Checkbox } from '@/lib/registry/default/ui/checkbox'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Checkbox id="terms" />
|
||||
</template>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### With text
|
||||
|
||||
<ComponentPreview name="CheckboxDisabled" />
|
||||
|
|
@ -8,47 +8,116 @@ primitive: https://www.radix-vue.com/components/collapsible.html
|
|||
|
||||
<ComponentPreview name="CollapsibleDemo" />
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add collapsible
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependencies:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
|
||||
npm install --save-dev @iconify/vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
const rootOpen = ref(false)
|
||||
const rootDisabled = ref(false)
|
||||
const open = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CollapsibleRoot v-model:open="rootOpen" class="w-[300px]" :disabled="rootDisabled">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<span class="text-white text-[15px] leading-[25px]"> @peduarte starred 3 repos </span>
|
||||
<CollapsibleTrigger
|
||||
class="cursor-default rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-grass11 shadow-[0_2px_10px] shadow-blackA7 outline-none data-[state=closed]:bg-white data-[state=open]:bg-green3 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black"
|
||||
>
|
||||
<Icon v-if="rootOpen" icon="radix-icons:cross-2" class="h-3.5 w-3.5" />
|
||||
<Icon v-else icon="radix-icons:row-spacing" class="h-3.5 w-3.5" />
|
||||
</CollapsibleTrigger>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
|
||||
<span class="text-grass11 text-[15px] leading-[25px]">@radix-vue/radix-vue</span>
|
||||
</div>
|
||||
|
||||
<CollapsibleContent>
|
||||
<div class="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
|
||||
<span class="text-grass11 text-[15px] leading-[25px]">@vuejs/core</span>
|
||||
</div>
|
||||
<div class="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
|
||||
<span class="text-grass11 text-[15px] leading-[25px]">@radix-ui/primitives</span>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</CollapsibleRoot>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following animations to your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA, green, grass } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...green,
|
||||
...grass,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from '@/lib/registry/default/ui/collapsible'
|
||||
} from '@/components/ui/collapsible'
|
||||
|
||||
const isOpen = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Collapsible
|
||||
v-model:open="isOpen"
|
||||
>
|
||||
<CollapsibleTrigger>
|
||||
Trigger
|
||||
</CollapsibleTrigger>
|
||||
<Collapsible v-model:open="isOpen">
|
||||
<CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
Content
|
||||
Yes. Free to use for personal and commercial projects. No attribution
|
||||
required.
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,123 @@ The Combobox is built using a composition of the `<Popover />` and the `<Command
|
|||
|
||||
See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
|
||||
|
||||
<TabPreview name="Manual">
|
||||
<template #Manual>
|
||||
|
||||
<Steps>
|
||||
|
||||
### Install the following dependencies:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
|
||||
npm install --save-dev @iconify/vue
|
||||
```
|
||||
|
||||
### Copy and paste the following code into your project:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from 'radix-vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
const v = ref('')
|
||||
const options = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
|
||||
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ComboboxRoot v-model="v" class="relative">
|
||||
<ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
|
||||
<ComboboxInput class="bg-transparent outline-none text-grass11 h-full selection:bg-grass5 placeholder-mauve8" placeholder="Placeholder..." />
|
||||
<ComboboxTrigger>
|
||||
<Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
|
||||
</ComboboxTrigger>
|
||||
</ComboboxHeader>
|
||||
|
||||
<ComboboxContent class="absolute z-10 w-full mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
|
||||
<ComboboxViewport class="p-[5px]">
|
||||
<ComboboxEmpty class="text-mauve8 text-xs font-medium text-center py-2" />
|
||||
|
||||
<ComboboxGroup>
|
||||
<ComboboxLabel class="px-[25px] text-xs leading-[25px] text-mauve11">
|
||||
Fruits
|
||||
</ComboboxLabel>
|
||||
|
||||
<ComboboxItem
|
||||
v-for="(option, index) in options" :key="index"
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-grass9 data-[highlighted]:text-grass1"
|
||||
:value="option"
|
||||
>
|
||||
<ComboboxItemIndicator
|
||||
class="absolute left-0 w-[25px] inline-flex items-center justify-center"
|
||||
>
|
||||
<Icon icon="radix-icons:check" />
|
||||
</ComboboxItemIndicator>
|
||||
<span>
|
||||
{{ option }}
|
||||
</span>
|
||||
</ComboboxItem>
|
||||
<ComboboxSeparator class="h-[1px] bg-grass6 m-[5px]" />
|
||||
</ComboboxGroup>
|
||||
|
||||
<ComboboxGroup>
|
||||
<ComboboxLabel
|
||||
class="px-[25px] text-xs leading-[25px] text-mauve11"
|
||||
>
|
||||
Vegetables
|
||||
</ComboboxLabel>
|
||||
<ComboboxItem
|
||||
v-for="(option, index) in vegetables" :key="index"
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-grass9 data-[highlighted]:text-grass1"
|
||||
:value="option"
|
||||
>
|
||||
<ComboboxItemIndicator
|
||||
class="absolute left-0 w-[25px] inline-flex items-center justify-center"
|
||||
>
|
||||
<Icon icon="radix-icons:check" />
|
||||
</ComboboxItemIndicator>
|
||||
<span>
|
||||
{{ option }}
|
||||
</span>
|
||||
</ComboboxItem>
|
||||
</ComboboxGroup>
|
||||
</ComboboxViewport>
|
||||
</ComboboxContent>
|
||||
</ComboboxRoot>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following animations to your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...green,
|
||||
...grass,
|
||||
...mauve,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
|
|
@ -20,19 +137,19 @@ import { Check, ChevronsUpDown } from 'lucide-vue-next'
|
|||
|
||||
import { ref } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
} from '@/lib/registry/default/ui/command'
|
||||
} from '@/components/ui/command'
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/lib/registry/default/ui/popover'
|
||||
} from '@/components/ui/popover'
|
||||
|
||||
const frameworks = [
|
||||
{ value: 'next.js', label: 'Next.js' },
|
||||
|
|
|
|||
|
|
@ -12,20 +12,19 @@ primitive: https://www.radix-vue.com/components/popover.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add command
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
#### Coming soon...
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
|
|||
|
|
@ -8,24 +8,365 @@ primitive: https://www.radix-vue.com/components/context-menu.html
|
|||
|
||||
<ComponentPreview name="ContextMenuDemo" />
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add context-menu
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependencies:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
|
||||
npm install --save-dev @iconify/vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
ContextMenuArrow,
|
||||
ContextMenuCheckboxItem,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuItemIndicator,
|
||||
ContextMenuLabel,
|
||||
ContextMenuPortal,
|
||||
ContextMenuRadioGroup,
|
||||
ContextMenuRadioItem,
|
||||
ContextMenuRoot,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuSub,
|
||||
ContextMenuSubContent,
|
||||
ContextMenuSubTrigger,
|
||||
ContextMenuTrigger,
|
||||
} from 'radix-vue'
|
||||
|
||||
const checkboxOne = ref(false)
|
||||
const checkboxTwo = ref(false)
|
||||
const person = ref('pedro')
|
||||
|
||||
function handleClick() {
|
||||
alert('hello!')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextMenuRoot>
|
||||
<ContextMenuTrigger
|
||||
as-child
|
||||
class="block border-2 border-white border-dashed text-white rounded text-[15px] select-none py-[45px] w-[300px] text-center"
|
||||
>
|
||||
<span> Right click here. </span>
|
||||
</ContextMenuTrigger>
|
||||
<ContextMenuPortal>
|
||||
<ContextMenuContent
|
||||
class="min-w-[220px] bg-white outline-none rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
||||
:side-offset="5"
|
||||
>
|
||||
<ContextMenuItem
|
||||
value="New Tab"
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
@click="handleClick"
|
||||
>
|
||||
New Tab <div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⌘+T
|
||||
</div>
|
||||
</ContextMenuItem>
|
||||
<ContextMenuSub>
|
||||
<ContextMenuSubTrigger
|
||||
value="more toolsz"
|
||||
class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
|
||||
>
|
||||
More Tools <div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
<Icon icon="radix-icons:chevron-right" />
|
||||
</div>
|
||||
</ContextMenuSubTrigger>
|
||||
<ContextMenuPortal>
|
||||
<ContextMenuSubContent
|
||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
||||
:side-offset="2" :align-offset="-5"
|
||||
>
|
||||
<ContextMenuItem
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Save Page As… <div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⌘+S
|
||||
</div>
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Create Shortcut…
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Name Window…
|
||||
</ContextMenuItem>
|
||||
<ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<ContextMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Developer Tools
|
||||
</ContextMenuItem>
|
||||
<ContextMenuArrow class="fill-white" />
|
||||
</ContextMenuSubContent>
|
||||
</ContextMenuPortal>
|
||||
</ContextMenuSub>
|
||||
<ContextMenuItem
|
||||
value="New Window"
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
New Window <div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⌘+N
|
||||
</div>
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
value="New Private Window"
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
disabled
|
||||
>
|
||||
New Private Window <div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⇧+⌘+N
|
||||
</div>
|
||||
</ContextMenuItem>
|
||||
<ContextMenuSub>
|
||||
<ContextMenuSubTrigger
|
||||
value="more tools"
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none w-full outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
|
||||
>
|
||||
More Tools <div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
<Icon icon="radix-icons:chevron-right" />
|
||||
</div>
|
||||
</ContextMenuSubTrigger>
|
||||
<ContextMenuPortal>
|
||||
<ContextMenuSubContent
|
||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
||||
:side-offset="2" :align-offset="-5"
|
||||
>
|
||||
<ContextMenuItem
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Save Page As… <div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⌘+S
|
||||
</div>
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Create Shortcut…
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Name Window…
|
||||
</ContextMenuItem>
|
||||
<ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<ContextMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Developer Tools
|
||||
</ContextMenuItem>
|
||||
<ContextMenuSub>
|
||||
<ContextMenuSubTrigger
|
||||
value="more toolsz"
|
||||
class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
|
||||
>
|
||||
More Tools <div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
<Icon icon="radix-icons:chevron-right" />
|
||||
</div>
|
||||
</ContextMenuSubTrigger>
|
||||
<ContextMenuPortal>
|
||||
<ContextMenuSubContent
|
||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
||||
:side-offset="2" :align-offset="-5"
|
||||
>
|
||||
<ContextMenuItem
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Save Page As… <div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⌘+S
|
||||
</div>
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Create Shortcut…
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Name Window…
|
||||
</ContextMenuItem>
|
||||
<ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<ContextMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Developer Tools
|
||||
</ContextMenuItem>
|
||||
<ContextMenuSub>
|
||||
<ContextMenuSubTrigger
|
||||
value="more toolsz"
|
||||
class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
|
||||
>
|
||||
More Tools <div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
<Icon icon="radix-icons:chevron-right" />
|
||||
</div>
|
||||
</ContextMenuSubTrigger>
|
||||
<ContextMenuPortal>
|
||||
<ContextMenuSubContent
|
||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
||||
:side-offset="2" :align-offset="-5"
|
||||
>
|
||||
<ContextMenuItem
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Save Page As… <div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⌘+S
|
||||
</div>
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Create Shortcut…
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Name Window…
|
||||
</ContextMenuItem>
|
||||
<ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<ContextMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Developer Tools
|
||||
</ContextMenuItem>
|
||||
</ContextMenuSubContent>
|
||||
</ContextMenuPortal>
|
||||
</ContextMenuSub>
|
||||
</ContextMenuSubContent>
|
||||
</ContextMenuPortal>
|
||||
</ContextMenuSub>
|
||||
<ContextMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Developer Tools
|
||||
</ContextMenuItem>
|
||||
</ContextMenuSubContent>
|
||||
</ContextMenuPortal>
|
||||
</ContextMenuSub>
|
||||
<ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<ContextMenuCheckboxItem
|
||||
v-model="checkboxOne"
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
<ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
||||
<Icon icon="radix-icons:check" />
|
||||
</ContextMenuItemIndicator> Show Bookmarks <div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⌘+B
|
||||
</div>
|
||||
</ContextMenuCheckboxItem>
|
||||
<ContextMenuCheckboxItem
|
||||
v-model="checkboxTwo"
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
<ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
||||
<Icon icon="radix-icons:check" />
|
||||
</ContextMenuItemIndicator> Show Full URLs
|
||||
</ContextMenuCheckboxItem>
|
||||
<ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<ContextMenuLabel class="pl-[25px] text-xs leading-[25px] text-mauve11">
|
||||
People
|
||||
</ContextMenuLabel>
|
||||
<ContextMenuRadioGroup v-model="person">
|
||||
<ContextMenuRadioItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
value="pedro"
|
||||
>
|
||||
<ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
||||
<Icon icon="radix-icons:dot-filled" />
|
||||
</ContextMenuItemIndicator> Pedro Duarte
|
||||
</ContextMenuRadioItem>
|
||||
<ContextMenuRadioItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
value="colm"
|
||||
>
|
||||
<ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
||||
<Icon icon="radix-icons:dot-filled" />
|
||||
</ContextMenuItemIndicator> Colm Tuite
|
||||
</ContextMenuRadioItem>
|
||||
</ContextMenuRadioGroup>
|
||||
</ContextMenuContent>
|
||||
</ContextMenuPortal>
|
||||
</ContextMenuRoot>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js` file
|
||||
|
||||
Add the following to your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...green,
|
||||
...grass,
|
||||
...mauve,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -45,7 +386,7 @@ import {
|
|||
ContextMenuSubContent,
|
||||
ContextMenuSubTrigger,
|
||||
ContextMenuTrigger,
|
||||
} from '@/lib/registry/default/ui/context-menu'
|
||||
} from '@/components/ui/context-menu'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -21,13 +21,13 @@ import { Calendar as CalendarIcon } from 'lucide-vue-next'
|
|||
|
||||
import { ref } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import { Calendar } from '@/lib/registry/default/ui/calendar'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Calendar } from '@/components/ui/calendar'
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/lib/registry/default/ui/popover'
|
||||
} from '@/components/ui/popover'
|
||||
|
||||
const date = ref<Date>()
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,23 +8,150 @@ primitive: https://www.radix-vue.com/components/dialog.html
|
|||
|
||||
<ComponentPreview name="DialogDemo" />
|
||||
|
||||
|
||||
## Installation
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add dialog
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependencies:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
|
||||
npm install --save-dev @iconify/vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogRoot,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from 'radix-vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogRoot>
|
||||
<DialogTrigger
|
||||
class="text-grass11 font-semibold shadow-blackA7 hover:bg-mauve3 inline-flex h-[35px] items-center justify-center rounded-[4px] bg-white px-[15px] leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none"
|
||||
>
|
||||
Edit profile
|
||||
</DialogTrigger>
|
||||
<DialogPortal>
|
||||
<DialogOverlay class="dialog-overlay" />
|
||||
<DialogContent
|
||||
class="dialog-content"
|
||||
>
|
||||
<DialogTitle class="text-mauve12 m-0 text-[17px] font-semibold">
|
||||
Edit profile
|
||||
</DialogTitle>
|
||||
<DialogDescription class="text-mauve11 mt-[10px] mb-5 text-[15px] leading-normal">
|
||||
Make changes to your profile here. Click save when you're done.
|
||||
</DialogDescription>
|
||||
<fieldset class="mb-[15px] flex items-center gap-5">
|
||||
<label class="text-grass11 w-[90px] text-right text-[15px]" for="name"> Name </label>
|
||||
<input
|
||||
id="name"
|
||||
class="text-grass11 shadow-green7 focus:shadow-green8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
|
||||
defaultValue="Pedro Duarte"
|
||||
>
|
||||
</fieldset>
|
||||
<fieldset class="mb-[15px] flex items-center gap-5">
|
||||
<label class="text-grass11 w-[90px] text-right text-[15px]" for="username"> Username </label>
|
||||
<input
|
||||
id="username"
|
||||
class="text-grass11 shadow-green7 focus:shadow-green8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
|
||||
defaultValue="@peduarte"
|
||||
>
|
||||
</fieldset>
|
||||
<div class="mt-[25px] flex justify-end">
|
||||
<DialogClose as-child>
|
||||
<button
|
||||
class="bg-green4 text-green11 hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
|
||||
>
|
||||
Save changes
|
||||
</button>
|
||||
</DialogClose>
|
||||
</div>
|
||||
<DialogClose
|
||||
class="text-grass11 hover:bg-green4 focus:shadow-green7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
|
||||
aria-label="Close"
|
||||
>
|
||||
<Icon icon="lucide:x" />
|
||||
</DialogClose>
|
||||
</DialogContent>
|
||||
</DialogPortal>
|
||||
</DialogRoot>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.dialog-overlay {
|
||||
@apply bg-blackA9 data-[state=open]:animate-overlayShow fixed inset-0 z-20;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
@apply data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-20;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following to your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...green,
|
||||
...grass,
|
||||
...mauve,
|
||||
},
|
||||
keyframes: {
|
||||
overlayShow: {
|
||||
from: { opacity: 0 },
|
||||
to: { opacity: 1 },
|
||||
},
|
||||
contentShow: {
|
||||
from: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
|
||||
to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -38,7 +165,7 @@ import {
|
|||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/lib/registry/default/ui/dialog'
|
||||
} from '@/components/ui/dialog'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -9,22 +9,412 @@ primitive: https://www.radix-vue.com/components/dropdown-menu.html
|
|||
<ComponentPreview name="DropdownMenuDemo" />
|
||||
|
||||
|
||||
## Installation
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add dropdown-menu
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependencies:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
|
||||
npm install --save-dev @iconify/vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
DropdownMenuArrow,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuItemIndicator,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuRoot,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuTrigger,
|
||||
} from 'radix-vue'
|
||||
|
||||
const toggleState = ref(false)
|
||||
const checkboxOne = ref(false)
|
||||
const checkboxTwo = ref(false)
|
||||
const person = ref('pedro')
|
||||
|
||||
function handleClick() {
|
||||
alert('hello!')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DropdownMenuRoot v-model:open="toggleState">
|
||||
<DropdownMenuTrigger
|
||||
class="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-grass11 bg-white shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black"
|
||||
aria-label="Customise options"
|
||||
>
|
||||
<Icon icon="radix-icons:hamburger-menu" />
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuContent
|
||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
||||
:side-offset="5"
|
||||
>
|
||||
<DropdownMenuItem
|
||||
value="New Tab"
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
@click="handleClick"
|
||||
>
|
||||
New Tab
|
||||
<div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⌘+T
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger
|
||||
value="more toolsz"
|
||||
class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
|
||||
>
|
||||
More Tools
|
||||
<div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
<Icon icon="radix-icons:chevron-right" />
|
||||
</div>
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuSubContent
|
||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
||||
:side-offset="2"
|
||||
:align-offset="-5"
|
||||
>
|
||||
<DropdownMenuItem
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Save Page As…
|
||||
<div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⌘+S
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Create Shortcut…
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Name Window…
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<DropdownMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Developer Tools
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuPortal>
|
||||
</DropdownMenuSub>
|
||||
<DropdownMenuItem
|
||||
value="New Window"
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
New Window
|
||||
<div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⌘+N
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
value="New Private Window"
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
disabled
|
||||
>
|
||||
New Private Window
|
||||
<div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⇧+⌘+N
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger
|
||||
value="more tools"
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none w-full outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
|
||||
>
|
||||
More Tools
|
||||
<div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
<Icon icon="radix-icons:chevron-right" />
|
||||
</div>
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuSubContent
|
||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
||||
:side-offset="2"
|
||||
:align-offset="-5"
|
||||
>
|
||||
<DropdownMenuItem
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Save Page As…
|
||||
<div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⌘+S
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Create Shortcut…
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Name Window…
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<DropdownMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Developer Tools
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger
|
||||
value="more toolsz"
|
||||
class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
|
||||
>
|
||||
More Tools
|
||||
<div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
<Icon icon="radix-icons:chevron-right" />
|
||||
</div>
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuSubContent
|
||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
||||
:side-offset="2"
|
||||
:align-offset="-5"
|
||||
>
|
||||
<DropdownMenuItem
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Save Page As…
|
||||
<div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⌘+S
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Create Shortcut…
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Name Window…
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<DropdownMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Developer Tools
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger
|
||||
value="more toolsz"
|
||||
class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
|
||||
>
|
||||
More Tools
|
||||
<div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
<Icon icon="radix-icons:chevron-right" />
|
||||
</div>
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuSubContent
|
||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
||||
:side-offset="2"
|
||||
:align-offset="-5"
|
||||
>
|
||||
<DropdownMenuItem
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Save Page As…
|
||||
<div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⌘+S
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Create Shortcut…
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Name Window…
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<DropdownMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Developer Tools
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuPortal>
|
||||
</DropdownMenuSub>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuPortal>
|
||||
</DropdownMenuSub>
|
||||
<DropdownMenuItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
Developer Tools
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuPortal>
|
||||
</DropdownMenuSub>
|
||||
<DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<DropdownMenuCheckboxItem
|
||||
v-model:checked="checkboxOne"
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
<DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
||||
<Icon icon="radix-icons:check" />
|
||||
</DropdownMenuItemIndicator>
|
||||
Show Bookmarks
|
||||
<div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⌘+B
|
||||
</div>
|
||||
</DropdownMenuCheckboxItem>
|
||||
<DropdownMenuCheckboxItem
|
||||
v-model:checked="checkboxTwo"
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
<DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
||||
<Icon icon="radix-icons:check" />
|
||||
</DropdownMenuItemIndicator>
|
||||
Show Full URLs
|
||||
</DropdownMenuCheckboxItem>
|
||||
<DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
|
||||
<DropdownMenuLabel class="pl-[25px] text-xs leading-[25px] text-mauve11">
|
||||
People
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuRadioGroup v-model="person">
|
||||
<DropdownMenuRadioItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
value="pedro"
|
||||
>
|
||||
<DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
||||
<Icon icon="radix-icons:dot-filled" />
|
||||
</DropdownMenuItemIndicator>
|
||||
Pedro Duarte
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
value="colm"
|
||||
>
|
||||
<DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
||||
<Icon icon="radix-icons:dot-filled" />
|
||||
</DropdownMenuItemIndicator>
|
||||
Colm Tuite
|
||||
</DropdownMenuRadioItem>
|
||||
</DropdownMenuRadioGroup>
|
||||
<DropdownMenuArrow class="fill-white" />
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenuPortal>
|
||||
</DropdownMenuRoot>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following to your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...green,
|
||||
...grass,
|
||||
...mauve,
|
||||
},
|
||||
keyframes: {
|
||||
slideDownAndFade: {
|
||||
from: { opacity: 0, transform: 'translateY(-2px)' },
|
||||
to: { opacity: 1, transform: 'translateY(0)' },
|
||||
},
|
||||
slideLeftAndFade: {
|
||||
from: { opacity: 0, transform: 'translateX(2px)' },
|
||||
to: { opacity: 1, transform: 'translateX(0)' },
|
||||
},
|
||||
slideUpAndFade: {
|
||||
from: { opacity: 0, transform: 'translateY(2px)' },
|
||||
to: { opacity: 1, transform: 'translateY(0)' },
|
||||
},
|
||||
slideRightAndFade: {
|
||||
from: { opacity: 0, transform: 'translateX(-2px)' },
|
||||
to: { opacity: 1, transform: 'translateX(0)' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
</Steps>
|
||||
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -37,7 +427,7 @@ import {
|
|||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/lib/registry/default/ui/dropdown-menu'
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -9,22 +9,151 @@ primitive: https://www.radix-vue.com/components/hover-card.html
|
|||
<ComponentPreview name="HoverCardDemo" />
|
||||
|
||||
|
||||
## Installation
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add hover-card
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependency:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger } from 'radix-vue'
|
||||
|
||||
const hoverState = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HoverCardRoot v-model:open="hoverState">
|
||||
<HoverCardTrigger
|
||||
class="inline-block cursor-pointer rounded-full shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] outline-none focus:shadow-[0_0_0_2px_white]"
|
||||
href="https://twitter.com/radix_ui"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
<img
|
||||
class="block h-[45px] w-[45px] rounded-full"
|
||||
src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
|
||||
alt="Radix UI"
|
||||
>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardPortal>
|
||||
<HoverCardContent
|
||||
class="data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] rounded-md bg-white p-5 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] data-[state=open]:transition-all"
|
||||
:side-offset="5"
|
||||
>
|
||||
<div class="flex flex-col gap-[7px]">
|
||||
<img
|
||||
class="block h-[60px] w-[60px] rounded-full"
|
||||
src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
|
||||
alt="Radix UI"
|
||||
>
|
||||
<div class="flex flex-col gap-[15px]">
|
||||
<div>
|
||||
<div class="text-mauve12 m-0 text-[15px] font-medium leading-[1.5]">
|
||||
Radix
|
||||
</div>
|
||||
<div class="text-mauve10 m-0 text-[15px] leading-[1.5]">
|
||||
@radix_ui
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-mauve12 m-0 text-[15px] leading-[1.5]">
|
||||
Components, icons, colors, and templates for building high-quality, accessible UI. Free and open-source.
|
||||
</div>
|
||||
<div class="flex gap-[15px]">
|
||||
<div class="flex gap-[5px]">
|
||||
<div class="text-mauve12 m-0 text-[15px] font-medium leading-[1.5]">
|
||||
0
|
||||
</div>
|
||||
<div class="text-mauve10 m-0 text-[15px] leading-[1.5]">
|
||||
Following
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-[5px]">
|
||||
<div class="text-mauve12 m-0 text-[15px] font-medium leading-[1.5]">
|
||||
2,900
|
||||
</div>
|
||||
<div class="text-mauve10 m-0 text-[15px] leading-[1.5]">
|
||||
Followers
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<HoverCardArrow class="fill-white" size="8" />
|
||||
</HoverCardContent>
|
||||
</HoverCardPortal>
|
||||
</HoverCardRoot>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following to your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...green,
|
||||
...grass,
|
||||
...mauve,
|
||||
},
|
||||
keyframes: {
|
||||
slideDownAndFade: {
|
||||
from: { opacity: 0, transform: 'translateY(-2px)' },
|
||||
to: { opacity: 1, transform: 'translateY(0)' },
|
||||
},
|
||||
slideLeftAndFade: {
|
||||
from: { opacity: 0, transform: 'translateX(2px)' },
|
||||
to: { opacity: 1, transform: 'translateX(0)' },
|
||||
},
|
||||
slideUpAndFade: {
|
||||
from: { opacity: 0, transform: 'translateY(2px)' },
|
||||
to: { opacity: 1, transform: 'translateY(0)' },
|
||||
},
|
||||
slideRightAndFade: {
|
||||
from: { opacity: 0, transform: 'translateX(-2px)' },
|
||||
to: { opacity: 1, transform: 'translateX(0)' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -34,14 +163,14 @@ import {
|
|||
HoverCard,
|
||||
HoverCardContent,
|
||||
HoverCardTrigger,
|
||||
} from '@/lib/registry/default/ui/hover-card'
|
||||
} from '@/components/ui/hover-card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HoverCard>
|
||||
<HoverCardTrigger>Hover</HoverCardTrigger>
|
||||
<HoverCardContent>
|
||||
The React Framework – created and maintained by @vercel.
|
||||
The Vue Framework – created and maintained by @vuejs.
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -7,29 +7,57 @@ description: Displays a form input field or a component that looks like an input
|
|||
<ComponentPreview name="InputDemo" class="[&_input]:max-w-xs" />
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add input
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
### Copy and paste the following code into your project:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
defaultValue?: string | number
|
||||
modelValue?: string | number
|
||||
}>()
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'update:modelValue', payload: string | number): void
|
||||
}>()
|
||||
|
||||
const modelValue = useVModel(props, 'modelValue', emits, {
|
||||
passive: true,
|
||||
defaultValue: props.defaultValue,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input v-model="modelValue" type="text" :class="cn(cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? ''))">
|
||||
</template>
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
</Steps>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Input } from '@/components/ui/input'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -10,26 +10,59 @@ primitive: https://www.radix-vue.com/components/label.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add input
|
||||
npx shadcn-vue@latest add label
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependency:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Label, type LabelProps } from 'radix-vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<LabelProps & { class?: string }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Label
|
||||
v-bind="props"
|
||||
:class="
|
||||
cn(
|
||||
'block text-sm tracking-tight font-medium text-foreground text-left',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</Label>
|
||||
</template>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Label } from '@/lib/registry/default/ui/label'
|
||||
import { Label } from '@/components/ui/label'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -11,20 +11,388 @@ primitive: https://www.radix-vue.com/components/menubar.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add menubar
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependencies:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
|
||||
npm install --save-dev @iconify/vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
MenubarCheckboxItem,
|
||||
MenubarContent,
|
||||
MenubarItem,
|
||||
MenubarItemIndicator,
|
||||
MenubarMenu,
|
||||
MenubarPortal,
|
||||
MenubarRadioGroup,
|
||||
MenubarRadioItem,
|
||||
MenubarRoot,
|
||||
MenubarSeparator,
|
||||
MenubarSub,
|
||||
MenubarSubContent,
|
||||
MenubarSubTrigger,
|
||||
MenubarTrigger,
|
||||
} from 'radix-vue'
|
||||
|
||||
const currentMenu = ref('')
|
||||
const checkboxOne = ref(false)
|
||||
const checkboxTwo = ref(false)
|
||||
const person = ref('pedro')
|
||||
function handleClick() {
|
||||
alert('hello!')
|
||||
}
|
||||
|
||||
const RADIO_ITEMS = ['Andy', 'Benoît', 'Luis']
|
||||
const CHECK_ITEMS = ['Always Show Bookmarks Bar', 'Always Show Full URLs']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MenubarRoot v-model="currentMenu" class="flex bg-white p-[3px] rounded-md shadow-[0_2px_10px] shadow-blackA7">
|
||||
<MenubarMenu value="file">
|
||||
<MenubarTrigger
|
||||
class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-grass11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
|
||||
>
|
||||
File
|
||||
</MenubarTrigger>
|
||||
<MenubarPortal>
|
||||
<MenubarContent
|
||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
|
||||
align="start"
|
||||
:side-offset="5"
|
||||
:align-offset="-3"
|
||||
>
|
||||
<MenubarItem
|
||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
New Tab
|
||||
<div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
|
||||
⌘ T
|
||||
</div>
|
||||
</MenubarItem>
|
||||
<MenubarItem
|
||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
New Window
|
||||
<div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
|
||||
⌘ N
|
||||
</div>
|
||||
</MenubarItem>
|
||||
<MenubarItem
|
||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
disabled
|
||||
>
|
||||
New Incognito Window
|
||||
</MenubarItem>
|
||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<MenubarSub>
|
||||
<MenubarSubTrigger
|
||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Share
|
||||
<div
|
||||
class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
<Icon icon="radix-icons:chevron-right" />
|
||||
</div>
|
||||
</MenubarSubTrigger>
|
||||
<MenubarPortal>
|
||||
<MenubarSubContent
|
||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
|
||||
:align-offset="-5"
|
||||
>
|
||||
<MenubarItem
|
||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Email Link
|
||||
</MenubarItem>
|
||||
<MenubarItem
|
||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Messages
|
||||
</MenubarItem>
|
||||
<MenubarItem
|
||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Notes
|
||||
</MenubarItem>
|
||||
</MenubarSubContent>
|
||||
</MenubarPortal>
|
||||
</MenubarSub>
|
||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<MenubarItem
|
||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Print…
|
||||
<div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
|
||||
⌘ P
|
||||
</div>
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarPortal>
|
||||
</MenubarMenu>
|
||||
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger
|
||||
class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-grass11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
|
||||
>
|
||||
Edit
|
||||
</MenubarTrigger>
|
||||
<MenubarPortal>
|
||||
<MenubarContent
|
||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
|
||||
align="start"
|
||||
:side-offset="5"
|
||||
:align-offset="-3"
|
||||
>
|
||||
<MenubarItem
|
||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Undo
|
||||
<div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
|
||||
⌘ Z
|
||||
</div>
|
||||
</MenubarItem>
|
||||
<MenubarItem
|
||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Redo
|
||||
<div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
|
||||
⇧ ⌘ Z
|
||||
</div>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<MenubarSub>
|
||||
<MenubarSubTrigger
|
||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Find
|
||||
<div
|
||||
class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
<Icon icon="radix-icons:chevron-right" />
|
||||
</div>
|
||||
</MenubarSubTrigger>
|
||||
|
||||
<MenubarPortal>
|
||||
<MenubarSubContent
|
||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
|
||||
:align-offset="-5"
|
||||
>
|
||||
<MenubarItem
|
||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Search the web…
|
||||
</MenubarItem>
|
||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<MenubarItem
|
||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Find…
|
||||
</MenubarItem>
|
||||
<MenubarItem
|
||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Find Next
|
||||
</MenubarItem>
|
||||
<MenubarItem
|
||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Find Previous
|
||||
</MenubarItem>
|
||||
</MenubarSubContent>
|
||||
</MenubarPortal>
|
||||
</MenubarSub>
|
||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<MenubarItem
|
||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Cut
|
||||
</MenubarItem>
|
||||
<MenubarItem
|
||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Copy
|
||||
</MenubarItem>
|
||||
<MenubarItem
|
||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Paste
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarPortal>
|
||||
</MenubarMenu>
|
||||
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger
|
||||
class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-grass11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
|
||||
>
|
||||
View
|
||||
</MenubarTrigger>
|
||||
<MenubarPortal>
|
||||
<MenubarContent
|
||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
|
||||
align="start"
|
||||
:side-offset="5"
|
||||
:align-offset="-14"
|
||||
>
|
||||
<MenubarCheckboxItem
|
||||
v-model="checkboxOne"
|
||||
class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
<MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
|
||||
<Icon icon="radix-icons:check" />
|
||||
</MenubarItemIndicator>
|
||||
Show Bookmarks
|
||||
<div
|
||||
class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
|
||||
>
|
||||
⌘+B
|
||||
</div>
|
||||
</MenubarCheckboxItem>
|
||||
<MenubarCheckboxItem
|
||||
v-model="checkboxTwo"
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
>
|
||||
<MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
|
||||
<Icon icon="radix-icons:check" />
|
||||
</MenubarItemIndicator>
|
||||
Show Full URLs
|
||||
</MenubarCheckboxItem>
|
||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<MenubarItem
|
||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Reload
|
||||
<div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
|
||||
⌘ R
|
||||
</div>
|
||||
</MenubarItem>
|
||||
<MenubarItem
|
||||
class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
disabled
|
||||
>
|
||||
Force Reload
|
||||
<div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
|
||||
⇧ ⌘ R
|
||||
</div>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<MenubarItem
|
||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Toggle Fullscreen
|
||||
</MenubarItem>
|
||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<MenubarItem
|
||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Hide Sidebar
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarPortal>
|
||||
</MenubarMenu>
|
||||
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger
|
||||
class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-grass11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
|
||||
>
|
||||
Profiles
|
||||
</MenubarTrigger>
|
||||
<MenubarPortal>
|
||||
<MenubarContent
|
||||
class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
|
||||
align="start"
|
||||
:side-offset="5"
|
||||
:align-offset="-14"
|
||||
>
|
||||
<MenubarRadioGroup v-model="person">
|
||||
<MenubarRadioItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
value="pedro"
|
||||
>
|
||||
<MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
|
||||
<Icon icon="radix-icons:dot-filled" />
|
||||
</MenubarItemIndicator>
|
||||
Pedro Duarte
|
||||
</MenubarRadioItem>
|
||||
<MenubarRadioItem
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
value="colm"
|
||||
>
|
||||
<MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
|
||||
<Icon icon="radix-icons:dot-filled" />
|
||||
</MenubarItemIndicator>
|
||||
Colm Tuite
|
||||
</MenubarRadioItem>
|
||||
</MenubarRadioGroup>
|
||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<MenubarItem
|
||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
@click="handleClick"
|
||||
>
|
||||
Edit…
|
||||
</MenubarItem>
|
||||
<MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<MenubarItem
|
||||
class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
||||
>
|
||||
Add Profile…
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarPortal>
|
||||
</MenubarMenu>
|
||||
</MenubarRoot>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following to your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...green,
|
||||
...grass,
|
||||
...mauve,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -38,7 +406,7 @@ import {
|
|||
MenubarSeparator,
|
||||
MenubarShortcut,
|
||||
MenubarTrigger,
|
||||
} from '@/lib/registry/default/ui/menubar'
|
||||
} from '@/components/ui/menubar'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -10,20 +10,368 @@ primitive: https://www.radix-vue.com/components/navigation-menu.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add navigation-menu
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependencies:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
|
||||
npm install --save-dev @iconify/vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project:
|
||||
|
||||
Add the following code into your `NavigationMenuListItem.vue` file:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
NavigationMenuContent,
|
||||
NavigationMenuIndicator,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuRoot,
|
||||
NavigationMenuTrigger,
|
||||
NavigationMenuViewport,
|
||||
} from 'radix-vue'
|
||||
import NavigationMenuListItem from './NavigationMenuListItem.vue'
|
||||
|
||||
function handleClick() {
|
||||
alert('hello!')
|
||||
}
|
||||
|
||||
const currentTrigger = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavigationMenuRoot v-model="currentTrigger" class="relative z-[1] flex w-full justify-center">
|
||||
<NavigationMenuList class="center shadow-blackA7 m-0 flex list-none rounded-[6px] bg-white p-1 shadow-[0_2px_10px]">
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger
|
||||
class="text-grass11 hover:bg-green3 focus:shadow-green7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
|
||||
>
|
||||
Learn
|
||||
<Icon
|
||||
icon="radix-icons:caret-down"
|
||||
class="text-green10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
|
||||
aria-hidden
|
||||
/>
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent
|
||||
class="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto"
|
||||
>
|
||||
<ul class="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
|
||||
<li class="row-span-3 grid">
|
||||
<NavigationMenuLink as-child>
|
||||
<a
|
||||
class="focus:shadow-green7 from-green9 to-teal9 flex h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
|
||||
href="/"
|
||||
>
|
||||
<img class="w-16" src="/logo.svg">
|
||||
<div class="mt-4 mb-[7px] text-[18px] font-medium leading-[1.2] text-white">Radix Primitives</div>
|
||||
<p class="text-mauve4 text-[14px] leading-[1.3]">Unstyled, accessible components for React.</p>
|
||||
</a>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
|
||||
<NavigationMenuListItem href="https://stitches.dev/" title="Stitches">
|
||||
CSS-in-JS with best-in-class developer experience.
|
||||
</NavigationMenuListItem>
|
||||
<NavigationMenuListItem href="/colors" title="Colors">
|
||||
Beautiful, thought-out palettes with auto dark mode.
|
||||
</NavigationMenuListItem>
|
||||
<NavigationMenuListItem href="https://icons.radix-ui.com/" title="Icons">
|
||||
A crisp set of 15x15 icons, balanced and consistent.
|
||||
</NavigationMenuListItem>
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger
|
||||
class="text-grass11 hover:bg-green3 focus:shadow-green7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
|
||||
>
|
||||
Overview
|
||||
<Icon
|
||||
icon="radix-icons:caret-down"
|
||||
class="text-green10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
|
||||
aria-hidden
|
||||
/>
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent class="absolute top-0 left-0 w-full sm:w-auto">
|
||||
<ul class="m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3">
|
||||
<NavigationMenuListItem title="Introduction" href="/docs/primitives/overview/introduction">
|
||||
Build high-quality, accessible design systems and web apps.
|
||||
</NavigationMenuListItem>
|
||||
<NavigationMenuListItem title="Getting started" href="/docs/primitives/overview/getting-started">
|
||||
A quick tutorial to get you up and running with Radix Primitives.
|
||||
</NavigationMenuListItem>
|
||||
<NavigationMenuListItem title="Styling" href="/docs/primitives/guides/styling">
|
||||
Unstyled and compatible with any styling solution.
|
||||
</NavigationMenuListItem>
|
||||
<NavigationMenuListItem title="Animation" href="/docs/primitives/guides/animation">
|
||||
Use CSS keyframes or any animation library of your choice.
|
||||
</NavigationMenuListItem>
|
||||
<NavigationMenuListItem title="Accessibility" href="/docs/primitives/overview/accessibility">
|
||||
Tested in a range of browsers and assistive technologies.
|
||||
</NavigationMenuListItem>
|
||||
<NavigationMenuListItem title="Releases" href="/docs/primitives/overview/releases">
|
||||
Radix Primitives releases and their changelogs.
|
||||
</NavigationMenuListItem>
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuLink
|
||||
class="text-grass11 hover:bg-green3 focus:shadow-green7 block select-none rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none no-underline outline-none focus:shadow-[0_0_0_2px]"
|
||||
href="https://github.com/radix-vue"
|
||||
>
|
||||
Github
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
|
||||
<NavigationMenuIndicator
|
||||
class="data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
|
||||
>
|
||||
<div class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white" />
|
||||
</NavigationMenuIndicator>
|
||||
</NavigationMenuList>
|
||||
|
||||
<div class="perspective-[2000px] absolute top-full left-0 flex w-full justify-center">
|
||||
<NavigationMenuViewport
|
||||
class="data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-[10px] bg-white transition-[width,_height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]"
|
||||
/>
|
||||
</div>
|
||||
</NavigationMenuRoot>
|
||||
</template>
|
||||
```
|
||||
|
||||
Add the following code into your `index.vue` file:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
NavigationMenuContent,
|
||||
NavigationMenuIndicator,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuRoot,
|
||||
NavigationMenuTrigger,
|
||||
NavigationMenuViewport,
|
||||
} from 'radix-vue'
|
||||
import NavigationMenuListItem from './NavigationMenuListItem.vue'
|
||||
|
||||
function handleClick() {
|
||||
alert('hello!')
|
||||
}
|
||||
|
||||
const currentTrigger = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavigationMenuRoot v-model="currentTrigger" class="relative z-[1] flex w-full justify-center">
|
||||
<NavigationMenuList class="center shadow-blackA7 m-0 flex list-none rounded-[6px] bg-white p-1 shadow-[0_2px_10px]">
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger
|
||||
class="text-grass11 hover:bg-green3 focus:shadow-green7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
|
||||
>
|
||||
Learn
|
||||
<Icon
|
||||
icon="radix-icons:caret-down"
|
||||
class="text-green10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
|
||||
aria-hidden
|
||||
/>
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent
|
||||
class="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto"
|
||||
>
|
||||
<ul class="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
|
||||
<li class="row-span-3 grid">
|
||||
<NavigationMenuLink as-child>
|
||||
<a
|
||||
class="focus:shadow-green7 from-green9 to-teal9 flex h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
|
||||
href="/"
|
||||
>
|
||||
<img class="w-16" src="/logo.svg">
|
||||
<div class="mt-4 mb-[7px] text-[18px] font-medium leading-[1.2] text-white">Radix Primitives</div>
|
||||
<p class="text-mauve4 text-[14px] leading-[1.3]">Unstyled, accessible components for React.</p>
|
||||
</a>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
|
||||
<NavigationMenuListItem href="https://stitches.dev/" title="Stitches">
|
||||
CSS-in-JS with best-in-class developer experience.
|
||||
</NavigationMenuListItem>
|
||||
<NavigationMenuListItem href="/colors" title="Colors">
|
||||
Beautiful, thought-out palettes with auto dark mode.
|
||||
</NavigationMenuListItem>
|
||||
<NavigationMenuListItem href="https://icons.radix-ui.com/" title="Icons">
|
||||
A crisp set of 15x15 icons, balanced and consistent.
|
||||
</NavigationMenuListItem>
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger
|
||||
class="text-grass11 hover:bg-green3 focus:shadow-green7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
|
||||
>
|
||||
Overview
|
||||
<Icon
|
||||
icon="radix-icons:caret-down"
|
||||
class="text-green10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
|
||||
aria-hidden
|
||||
/>
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent class="absolute top-0 left-0 w-full sm:w-auto">
|
||||
<ul class="m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3">
|
||||
<NavigationMenuListItem title="Introduction" href="/docs/primitives/overview/introduction">
|
||||
Build high-quality, accessible design systems and web apps.
|
||||
</NavigationMenuListItem>
|
||||
<NavigationMenuListItem title="Getting started" href="/docs/primitives/overview/getting-started">
|
||||
A quick tutorial to get you up and running with Radix Primitives.
|
||||
</NavigationMenuListItem>
|
||||
<NavigationMenuListItem title="Styling" href="/docs/primitives/guides/styling">
|
||||
Unstyled and compatible with any styling solution.
|
||||
</NavigationMenuListItem>
|
||||
<NavigationMenuListItem title="Animation" href="/docs/primitives/guides/animation">
|
||||
Use CSS keyframes or any animation library of your choice.
|
||||
</NavigationMenuListItem>
|
||||
<NavigationMenuListItem title="Accessibility" href="/docs/primitives/overview/accessibility">
|
||||
Tested in a range of browsers and assistive technologies.
|
||||
</NavigationMenuListItem>
|
||||
<NavigationMenuListItem title="Releases" href="/docs/primitives/overview/releases">
|
||||
Radix Primitives releases and their changelogs.
|
||||
</NavigationMenuListItem>
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuLink
|
||||
class="text-grass11 hover:bg-green3 focus:shadow-green7 block select-none rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none no-underline outline-none focus:shadow-[0_0_0_2px]"
|
||||
href="https://github.com/radix-vue"
|
||||
>
|
||||
Github
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
|
||||
<NavigationMenuIndicator
|
||||
class="data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
|
||||
>
|
||||
<div class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white" />
|
||||
</NavigationMenuIndicator>
|
||||
</NavigationMenuList>
|
||||
|
||||
<div class="perspective-[2000px] absolute top-full left-0 flex w-full justify-center">
|
||||
<NavigationMenuViewport
|
||||
class="data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-[10px] bg-white transition-[width,_height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]"
|
||||
/>
|
||||
</div>
|
||||
</NavigationMenuRoot>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js` file:
|
||||
|
||||
Add the following into your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const plugin = require('tailwindcss/plugin')
|
||||
const { blackA, green, grass, teal } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...green,
|
||||
...grass,
|
||||
...teal,
|
||||
},
|
||||
},
|
||||
keyframes: {
|
||||
enterFromRight: {
|
||||
from: { opacity: 0, transform: 'translateX(200px)' },
|
||||
to: { opacity: 1, transform: 'translateX(0)' },
|
||||
},
|
||||
enterFromLeft: {
|
||||
from: { opacity: 0, transform: 'translateX(-200px)' },
|
||||
to: { opacity: 1, transform: 'translateX(0)' },
|
||||
},
|
||||
exitToRight: {
|
||||
from: { opacity: 1, transform: 'translateX(0)' },
|
||||
to: { opacity: 0, transform: 'translateX(200px)' },
|
||||
},
|
||||
exitToLeft: {
|
||||
from: { opacity: 1, transform: 'translateX(0)' },
|
||||
to: { opacity: 0, transform: 'translateX(-200px)' },
|
||||
},
|
||||
scaleIn: {
|
||||
from: { opacity: 0, transform: 'rotateX(-10deg) scale(0.9)' },
|
||||
to: { opacity: 1, transform: 'rotateX(0deg) scale(1)' },
|
||||
},
|
||||
scaleOut: {
|
||||
from: { opacity: 1, transform: 'rotateX(0deg) scale(1)' },
|
||||
to: { opacity: 0, transform: 'rotateX(-10deg) scale(0.95)' },
|
||||
},
|
||||
fadeIn: {
|
||||
from: { opacity: 0 },
|
||||
to: { opacity: 1 },
|
||||
},
|
||||
fadeOut: {
|
||||
from: { opacity: 1 },
|
||||
to: { opacity: 0 },
|
||||
},
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
scaleIn: 'scaleIn 200ms ease',
|
||||
scaleOut: 'scaleOut 200ms ease',
|
||||
fadeIn: 'fadeIn 200ms ease',
|
||||
fadeOut: 'fadeOut 200ms ease',
|
||||
enterFromLeft: 'enterFromLeft 250ms ease',
|
||||
enterFromRight: 'enterFromRight 250ms ease',
|
||||
exitToLeft: 'exitToLeft 250ms ease',
|
||||
exitToRight: 'exitToRight 250ms ease',
|
||||
},
|
||||
plugins: [
|
||||
plugin(({ matchUtilities }) => {
|
||||
matchUtilities({
|
||||
perspective: value => ({
|
||||
perspective: value,
|
||||
}),
|
||||
})
|
||||
}),
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -38,7 +386,7 @@ import {
|
|||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
NavigationMenuViewport,
|
||||
} from '@/lib/registry/default/ui/navigation-menu'
|
||||
} from '@/components/ui/navigation-menu'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -12,20 +12,153 @@ primitive: https://www.radix-vue.com/components/popover.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add popover
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependencies:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
|
||||
npm install --save-dev @iconify/vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project:
|
||||
|
||||
Add the following code into your project:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'radix-vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PopoverRoot>
|
||||
<PopoverTrigger
|
||||
class="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-grass11 bg-white shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black cursor-default outline-none"
|
||||
aria-label="Update dimensions"
|
||||
>
|
||||
<Icon icon="radix-icons:mixer-horizontal" />
|
||||
</PopoverTrigger>
|
||||
<PopoverPortal>
|
||||
<PopoverContent
|
||||
side="bottom"
|
||||
:side-offset="5"
|
||||
class="rounded p-5 w-[260px] bg-white shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.green7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
|
||||
>
|
||||
<div class="flex flex-col gap-2.5">
|
||||
<p class="text-mauve12 text-[15px] leading-[19px] font-semibold mb-2.5">
|
||||
Dimensions
|
||||
</p>
|
||||
<fieldset class="flex gap-5 items-center">
|
||||
<label class="text-[13px] text-grass11 w-[75px]" for="width"> Width </label>
|
||||
<input
|
||||
id="width"
|
||||
class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
||||
defaultValue="100%"
|
||||
>
|
||||
</fieldset>
|
||||
<fieldset class="flex gap-5 items-center">
|
||||
<label class="text-[13px] text-grass11 w-[75px]" for="maxWidth"> Max. width </label>
|
||||
<input
|
||||
id="maxWidth"
|
||||
class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
||||
defaultValue="300px"
|
||||
>
|
||||
</fieldset>
|
||||
<fieldset class="flex gap-5 items-center">
|
||||
<label class="text-[13px] text-grass11 w-[75px]" for="height"> Height </label>
|
||||
<input
|
||||
id="height"
|
||||
class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
||||
defaultValue="25px"
|
||||
>
|
||||
</fieldset>
|
||||
<fieldset class="flex gap-5 items-center">
|
||||
<label class="text-[13px] text-grass11 w-[75px]" for="maxHeight"> Max. height </label>
|
||||
<input
|
||||
id="maxHeight"
|
||||
class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
||||
defaultValue="none"
|
||||
>
|
||||
</fieldset>
|
||||
</div>
|
||||
<PopoverClose
|
||||
class="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-grass11 absolute top-[5px] right-[5px] hover:bg-green4 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default"
|
||||
aria-label="Close"
|
||||
>
|
||||
<Icon icon="radix-icons:cross-2" />
|
||||
</PopoverClose>
|
||||
<PopoverArrow class="fill-white" />
|
||||
</PopoverContent>
|
||||
</PopoverPortal>
|
||||
</PopoverRoot>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following code into your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...green,
|
||||
...grass,
|
||||
...mauve,
|
||||
},
|
||||
keyframes: {
|
||||
slideDownAndFade: {
|
||||
from: { opacity: 0, transform: 'translateY(-2px)' },
|
||||
to: { opacity: 1, transform: 'translateY(0)' },
|
||||
},
|
||||
slideLeftAndFade: {
|
||||
from: { opacity: 0, transform: 'translateX(2px)' },
|
||||
to: { opacity: 1, transform: 'translateX(0)' },
|
||||
},
|
||||
slideUpAndFade: {
|
||||
from: { opacity: 0, transform: 'translateY(2px)' },
|
||||
to: { opacity: 1, transform: 'translateY(0)' },
|
||||
},
|
||||
slideRightAndFade: {
|
||||
from: { opacity: 0, transform: 'translateX(-2px)' },
|
||||
to: { opacity: 1, transform: 'translateX(0)' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -35,7 +168,7 @@ import {
|
|||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/lib/registry/default/ui/popover'
|
||||
} from '@/components/ui/popover'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -11,26 +11,84 @@ primitive: https://www.radix-vue.com/components/progress.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add progress
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependency:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { ProgressIndicator, ProgressRoot } from 'radix-vue'
|
||||
|
||||
const progressValue = ref(10)
|
||||
|
||||
onMounted(() => {
|
||||
const timer = setTimeout(() => (progressValue.value = 66), 500)
|
||||
return () => clearTimeout(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ProgressRoot
|
||||
v-model="progressValue"
|
||||
class="relative overflow-hidden bg-blackA9 rounded-full w-full sm:w-[300px] h-4 sm:h-5"
|
||||
style="transform: translateZ(0)"
|
||||
>
|
||||
<ProgressIndicator
|
||||
class="bg-white rounded-full w-full h-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
|
||||
:style="`transform: translateX(-${100 - progressValue}%)`"
|
||||
/>
|
||||
</ProgressRoot>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following code into your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Progress } from '@/lib/registry/default/ui/progress'
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -8,30 +8,118 @@ primitive: https://www.radix-vue.com/components/radio-group.html
|
|||
<ComponentPreview name="RadioGroupDemo" />
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add radio-group
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependency:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'radix-vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const radioStateSingle = ref('default')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RadioGroupRoot
|
||||
v-model="radioStateSingle" class="flex flex-col gap-2.5" default-value="default"
|
||||
aria-label="View density"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<RadioGroupItem
|
||||
id="r1"
|
||||
class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default" value="default"
|
||||
>
|
||||
<RadioGroupIndicator
|
||||
class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
|
||||
/>
|
||||
</RadioGroupItem>
|
||||
<label class="text-white text-[15px] leading-none pl-[15px]" for="r1">
|
||||
Default
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<RadioGroupItem
|
||||
id="r2"
|
||||
class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default" value="comfortable"
|
||||
>
|
||||
<RadioGroupIndicator
|
||||
class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
|
||||
/>
|
||||
</RadioGroupItem>
|
||||
<label class="text-white text-[15px] leading-none pl-[15px]" for="r2">
|
||||
Comfortable
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<RadioGroupItem
|
||||
id="r3"
|
||||
class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default" value="compact"
|
||||
>
|
||||
<RadioGroupIndicator
|
||||
class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
|
||||
/>
|
||||
</RadioGroupItem>
|
||||
<label class="text-white text-[15px] leading-none pl-[15px]" for="r3">
|
||||
Compact
|
||||
</label>
|
||||
</div>
|
||||
</RadioGroupRoot>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following code into your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA, green, grass } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...green,
|
||||
...grass,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Label } from '@/lib/registry/default/ui/label'
|
||||
import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -11,26 +11,121 @@ primitive: https://www.radix-vue.com/components/scroll-area.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add scroll-area
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependency:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'radix-vue'
|
||||
|
||||
const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ScrollAreaRoot
|
||||
class="w-[200px] h-[225px] rounded overflow-hidden shadow-[0_2px_10px] shadow-blackA7 bg-white"
|
||||
style="--scrollbar-size: 10px"
|
||||
>
|
||||
<ScrollAreaViewport class="w-full h-full rounded">
|
||||
<div class="py-[15px] px-5">
|
||||
<div class="text-grass11 text-[15px] leading-[18px] font-semibold">
|
||||
Tags
|
||||
</div>
|
||||
<div
|
||||
v-for="tag in tags"
|
||||
:key="tag"
|
||||
class="text-mauve12 text-[13px] leading-[18px] mt-2.5 pt-2.5 border-t border-t-mauve6"
|
||||
>
|
||||
{{ tag }}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollAreaViewport>
|
||||
<ScrollAreaScrollbar
|
||||
class="flex select-none touch-none p-0.5 bg-blackA6 transition-colors duration-[160ms] ease-out hover:bg-blackA8 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
|
||||
orientation="vertical"
|
||||
>
|
||||
<ScrollAreaThumb
|
||||
class="flex-1 bg-mauve10 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"
|
||||
/>
|
||||
</ScrollAreaScrollbar>
|
||||
<ScrollAreaScrollbar
|
||||
class="flex select-none touch-none p-0.5 bg-blackA6 transition-colors duration-[160ms] ease-out hover:bg-blackA8 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
|
||||
orientation="horizontal"
|
||||
>
|
||||
<ScrollAreaThumb
|
||||
class="flex-1 bg-mauve10 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"
|
||||
/>
|
||||
</ScrollAreaScrollbar>
|
||||
</ScrollAreaRoot>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
|
||||
.ScrollAreaThumb::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following code into your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...green,
|
||||
...grass,
|
||||
...mauve,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -12,20 +12,181 @@ primitive: https://www.radix-vue.com/components/popover.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add select
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependencies
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
|
||||
npm install --save-dev @iconify/vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectItemIndicator,
|
||||
SelectItemText,
|
||||
SelectLabel,
|
||||
SelectPortal,
|
||||
SelectRoot,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
SelectViewport,
|
||||
} from 'radix-vue'
|
||||
|
||||
const fruit = ref()
|
||||
|
||||
function handleClick() {
|
||||
alert('hello!')
|
||||
}
|
||||
|
||||
const options = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
|
||||
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SelectRoot v-model="fruit">
|
||||
<SelectTrigger
|
||||
class="inline-flex w-[150px] items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9 outline-none"
|
||||
aria-label="Customise options"
|
||||
>
|
||||
<SelectValue placeholder="Select a fruit..." />
|
||||
<Icon icon="radix-icons:chevron-down" class="h-3.5 w-3.5" />
|
||||
</SelectTrigger>
|
||||
|
||||
<SelectPortal>
|
||||
<SelectContent
|
||||
class="w-[150px] bg-white rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
|
||||
:side-offset="5"
|
||||
position="popper"
|
||||
>
|
||||
<SelectScrollUpButton class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
|
||||
<Icon icon="radix-icons:chevron-up" />
|
||||
</SelectScrollUpButton>
|
||||
|
||||
<SelectViewport class="p-[5px]">
|
||||
<SelectLabel class="px-[25px] text-xs leading-[25px] text-mauve11">
|
||||
Fruits
|
||||
</SelectLabel>
|
||||
<SelectGroup>
|
||||
<SelectItem
|
||||
v-for="(option, index) in options"
|
||||
:key="index"
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
:value="option"
|
||||
>
|
||||
<SelectItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
||||
<Icon icon="radix-icons:check" />
|
||||
</SelectItemIndicator>
|
||||
<SelectItemText>
|
||||
{{ option }}
|
||||
</SelectItemText>
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
<SelectSeparator class="h-[1px] bg-green6 m-[5px]" />
|
||||
<SelectLabel class="px-[25px] text-xs leading-[25px] text-mauve11">
|
||||
Vegetables
|
||||
</SelectLabel>
|
||||
<SelectGroup>
|
||||
<SelectItem
|
||||
v-for="(option, index) in vegetables"
|
||||
:key="index"
|
||||
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
|
||||
:value="option"
|
||||
:disabled="option === 'Courgette'"
|
||||
>
|
||||
<SelectItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
|
||||
<Icon icon="radix-icons:check" />
|
||||
</SelectItemIndicator>
|
||||
<SelectItemText>
|
||||
{{ option }}
|
||||
</SelectItemText>
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectViewport>
|
||||
|
||||
<SelectScrollDownButton class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
|
||||
<Icon icon="radix-icons:chevron-down" />
|
||||
</SelectScrollDownButton>
|
||||
</SelectContent>
|
||||
</SelectPortal>
|
||||
</SelectRoot>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following code into your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...green,
|
||||
...grass,
|
||||
...mauve,
|
||||
},
|
||||
keyframes: {
|
||||
slideDownAndFade: {
|
||||
from: { opacity: 0, transform: 'translateY(-2px)' },
|
||||
to: { opacity: 1, transform: 'translateY(0)' },
|
||||
},
|
||||
slideLeftAndFade: {
|
||||
from: { opacity: 0, transform: 'translateX(2px)' },
|
||||
to: { opacity: 1, transform: 'translateX(0)' },
|
||||
},
|
||||
slideUpAndFade: {
|
||||
from: { opacity: 0, transform: 'translateY(2px)' },
|
||||
to: { opacity: 1, transform: 'translateY(0)' },
|
||||
},
|
||||
slideRightAndFade: {
|
||||
from: { opacity: 0, transform: 'translateX(-2px)' },
|
||||
to: { opacity: 1, transform: 'translateX(0)' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -39,7 +200,7 @@ import {
|
|||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/lib/registry/default/ui/select'
|
||||
} from '@/components/ui/select'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -8,29 +8,96 @@ primitive: https://www.radix-vue.com/components/separator.html
|
|||
<ComponentPreview name="SeparatorDemo" />
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add separator
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependency
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Separator } from 'radix-vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full max-w-[300px] mx-[15px]">
|
||||
<div class="text-white text-[15px] leading-5 font-semibold">
|
||||
Radix Primitives
|
||||
</div>
|
||||
<div class="text-white text-[15px] leading-5">
|
||||
An open-source UI component library.
|
||||
</div>
|
||||
<Separator
|
||||
class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-[15px]"
|
||||
/>
|
||||
<div class="flex h-5 items-center">
|
||||
<div class="text-white text-[15px] leading-5">
|
||||
Blog
|
||||
</div>
|
||||
<Separator
|
||||
class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
|
||||
decorative
|
||||
orientation="vertical"
|
||||
/>
|
||||
<div class="text-white text-[15px] leading-5">
|
||||
Docs
|
||||
</div>
|
||||
<Separator
|
||||
class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
|
||||
decorative
|
||||
orientation="vertical"
|
||||
/>
|
||||
<div class="text-white text-[15px] leading-5">
|
||||
Source
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following code into your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Separator } from '@/lib/registry/default/ui/separator'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -10,20 +10,20 @@ primitive: https://www.radix-vue.com/components/dialog.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add sheet
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
#### Coming soon...
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -36,7 +36,7 @@ import {
|
|||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from '@/lib/registry/default/ui/sheet'
|
||||
} from '@/components/ui/sheet'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -8,26 +8,46 @@ description: Use to show a placeholder while content is loading.
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add skeleton
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface SkeletonProps {
|
||||
class?: string
|
||||
}
|
||||
|
||||
const props = defineProps<SkeletonProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('animate-pulse rounded-md bg-secondary', props.class)" />
|
||||
</template>
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Skeleton } from '@/lib/registry/default/ui/skeleton'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -11,26 +11,81 @@ primitive: https://www.radix-vue.com/components/slider.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add slider
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependency:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
|
||||
|
||||
const sliderValue = ref([50])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SliderRoot
|
||||
v-model="sliderValue" class="relative flex items-center select-none touch-none w-[200px] h-5" :max="100"
|
||||
:step="1"
|
||||
>
|
||||
<SliderTrack class="bg-blackA10 relative grow rounded-full h-[3px]">
|
||||
<SliderRange class="absolute bg-white rounded-full h-full" />
|
||||
</SliderTrack>
|
||||
<SliderThumb
|
||||
class="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA7 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA8"
|
||||
aria-label="Volume"
|
||||
/>
|
||||
</SliderRoot>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following code into your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Slider } from '@/lib/registry/default/ui/slider'
|
||||
import { Slider } from '@/components/ui/slider'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -10,26 +10,77 @@ primitive: https://www.radix-vue.com/components/switch.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add switch
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependency:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { SwitchRoot, SwitchThumb } from 'radix-vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const switchState = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex gap-2 items-center">
|
||||
<label className="text-white text-[15px] leading-none pr-[15px] select-none" for="airplane-mode">
|
||||
Airplane mode
|
||||
</label>
|
||||
<SwitchRoot
|
||||
id="airplane-mode"
|
||||
v-model:checked="switchState"
|
||||
class="w-[42px] h-[25px] focus-within:outline focus-within:outline-black flex bg-black/50 shadow-sm rounded-full relative data-[state=checked]:bg-black cursor-default"
|
||||
>
|
||||
<SwitchThumb
|
||||
class="block w-[21px] h-[21px] my-auto bg-white shadow-sm rounded-full transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]"
|
||||
/>
|
||||
</SwitchRoot>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following code into your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Switch } from '@/lib/registry/default/ui/switch'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -8,20 +8,20 @@ description: A responsive table component.
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add table
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
#### Coming soon...
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -35,7 +35,7 @@ import {
|
|||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/lib/registry/default/ui/table'
|
||||
} from '@/components/ui/table'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -10,26 +10,160 @@ primitive: https://www.radix-vue.com/components/tabs.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add tabs
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependency:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'radix-vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TabsRoot class="flex flex-col w-full sm:w-[300px] shadow-[0_2px_10px] shadow-blackA4" default-value="tab1">
|
||||
<TabsList class="shrink-0 flex border-b border-mauve6" aria-label="Manage your account">
|
||||
<TabsTrigger
|
||||
class="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none first:rounded-tl-md last:rounded-tr-md hover:text-grass11 data-[state=active]:text-grass11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black outline-none cursor-default"
|
||||
value="tab1"
|
||||
>
|
||||
Account
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
class="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none first:rounded-tl-md last:rounded-tr-md hover:text-grass11 data-[state=active]:text-grass11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black outline-none cursor-default"
|
||||
value="tab2"
|
||||
>
|
||||
Password
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent
|
||||
class="grow p-5 bg-white rounded-b-md outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
|
||||
value="tab1"
|
||||
>
|
||||
<p class="mb-5 !mt-0 text-mauve11 text-[15px] !leading-normal">
|
||||
Make changes to your account here. Click save when you're done.
|
||||
</p>
|
||||
<fieldset class="mb-[15px] w-full flex flex-col justify-start">
|
||||
<label class="text-[13px] leading-none mb-2.5 text-green12 block" for="name"> Name </label>
|
||||
<input
|
||||
id="name"
|
||||
class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
||||
value="Pedro Duarte"
|
||||
>
|
||||
</fieldset>
|
||||
<fieldset class="mb-[15px] w-full flex flex-col justify-start">
|
||||
<label class="text-[13px] leading-none mb-2.5 text-green12 block" for="username"> Username </label>
|
||||
<input
|
||||
id="username"
|
||||
class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
||||
value="@peduarte"
|
||||
>
|
||||
</fieldset>
|
||||
<div class="flex justify-end mt-5">
|
||||
<button
|
||||
class="inline-flex items-center justify-center rounded px-[15px] text-[15px] leading-none font-medium h-[35px] bg-green4 text-green11 hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default"
|
||||
>
|
||||
Save changes
|
||||
</button>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent
|
||||
class="grow p-5 bg-white rounded-b-md outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
|
||||
value="tab2"
|
||||
>
|
||||
<p class="mb-5 !mt-0 text-mauve11 text-[15px] !leading-normal">
|
||||
Change your password here. After saving, you'll be logged out.
|
||||
</p>
|
||||
<fieldset class="mb-[15px] w-full flex flex-col justify-start">
|
||||
<label class="text-[13px] leading-none mb-2.5 text-green12 block" for="currentPassword">
|
||||
Current password
|
||||
</label>
|
||||
<input
|
||||
id="currentPassword"
|
||||
class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
||||
type="password"
|
||||
>
|
||||
</fieldset>
|
||||
<fieldset class="mb-[15px] w-full flex flex-col justify-start">
|
||||
<label class="text-[13px] leading-none mb-2.5 text-green12 block" for="newPassword"> New password </label>
|
||||
<input
|
||||
id="newPassword"
|
||||
class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
||||
type="password"
|
||||
>
|
||||
</fieldset>
|
||||
<fieldset class="mb-[15px] w-full flex flex-col justify-start">
|
||||
<label class="text-[13px] leading-none mb-2.5 text-green12 block" for="confirmPassword">
|
||||
Confirm password
|
||||
</label>
|
||||
<input
|
||||
id="confirmPassword"
|
||||
class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
|
||||
type="password"
|
||||
>
|
||||
</fieldset>
|
||||
<div class="flex justify-end mt-5">
|
||||
<button
|
||||
class="inline-flex items-center justify-center rounded px-[15px] text-[15px] leading-none font-medium h-[35px] bg-green4 text-green11 hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default"
|
||||
>
|
||||
Change password
|
||||
</button>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</TabsRoot>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following code into your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...green,
|
||||
...grass,
|
||||
...mauve,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -8,26 +8,46 @@ description: Displays a form textarea or a component that looks like a textarea.
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add textarea
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependency:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { cn } from '@/lib/utils'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<textarea :class="cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')" />
|
||||
</template>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Textarea } from '@/lib/registry/default/ui/textarea'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -11,26 +11,81 @@ primitive: https://www.radix-vue.com/components/toggle.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add toggle
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependencies:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
|
||||
npm install --save-dev @iconify/vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Toggle } from 'radix-vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const toggleState = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle
|
||||
v-model:pressed="toggleState" aria-label="Toggle italic"
|
||||
class="hover:bg-green3 text-mauve11 data-[state=on]:bg-green6 data-[state=on]:text-violet12 shadow-blackA7 flex h-[35px] w-[35px] items-center justify-center rounded bg-white text-base leading-4 shadow-[0_2px_10px] focus-within:shadow-[0_0_0_2px] focus-within:shadow-black"
|
||||
>
|
||||
<Icon icon="radix-icons:font-italic" class="w-[15px] h-[15px]" />
|
||||
</Toggle>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following code into your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA, green, grass, mauve } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...green,
|
||||
...grass,
|
||||
...mauve,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Toggle } from '@/lib/registry/default/ui/toggle'
|
||||
import { Toggle } from '@/components/ui/toggle'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -10,20 +10,111 @@ primitive: https://www.radix-vue.com/components/tooltip.html
|
|||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add tooltip
|
||||
```
|
||||
</template>
|
||||
|
||||
<ManualInstall>
|
||||
<template #Manual>
|
||||
|
||||
1. Install `radix-vue`:
|
||||
<Steps>
|
||||
|
||||
### Install the following dependencies:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
|
||||
npm install --save-dev @iconify/vue
|
||||
```
|
||||
|
||||
2. Copy and paste the component source files linked at the top of this page into your project.
|
||||
</ManualInstall>
|
||||
### Copy and paste the following code into your project
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from 'radix-vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TooltipProvider>
|
||||
<TooltipRoot>
|
||||
<TooltipTrigger
|
||||
class="text-grass11 shadow-blackA7 hover:bg-green3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
|
||||
>
|
||||
<Icon icon="radix-icons:plus" />
|
||||
</TooltipTrigger>
|
||||
<TooltipPortal>
|
||||
<TooltipContent
|
||||
as-child
|
||||
class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-grass11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
|
||||
:side-offset="5"
|
||||
>
|
||||
<ul>
|
||||
Add to library
|
||||
<TooltipArrow class="fill-white" size="8" />
|
||||
</ul>
|
||||
</TooltipContent>
|
||||
</TooltipPortal>
|
||||
</TooltipRoot>
|
||||
</TooltipProvider>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
||||
### Update `tailwind.config.js`
|
||||
|
||||
Add the following code into your `tailwind.config.js` file:
|
||||
|
||||
```ts
|
||||
const { blackA, green, grass } = require('@radix-ui/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...blackA,
|
||||
...green,
|
||||
...grass,
|
||||
},
|
||||
keyframes: {
|
||||
slideDownAndFade: {
|
||||
from: { opacity: 0, transform: 'translateY(-2px)' },
|
||||
to: { opacity: 1, transform: 'translateY(0)' },
|
||||
},
|
||||
slideLeftAndFade: {
|
||||
from: { opacity: 0, transform: 'translateX(2px)' },
|
||||
to: { opacity: 1, transform: 'translateX(0)' },
|
||||
},
|
||||
slideUpAndFade: {
|
||||
from: { opacity: 0, transform: 'translateY(2px)' },
|
||||
to: { opacity: 1, transform: 'translateY(0)' },
|
||||
},
|
||||
slideRightAndFade: {
|
||||
from: { opacity: 0, transform: 'translateX(-2px)' },
|
||||
to: { opacity: 1, transform: 'translateX(0)' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -34,7 +125,7 @@ import {
|
|||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger
|
||||
} from '@/lib/registry/default/ui/tooltip'
|
||||
} from '@/components/ui/tooltip'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -4,112 +4,56 @@ description: Styles for headings, paragraphs, lists...etc
|
|||
component: true
|
||||
---
|
||||
|
||||
<ComponentPreview name="TypographyDemo">
|
||||
|
||||
<div/>
|
||||
|
||||
</ComponentPreview>
|
||||
<ComponentPreview name="TypographyDemo" />
|
||||
|
||||
## h1
|
||||
|
||||
<ComponentPreview name="TypographyH1">
|
||||
|
||||
<div/>
|
||||
|
||||
</ComponentPreview>
|
||||
<ComponentPreview name="TypographyH1" />
|
||||
|
||||
## h2
|
||||
|
||||
<ComponentPreview name="TypographyH2">
|
||||
|
||||
<div/>
|
||||
|
||||
</ComponentPreview>
|
||||
<ComponentPreview name="TypographyH2" />
|
||||
|
||||
## h3
|
||||
|
||||
<ComponentPreview name="TypographyH3">
|
||||
|
||||
<div/>
|
||||
|
||||
</ComponentPreview>
|
||||
<ComponentPreview name="TypographyH3" />
|
||||
|
||||
## h4
|
||||
|
||||
<ComponentPreview name="TypographyH4">
|
||||
|
||||
<div/>
|
||||
|
||||
</ComponentPreview>
|
||||
<ComponentPreview name="TypographyH4" />
|
||||
|
||||
## p
|
||||
|
||||
<ComponentPreview name="TypographyP">
|
||||
|
||||
<div/>
|
||||
|
||||
</ComponentPreview>
|
||||
<ComponentPreview name="TypographyP" />
|
||||
|
||||
## blockquote
|
||||
|
||||
<ComponentPreview name="TypographyBlockquote">
|
||||
|
||||
<div/>
|
||||
|
||||
</ComponentPreview>
|
||||
<ComponentPreview name="TypographyBlockquote" />
|
||||
|
||||
## table
|
||||
|
||||
<ComponentPreview name="TypographyTable">
|
||||
|
||||
<div/>
|
||||
|
||||
</ComponentPreview>
|
||||
<ComponentPreview name="TypographyTable" />
|
||||
|
||||
## list
|
||||
|
||||
<ComponentPreview name="TypographyList">
|
||||
|
||||
<div/>
|
||||
|
||||
</ComponentPreview>
|
||||
<ComponentPreview name="TypographyList" />
|
||||
|
||||
## Inline code
|
||||
|
||||
<ComponentPreview name="TypographyInlineCode">
|
||||
|
||||
<div/>
|
||||
|
||||
</ComponentPreview>
|
||||
<ComponentPreview name="TypographyInlineCode" />
|
||||
|
||||
## Lead
|
||||
|
||||
<ComponentPreview name="TypographyLead">
|
||||
|
||||
<div/>
|
||||
|
||||
</ComponentPreview>
|
||||
<ComponentPreview name="TypographyLead" />
|
||||
|
||||
## Large
|
||||
|
||||
<ComponentPreview name="TypographyLarge">
|
||||
|
||||
<div/>
|
||||
|
||||
</ComponentPreview>
|
||||
<ComponentPreview name="TypographyLarge" />
|
||||
|
||||
## Small
|
||||
|
||||
<ComponentPreview name="TypographySmall">
|
||||
|
||||
<div/>
|
||||
|
||||
</ComponentPreview>
|
||||
<ComponentPreview name="TypographySmall" />
|
||||
|
||||
## Muted
|
||||
|
||||
<ComponentPreview name="TypographyMuted">
|
||||
|
||||
<div/>
|
||||
|
||||
</ComponentPreview>
|
||||
<ComponentPreview name="TypographyMuted" />
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
|
@ -7,16 +7,16 @@ import {
|
|||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/lib/registry/default/ui/card'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Label } from '@/lib/registry/default/ui/label'
|
||||
} from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/lib/registry/default/ui/select'
|
||||
} from '@/components/ui/select'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
<script setup lang="ts">
|
||||
import { Checkbox } from '@/lib/registry/default/ui/checkbox'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div className="items-top flex space-x-2">
|
||||
<Checkbox id="terms1" disabled />
|
||||
<div className="grid gap-1.5 leading-none">
|
||||
<label
|
||||
htmlFor="terms1"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Accept terms and conditions
|
||||
</label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
You agree to our Terms of Service and Privacy Policy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
|
||||
|
||||
const defaultValue = 'item-1'
|
||||
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@ import { ref } from 'vue'
|
|||
import RadixIconsCalendar from '~icons/radix-icons/calendar'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
import { Calendar } from '@/lib/registry/new-york/ui/calendar'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Calendar } from '@/components/ui/calendar'
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/lib/registry/new-york/ui/popover'
|
||||
} from '@/components/ui/popover'
|
||||
|
||||
const date = ref<Date>()
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user