Docs
Dropdown Menu
Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Loading...
Loading...
import { UbButtonDirective } from '@/components/ui/button'
import {
DropdownSide,
UbDropdownMenuContentDirective,
UbDropdownMenuGroupDirective,
UbDropdownMenuItemDirective,
UbDropdownMenuLabelDirective,
UbDropdownMenuSeparator,
UbDropdownMenuShortcutDirective,
UbDropdownMenuSubContentDirective,
UbDropdownMenuSubTrigger,
UbDropdownMenuTriggerDirective,
} from '@/components/ui/dropdown-menu'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'dropdown-menu-demo-new-york',
imports: [
UbDropdownMenuTriggerDirective,
UbDropdownMenuContentDirective,
UbDropdownMenuLabelDirective,
UbDropdownMenuItemDirective,
UbDropdownMenuSeparator,
UbButtonDirective,
UbDropdownMenuGroupDirective,
UbDropdownMenuShortcutDirective,
UbDropdownMenuSubTrigger,
UbDropdownMenuSubContentDirective,
],
template: `
<button ubButton variant="outline" [ubDropdownMenuTrigger]="content">Open</button>
<ng-template #content>
<div ubDropdownMenuContent class="w-56">
<div ubDropdownMenuLabel>My Account</div>
<div ubDropdownMenuSeparator></div>
<section ubDropdownMenuGroup>
<div ubDropdownMenuItem>
Profile
<span ubDropdownMenuShortcut>⇧⌘P</span>
</div>
<div ubDropdownMenuItem>
Billing
<span ubDropdownMenuShortcut>⌘B</span>
</div>
<div ubDropdownMenuItem>
Settings
<span ubDropdownMenuShortcut>⌘S</span>
</div>
<div ubDropdownMenuItem>
Keyboard shortcuts
<span ubDropdownMenuShortcut>⌘K</span>
</div>
</section>
<div ubDropdownMenuSeparator></div>
<section ubDropdownMenuGroup>
<div ubDropdownMenuItem>
Team
</div>
<div>
<div [ubDropdownMenuSubTrigger]="team" [side]="DropdownSide.Right">
Invite users
</div>
</div>
<div ubDropdownMenuItem>
New Team
<span ubDropdownMenuShortcut>⌘+T</span>
</div>
</section>
<div ubDropdownMenuSeparator></div>
<div ubDropdownMenuItem>GitHub</div>
<div ubDropdownMenuItem>Support</div>
<div ubDropdownMenuItem disabled>API</div>
<div ubDropdownMenuSeparator></div>
<div ubDropdownMenuItem>
Log out
<span ubDropdownMenuShortcut>⇧⌘Q</span>
</div>
</div>
</ng-template>
<ng-template #team>
<div ubDropdownMenuSubContent class="w-56">
<div ubDropdownMenuItem>
Email
</div>
<div ubDropdownMenuItem>
Message
</div>
<div ubDropdownMenuSeparator></div>
<div ubDropdownMenuItem>
More...
</div>
</div>
</ng-template>
`,
})
export class DropDownMenuDemoNewYork {
protected readonly DropdownSide = DropdownSide
}import { UbButtonDirective } from '@/components/ui/button'
import {
DropdownSide,
UbDropdownMenuContentDirective,
UbDropdownMenuGroupDirective,
UbDropdownMenuItemDirective,
UbDropdownMenuLabelDirective,
UbDropdownMenuSeparator,
UbDropdownMenuShortcutDirective,
UbDropdownMenuSubContentDirective,
UbDropdownMenuSubTrigger,
UbDropdownMenuTriggerDirective,
} from '@/components/ui/dropdown-menu'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'dropdown-menu-demo-default',
imports: [
UbDropdownMenuTriggerDirective,
UbDropdownMenuContentDirective,
UbDropdownMenuLabelDirective,
UbDropdownMenuItemDirective,
UbDropdownMenuSeparator,
UbButtonDirective,
UbDropdownMenuGroupDirective,
UbDropdownMenuShortcutDirective,
UbDropdownMenuSubTrigger,
UbDropdownMenuSubContentDirective,
],
template: `
<button ubButton variant="outline" [ubDropdownMenuTrigger]="content">Open</button>
<ng-template #content>
<div ubDropdownMenuContent class="w-56">
<div ubDropdownMenuLabel>My Account</div>
<div ubDropdownMenuSeparator></div>
<section ubDropdownMenuGroup>
<div ubDropdownMenuItem>
Profile
<span ubDropdownMenuShortcut>⇧⌘P</span>
</div>
<div ubDropdownMenuItem>
Billing
<span ubDropdownMenuShortcut>⌘B</span>
</div>
<div ubDropdownMenuItem>
Settings
<span ubDropdownMenuShortcut>⌘S</span>
</div>
<div ubDropdownMenuItem>
Keyboard shortcuts
<span ubDropdownMenuShortcut>⌘K</span>
</div>
</section>
<div ubDropdownMenuSeparator></div>
<section ubDropdownMenuGroup>
<div ubDropdownMenuItem>
Team
</div>
<div>
<div [ubDropdownMenuSubTrigger]="team" [side]="DropdownSide.Right">
Invite users
</div>
</div>
<div ubDropdownMenuItem>
New Team
<span ubDropdownMenuShortcut>⌘+T</span>
</div>
</section>
<div ubDropdownMenuSeparator></div>
<div ubDropdownMenuItem>GitHub</div>
<div ubDropdownMenuItem>Support</div>
<div ubDropdownMenuItem disabled>API</div>
<div ubDropdownMenuSeparator></div>
<div ubDropdownMenuItem>
Log out
<span ubDropdownMenuShortcut>⇧⌘Q</span>
</div>
</div>
</ng-template>
<ng-template #team>
<div ubDropdownMenuSubContent class="w-56">
<div ubDropdownMenuItem>
Email
</div>
<div ubDropdownMenuItem>
Message
</div>
<div ubDropdownMenuSeparator></div>
<div ubDropdownMenuItem>
More...
</div>
</div>
</ng-template>
`,
})
export class DropDownMenuDemoDefault {
protected readonly DropdownSide = DropdownSide
}Installation
npx shadcn-ng@latest add dropdown-menu
npm
yarn
pnpm
bun
Copy and paste the following code into your project.
import { cn } from '@/lib/utils'
import { booleanAttribute, Component, computed, Directive, input } from '@angular/core'
import { NgIcon, provideIcons } from '@ng-icons/core'
import { radixCheck, radixChevronRight, radixCircle } from '@ng-icons/radix-icons'
import {
DropdownAlign,
DropdownSide,
RdxDropdownMenuContentDirective,
RdxDropdownMenuItemCheckboxDirective,
RdxDropdownMenuItemDirective,
RdxDropdownMenuItemIndicatorDirective,
RdxDropdownMenuItemRadioDirective,
RdxDropdownMenuItemRadioGroupDirective,
RdxDropdownMenuLabelDirective,
RdxDropdownMenuSeparatorDirective,
RdxDropdownMenuTriggerDirective,
} from '@radix-ng/primitives/dropdown-menu'
import { RdxMenuGroupDirective } from '@radix-ng/primitives/menu'
export { DropdownAlign, DropdownSide }
@Directive({
standalone: true,
selector: 'ubDropdownMenuTrigger',
hostDirectives: [
{
directive: RdxDropdownMenuTriggerDirective,
inputs: [
'rdxDropdownMenuTrigger: ubDropdownMenuTrigger',
'disabled',
'side',
'align',
'sideOffset',
'alignOffset',
],
outputs: ['onOpenChange'],
},
],
})
export class UbDropdownMenuTriggerDirective { }
@Directive({
standalone: true,
selector: '[ubDropdownMenuContent]',
hostDirectives: [
{
directive: RdxDropdownMenuContentDirective,
inputs: ['closeOnEscape', 'onEscapeKeyDown'],
},
],
host: {
'[class]': 'computedClass()',
},
})
export class UbDropdownMenuContentDirective {
class = input<string>()
computedClass = computed(() => cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
this.class(),
))
}
@Directive({
standalone: true,
selector: '[ubDropdownMenuItem]',
hostDirectives: [
{
directive: RdxDropdownMenuItemDirective,
inputs: ['disabled'],
outputs: ['onSelect'],
},
],
host: {
'[class]': 'computedClass()',
},
})
export class UbDropdownMenuItemDirective {
class = input<string>()
inset = input(false, {
transform: booleanAttribute,
})
computedClass = computed(() => cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
this.inset() && 'pl-8',
this.class(),
))
}
@Directive({
standalone: true,
selector: '[ubDropdownMenuLabel]',
hostDirectives: [RdxDropdownMenuLabelDirective],
host: {
'[class]': 'computedClass()',
},
})
export class UbDropdownMenuLabelDirective {
class = input<string>()
inset = input(false, {
transform: booleanAttribute,
})
computedClass = computed(() => cn(
'px-2 py-1.5 text-sm font-semibold',
this.inset() && 'pl-8',
this.class(),
))
}
@Directive({
standalone: true,
selector: '[ubDropdownMenuSeparator]',
hostDirectives: [RdxDropdownMenuSeparatorDirective],
host: {
'[class]': 'computedClass()',
},
})
export class UbDropdownMenuSeparator {
class = input<string>()
computedClass = computed(() => cn('-mx-1 my-1 h-px bg-muted', this.class()))
}
@Directive({
standalone: true,
selector: '[ubDropdownMenuGroup]',
hostDirectives: [RdxMenuGroupDirective],
})
export class UbDropdownMenuGroupDirective { }
@Directive({
standalone: true,
selector: 'span[ubDropdownMenuShortcut]',
host: {
'[class]': 'computedClass()',
},
})
export class UbDropdownMenuShortcutDirective {
class = input<string>()
computedClass = computed(() => cn('ml-auto text-xs tracking-widest opacity-60', this.class()))
}
@Directive({
standalone: true,
selector: '[ubDropdownMenuSubContent]',
hostDirectives: [
{
directive: RdxDropdownMenuContentDirective,
inputs: ['closeOnEscape', 'onEscapeKeyDown'],
},
],
host: {
'[class]': 'computedClass()',
},
})
export class UbDropdownMenuSubContentDirective {
class = input<string>()
computedClass = computed(() => cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', this.class()))
}
@Component({
standalone: true,
selector: '[ubDropdownMenuSubTrigger]',
imports: [NgIcon],
providers: [provideIcons({ radixChevronRight })],
hostDirectives: [
UbDropdownMenuItemDirective,
{
directive: RdxDropdownMenuTriggerDirective,
inputs: [
'rdxDropdownMenuTrigger: ubDropdownMenuSubTrigger',
'disabled',
'side',
'align',
'sideOffset',
'alignOffset',
],
outputs: ['onOpenChange'],
},
],
host: {
'[class]': 'computedClass()',
},
template: `
<ng-content />
<ng-icon name="radixChevronRight" class="ml-auto" />
`,
})
export class UbDropdownMenuSubTrigger {
class = input<string>()
inset = input(false, {
transform: booleanAttribute,
})
computedClass = computed(() => cn('flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', this.inset() && 'pl-8', this.class()))
}
@Component({
standalone: true,
selector: '[ubDropdownMenuCheckboxItem]',
imports: [NgIcon, RdxDropdownMenuItemIndicatorDirective],
providers: [provideIcons({ radixCheck })],
hostDirectives: [
{
directive: RdxDropdownMenuItemCheckboxDirective,
inputs: ['checked', 'disabled'],
outputs: ['checkedChange'],
},
],
host: {
'[class]': 'computedClass()',
},
template: `
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<ng-icon name="radixCheck" class="h-4 w-4" rdxDropdownMenuItemIndicator />
</span>
<ng-content></ng-content>
`,
})
export class UbDropdownMenuCheckboxItemDirective {
class = input<string>()
computedClass = computed(() => cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.class(),
))
}
@Component({
standalone: true,
selector: '[ubDropdownMenuRadioItem]',
imports: [NgIcon, RdxDropdownMenuItemIndicatorDirective],
providers: [provideIcons({ radixCircle })],
hostDirectives: [
{
directive: RdxDropdownMenuItemRadioDirective,
inputs: ['value'],
},
],
host: {
'[class]': 'computedClass()',
},
template: `
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<ng-icon name="radixCircle" class="h-2 w-2 fill-current" rdxDropdownMenuItemIndicator />
</span>
<ng-content></ng-content>
`,
})
export class UbDropdownMenuRadioItemDirective {
class = input<string>()
computedClass = computed(() => cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.class(),
))
}
@Directive({
standalone: true,
selector: '[ubDropdownMenuRadioGroup]',
hostDirectives: [
{
directive: RdxDropdownMenuItemRadioGroupDirective,
inputs: ['value'],
outputs: ['valueChange'],
},
],
})
export class UbDropdownMenuRadioGroupDirective { }import { cn } from '@/lib/utils'
import { booleanAttribute, Component, computed, Directive, input } from '@angular/core'
import { NgIcon, provideIcons } from '@ng-icons/core'
import { lucideCheck, lucideChevronRight, lucideCircle } from '@ng-icons/lucide'
import {
DropdownAlign,
DropdownSide,
RdxDropdownMenuContentDirective,
RdxDropdownMenuItemCheckboxDirective,
RdxDropdownMenuItemDirective,
RdxDropdownMenuItemIndicatorDirective,
RdxDropdownMenuItemRadioDirective,
RdxDropdownMenuItemRadioGroupDirective,
RdxDropdownMenuLabelDirective,
RdxDropdownMenuSeparatorDirective,
RdxDropdownMenuTriggerDirective,
} from '@radix-ng/primitives/dropdown-menu'
import { RdxMenuGroupDirective } from '@radix-ng/primitives/menu'
export { DropdownAlign, DropdownSide }
@Directive({
standalone: true,
selector: 'ubDropdownMenuTrigger',
hostDirectives: [
{
directive: RdxDropdownMenuTriggerDirective,
inputs: [
'rdxDropdownMenuTrigger: ubDropdownMenuTrigger',
'disabled',
'side',
'align',
'sideOffset',
'alignOffset',
],
outputs: ['onOpenChange'],
},
],
})
export class UbDropdownMenuTriggerDirective { }
@Directive({
standalone: true,
selector: '[ubDropdownMenuContent]',
hostDirectives: [
{
directive: RdxDropdownMenuContentDirective,
inputs: ['closeOnEscape', 'onEscapeKeyDown'],
},
],
host: {
'[class]': 'computedClass()',
},
})
export class UbDropdownMenuContentDirective {
class = input<string>()
computedClass = computed(() => cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
this.class(),
))
}
@Directive({
standalone: true,
selector: '[ubDropdownMenuItem]',
hostDirectives: [
{
directive: RdxDropdownMenuItemDirective,
inputs: ['disabled'],
outputs: ['onSelect'],
},
],
host: {
'[class]': 'computedClass()',
},
})
export class UbDropdownMenuItemDirective {
class = input<string>()
inset = input(false, {
transform: booleanAttribute,
})
computedClass = computed(() => cn(
'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
this.inset() && 'pl-8',
this.class(),
))
}
@Directive({
standalone: true,
selector: '[ubDropdownMenuLabel]',
hostDirectives: [RdxDropdownMenuLabelDirective],
host: {
'[class]': 'computedClass()',
},
})
export class UbDropdownMenuLabelDirective {
class = input<string>()
inset = input(false, {
transform: booleanAttribute,
})
computedClass = computed(() => cn(
'px-2 py-1.5 text-sm font-semibold',
this.inset() && 'pl-8',
this.class(),
))
}
@Directive({
standalone: true,
selector: '[ubDropdownMenuSeparator]',
hostDirectives: [RdxDropdownMenuSeparatorDirective],
host: {
'[class]': 'computedClass()',
},
})
export class UbDropdownMenuSeparator {
class = input<string>()
computedClass = computed(() => cn('-mx-1 my-1 h-px bg-muted', this.class()))
}
@Directive({
standalone: true,
selector: '[ubDropdownMenuGroup]',
hostDirectives: [RdxMenuGroupDirective],
})
export class UbDropdownMenuGroupDirective { }
@Directive({
standalone: true,
selector: 'span[ubDropdownMenuShortcut]',
host: {
'[class]': 'computedClass()',
},
})
export class UbDropdownMenuShortcutDirective {
class = input<string>()
computedClass = computed(() => cn('ml-auto text-xs tracking-widest opacity-60', this.class()))
}
@Directive({
standalone: true,
selector: '[ubDropdownMenuSubContent]',
hostDirectives: [
{
directive: RdxDropdownMenuContentDirective,
inputs: ['closeOnEscape', 'onEscapeKeyDown'],
},
],
host: {
'[class]': 'computedClass()',
},
})
export class UbDropdownMenuSubContentDirective {
class = input<string>()
computedClass = computed(() => cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', this.class()))
}
@Component({
standalone: true,
selector: '[ubDropdownMenuSubTrigger]',
imports: [NgIcon],
providers: [provideIcons({ lucideChevronRight })],
hostDirectives: [
UbDropdownMenuItemDirective,
{
directive: RdxDropdownMenuTriggerDirective,
inputs: [
'rdxDropdownMenuTrigger: ubDropdownMenuSubTrigger',
'disabled',
'side',
'align',
'sideOffset',
'alignOffset',
],
outputs: ['onOpenChange'],
},
],
host: {
'[class]': 'computedClass()',
},
template: `
<ng-content />
<ng-icon name="lucideChevronRight" class="ml-auto" />
`,
})
export class UbDropdownMenuSubTrigger {
class = input<string>()
inset = input(false, {
transform: booleanAttribute,
})
computedClass = computed(() => cn('flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', this.inset() && 'pl-8', this.class()))
}
@Component({
standalone: true,
selector: '[ubDropdownMenuCheckboxItem]',
imports: [NgIcon, RdxDropdownMenuItemIndicatorDirective],
providers: [provideIcons({ lucideCheck })],
hostDirectives: [
{
directive: RdxDropdownMenuItemCheckboxDirective,
inputs: ['checked', 'disabled'],
outputs: ['checkedChange'],
},
],
host: {
'[class]': 'computedClass()',
},
template: `
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<ng-icon name="lucideCheck" class="h-4 w-4" rdxDropdownMenuItemIndicator />
</span>
<ng-content></ng-content>
`,
})
export class UbDropdownMenuCheckboxItemDirective {
class = input<string>()
computedClass = computed(() => cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.class()))
}
@Component({
standalone: true,
selector: '[ubDropdownMenuRadioItem]',
imports: [NgIcon, RdxDropdownMenuItemIndicatorDirective],
providers: [provideIcons({ lucideCircle })],
hostDirectives: [
{
directive: RdxDropdownMenuItemRadioDirective,
inputs: ['value'],
},
],
host: {
'[class]': 'computedClass()',
},
template: `
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<ng-icon name="lucideCircle" class="h-2 w-2 fill-current" rdxDropdownMenuItemIndicator />
</span>
<ng-content></ng-content>
`,
})
export class UbDropdownMenuRadioItemDirective {
class = input<string>()
computedClass = computed(() => cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.class(),
))
}
@Directive({
standalone: true,
selector: '[ubDropdownMenuRadioGroup]',
hostDirectives: [
{
directive: RdxDropdownMenuItemRadioGroupDirective,
inputs: ['value'],
outputs: ['valueChange'],
},
],
})
export class UbDropdownMenuRadioGroupDirective { }Update the import paths to match your project setup.
Usage
import {
UbDropdownMenuContentDirective,
UbDropdownMenuItemDirective,
UbDropdownMenuLabelDirective,
UbDropdownMenuSeparator,
UbDropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"<button [ubDropdownMenuTrigger]="menu">Open</button>
<ng-template #menu>
<div ubDropdownMenuContent>
<div ubDropdownMenuLabel>My Account</div>
<div ubDropdownMenuSeparator></div>
<div ubDropdownMenuItem>Profile</div>
<div ubDropdownMenuItem>Billing</div>
<div ubDropdownMenuItem>Team</div>
<div ubDropdownMenuItem>Subscription</div>
</div>
</ng-template>Examples
Checkboxes
Loading...
Loading...
import { UbButtonDirective } from '@/components/ui/button'
import {
UbDropdownMenuCheckboxItemDirective,
UbDropdownMenuContentDirective,
UbDropdownMenuLabelDirective,
UbDropdownMenuSeparator,
UbDropdownMenuTriggerDirective,
} from '@/components/ui/dropdown-menu'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'dropdown-menu-demo-new-york',
imports: [
UbDropdownMenuTriggerDirective,
UbDropdownMenuContentDirective,
UbDropdownMenuLabelDirective,
UbDropdownMenuSeparator,
UbButtonDirective,
UbDropdownMenuCheckboxItemDirective,
],
template: `
<button ubButton variant="outline" [ubDropdownMenuTrigger]="content">Open</button>
<ng-template #content>
<div ubDropdownMenuContent class="w-56">
<div ubDropdownMenuLabel>Appearance</div>
<div ubDropdownMenuSeparator></div>
<div ubDropdownMenuCheckboxItem [(checked)]="statusBar">
Status Bar
</div>
<div ubDropdownMenuCheckboxItem [(checked)]="activityBar" disabled>
Activity Bar
</div>
<div ubDropdownMenuCheckboxItem [(checked)]="panel">
Panel
</div>
</div>
</ng-template>
`,
})
export class DropDownMenuCheckboxesNewYork {
statusBar = true
activityBar = false
panel = false
}import { UbButtonDirective } from '@/components/ui/button'
import {
UbDropdownMenuCheckboxItemDirective,
UbDropdownMenuContentDirective,
UbDropdownMenuLabelDirective,
UbDropdownMenuSeparator,
UbDropdownMenuTriggerDirective,
} from '@/components/ui/dropdown-menu'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'dropdown-menu-demo-default',
imports: [
UbDropdownMenuTriggerDirective,
UbDropdownMenuContentDirective,
UbDropdownMenuLabelDirective,
UbDropdownMenuSeparator,
UbButtonDirective,
UbDropdownMenuCheckboxItemDirective,
],
template: `
<button ubButton variant="outline" [ubDropdownMenuTrigger]="content">Open</button>
<ng-template #content>
<div ubDropdownMenuContent class="w-56">
<div ubDropdownMenuLabel>Appearance</div>
<div ubDropdownMenuSeparator></div>
<div ubDropdownMenuCheckboxItem [(checked)]="statusBar">
Status Bar
</div>
<div ubDropdownMenuCheckboxItem [(checked)]="activityBar" disabled>
Activity Bar
</div>
<div ubDropdownMenuCheckboxItem [(checked)]="panel">
Panel
</div>
</div>
</ng-template>
`,
})
export class DropDownMenuCheckboxesDefault {
statusBar = true
activityBar = false
panel = false
}Radio Group
Loading...
Loading...
import { UbButtonDirective } from '@/components/ui/button'
import {
UbDropdownMenuContentDirective,
UbDropdownMenuLabelDirective,
UbDropdownMenuRadioGroupDirective,
UbDropdownMenuRadioItemDirective,
UbDropdownMenuSeparator,
UbDropdownMenuTriggerDirective,
} from '@/components/ui/dropdown-menu'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'dropdown-menu-demo-new-york',
imports: [
UbDropdownMenuTriggerDirective,
UbDropdownMenuContentDirective,
UbDropdownMenuLabelDirective,
UbDropdownMenuSeparator,
UbButtonDirective,
UbDropdownMenuRadioItemDirective,
UbDropdownMenuRadioGroupDirective,
],
template: `
<button ubButton variant="outline" [ubDropdownMenuTrigger]="content">Open</button>
<ng-template #content>
<div ubDropdownMenuContent class="w-56">
<div ubDropdownMenuLabel>Panel Position</div>
<div ubDropdownMenuSeparator></div>
<div ubDropdownMenuRadioGroup [(value)]="position">
<div ubDropdownMenuRadioItem value="top">
Top
</div>
<div ubDropdownMenuRadioItem value="bottom">
Bottom
</div>
<div ubDropdownMenuRadioItem value="right">
Right
</div>
</div>
</div>
</ng-template>
`,
})
export class DropDownMenuRadioGroupNewYork {
position = 'bottom'
}import { UbButtonDirective } from '@/components/ui/button'
import {
UbDropdownMenuContentDirective,
UbDropdownMenuLabelDirective,
UbDropdownMenuRadioGroupDirective,
UbDropdownMenuRadioItemDirective,
UbDropdownMenuSeparator,
UbDropdownMenuTriggerDirective,
} from '@/components/ui/dropdown-menu'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'dropdown-menu-demo-default',
imports: [
UbDropdownMenuTriggerDirective,
UbDropdownMenuContentDirective,
UbDropdownMenuLabelDirective,
UbDropdownMenuSeparator,
UbButtonDirective,
UbDropdownMenuRadioItemDirective,
UbDropdownMenuRadioGroupDirective,
],
template: `
<button ubButton variant="outline" [ubDropdownMenuTrigger]="content">Open</button>
<ng-template #content>
<div ubDropdownMenuContent class="w-56">
<div ubDropdownMenuLabel>Panel Position</div>
<div ubDropdownMenuSeparator></div>
<div ubDropdownMenuRadioGroup [(value)]="position">
<div ubDropdownMenuRadioItem value="top">
Top
</div>
<div ubDropdownMenuRadioItem value="bottom">
Bottom
</div>
<div ubDropdownMenuRadioItem value="right">
Right
</div>
</div>
</div>
</ng-template>
`,
})
export class DropDownMenuRadioGroupDefault {
position = 'bottom'
}