Popover — usage examples

Popover ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { useState } from 'react';
import { Popover } from '@rozie-ui/popover-react';
import '@floating-ui/dom'; // peer engine — installed alongside this package

export function Demo() {
  const [open, setOpen] = useState(false);
  return (
    <Popover
      open={open}
      onOpenChange={setOpen}
      trigger="click"
      placement="bottom"
      offset={8}
      arrow
      onChange={(next) => console.log('open:', next)}
      anchor={({ toggle }) => <button onClick={toggle}>Menu</button>}
    >
      <div>Floating content</div>
    </Popover>
  );
}

vue

<script setup lang="ts">
import { ref } from 'vue';
import Popover from '@rozie-ui/popover-vue';

const open = ref(false);
</script>

<template>
  <Popover v-model:open="open" trigger="click" placement="bottom" :offset="8" arrow @change="(o) => console.log('open:', o)">
    <template #anchor="{ toggle }">
      <button @click="toggle">Menu</button>
    </template>
    <div>Floating content</div>
  </Popover>
</template>

svelte

<script lang="ts">
  import Popover from '@rozie-ui/popover-svelte';

  let open = $state(false);
</script>

<Popover bind:open trigger="click" placement="bottom" offset={8} arrow onchange={(o) => console.log('open:', o)}>
  {#snippet anchor({ toggle })}
    <button onclick={toggle}>Menu</button>
  {/snippet}
  <div>Floating content</div>
</Popover>

import { Component } from '@angular/core';
import { Popover } from '@rozie-ui/popover-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Popover],
  template: `
    <Popover [(open)]="open" trigger="click" placement="bottom" [offset]="8" [arrow]="true" (change)="onChange($event)">
      <ng-template #anchor let-toggle="toggle">
        <button (click)="toggle()">Menu</button>
      </ng-template>
      <div>Floating content</div>
    </Popover>
  `,
})
export class DemoComponent {
  open = false;
  onChange(next: boolean) {
    console.log('open:', next);
  }
}

tsx

import { createSignal } from 'solid-js';
import { Popover } from '@rozie-ui/popover-solid';

export function Demo() {
  const [open, setOpen] = createSignal(false);
  return (
    <Popover
      open={open()}
      onOpenChange={setOpen}
      trigger="click"
      placement="bottom"
      offset={8}
      arrow
      onChange={(next) => console.log('open:', next)}
      anchor={({ toggle }) => <button onClick={toggle}>Menu</button>}
    >
      <div>Floating content</div>
    </Popover>
  );
}

import '@rozie-ui/popover-lit';
import '@floating-ui/dom'; // peer engine

// <rozie-popover> is a custom element. Bind `open`/`placement`/`trigger`/`offset`/
// `arrow` as properties; listen for `change` for the new open boolean, or
// `open-change` to drive the two-way model. Project the anchor into the `anchor`
// slot and the content into the default slot.
const el = document.querySelector('rozie-popover');
el.trigger = 'click';
el.placement = 'bottom';
el.offset = 8;
el.arrow = true;
el.addEventListener('open-change', (e) => {
  el.open = e.detail;
});
el.addEventListener('change', (e) => {
  console.log('open:', e.detail);
});

Imperative handle

Beyond props and events, Popover exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { Popover, type PopoverHandle } from '@rozie-ui/popover-react';

const pop = useRef<PopoverHandle>(null);
// <Popover ref={pop} ... />
pop.current?.show();
pop.current?.hide();
pop.current?.toggle();
pop.current?.reposition();

vue

<script setup>
import { ref } from 'vue';
const pop = ref();          // template ref
</script>

<template>
  <Popover ref="pop" v-model:open="open"> ... </Popover>
  <button @click="pop.show()">Open</button>
  <button @click="pop.reposition()">Reposition</button>
</template>

svelte

<script>
  let pop;                  // component instance via bind:this
</script>

<Popover bind:this={pop} bind:open> ... </Popover>
<button onclick={() => pop.show()}>Open</button>
<button onclick={() => pop.reposition()}>Reposition</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Popover) pop!: Popover;   // or the viewChild() signal
  open() { this.pop.show(); }
  reflow() { this.pop.reposition(); }
}

tsx

import { Popover, type PopoverHandle } from '@rozie-ui/popover-solid';

let handle: PopoverHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<Popover ref={(h) => (handle = h)} open={open()}> ... </Popover>;
handle?.show();
handle?.reposition();

// The custom element IS the handle — exposed methods are public element methods.
const el = document.querySelector('rozie-popover');
el.show();
el.hide();
el.toggle();
el.reposition();

Popover — usage examples ​

Usage ​

Imperative handle ​

See also ​

Popover — usage examples

Usage

Imperative handle

See also