|
| 1 | +import { Component } from '@angular/core'; |
| 2 | +import { RdxAccordionHeaderDirective, RdxAccordionTriggerDirective } from '@radix-ng/primitives/accordion'; |
| 3 | +import { LucideAngularModule, Plus } from 'lucide-angular'; |
| 4 | +import { OriAccordion, OriAccordionContent, OriAccordionItem } from '~/registry/default/ui/accordion'; |
| 5 | + |
| 6 | +@Component({ |
| 7 | + selector: 'accordion-02', |
| 8 | + imports: [ |
| 9 | + OriAccordion, |
| 10 | + OriAccordionItem, |
| 11 | + OriAccordionContent, |
| 12 | + RdxAccordionHeaderDirective, |
| 13 | + RdxAccordionTriggerDirective, |
| 14 | + LucideAngularModule |
| 15 | + ], |
| 16 | + template: ` |
| 17 | + <div class="space-y-4"> |
| 18 | + <h2 class="text-xl font-bold">W/ plus-minus</h2> |
| 19 | + <div class="w-full" type="single" oriAccordion value="3"> |
| 20 | + @for (item of items; track $index) { |
| 21 | + <div class="py-2" [value]="item.id" oriAccordionItem> |
| 22 | + <h3 class="group flex" rdxAccordionHeader> |
| 23 | + <button |
| 24 | + class="focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 group-data-[state=open]:[&>*>svg]:rotate-180" |
| 25 | + rdxAccordionTrigger |
| 26 | + type="button" |
| 27 | + > |
| 28 | + {{ item.title }} |
| 29 | + <lucide-icon |
| 30 | + class="pointer-events-none shrink-0 opacity-60 transition-transform duration-200" |
| 31 | + [img]="Plus" |
| 32 | + size="16" |
| 33 | + aria-hidden="true" |
| 34 | + /> |
| 35 | + </button> |
| 36 | + </h3> |
| 37 | + <div class="text-muted-foreground pb-2" oriAccordionContent> |
| 38 | + {{ item.content }} |
| 39 | + </div> |
| 40 | + </div> |
| 41 | + } |
| 42 | + </div> |
| 43 | + </div> |
| 44 | + ` |
| 45 | +}) |
| 46 | +export default class Accordion02Component { |
| 47 | + readonly items = [ |
| 48 | + { |
| 49 | + id: '1', |
| 50 | + title: 'What makes Origin UI different?', |
| 51 | + content: |
| 52 | + 'Origin UI focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.' |
| 53 | + }, |
| 54 | + { |
| 55 | + id: '2', |
| 56 | + title: 'How can I customize the components?', |
| 57 | + content: |
| 58 | + 'Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.' |
| 59 | + }, |
| 60 | + { |
| 61 | + id: '3', |
| 62 | + title: 'Is Origin UI optimized for performance?', |
| 63 | + content: |
| 64 | + 'Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.' |
| 65 | + }, |
| 66 | + { |
| 67 | + id: '4', |
| 68 | + title: 'How accessible are the components?', |
| 69 | + content: |
| 70 | + 'All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.' |
| 71 | + } |
| 72 | + ]; |
| 73 | + protected readonly Plus = Plus; |
| 74 | +} |
0 commit comments