Popover

Hiển thị nội dung phong phú trong portal, được kích hoạt bởi button.

Open popover

Cài đặt

npm

npx @galaxy-stack/nebula-cli@latest add popover

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add popover

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add popover

bun

bunx @galaxy-stack/nebula-cli@latest add popover

Sử dụng

Vue

<script setup lang="ts">
import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui'
</script>

<template>
  <Popover>
    <PopoverTrigger>Mở</PopoverTrigger>
    <PopoverContent>
      <div class="space-y-2">
        <h4 class="font-medium">Kích Thước</h4>
        <p class="text-sm">Đặt kích thước cho layer.</p>
      </div>
    </PopoverContent>
  </Popover>
</template>

React

import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui'

export default function PopoverDemo() {
  return (
    <Popover>
      <PopoverTrigger>Mở</PopoverTrigger>
      <PopoverContent>
        <div className="space-y-2">
          <h4 className="font-medium">Kích Thước</h4>
          <p className="text-sm">Đặt kích thước cho layer.</p>
        </div>
      </PopoverContent>
    </Popover>
  )
}

Angular

import { Component } from '@angular/core';
import { PopoverComponent } from '@/components/ui';

@Component({
  selector: 'app-popover-demo',
  standalone: true,
  imports: [PopoverComponent],
  template: `
    <ui-popover>
      <button trigger>Mở</button>
      <div content>
        <h4>Kích Thước</h4>
        <p>Đặt kích thước cho layer.</p>
      </div>
    </ui-popover>
  `
})
export class PopoverDemoComponent {}

Khả năng truy cập

• Điều hướng bàn phím: [TODO]
• Đọc màn hình: [TODO]
• Quản lý focus: [TODO]
• Tuân thủ WCAG: Tuân thủ WCAG 2.1 cấp độ AA

Tác giả

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

Giấy phép

MIT © 2025 Bùi Trọng Hiếu (kevinbui)