Popover

a panel that opens next to the button that triggers it.

usage

scenario

example

code

import { Popover, Button } from 'charcell/react';

export function PopoverExample() {
  return (
    <Popover
      label="rider details"
      trigger={({ triggerProps }) => (
        <Button {...triggerProps} label="details" />
      )}
    >
      ben, leader of the polecats
    </Popover>
  );
}

<script setup lang="ts">
import { Popover, Button } from 'charcell/vue';
</script>

<template>
  <Popover label="rider details">
    ben, leader of the polecats
    <template #trigger="{ triggerProps }">
      <Button v-bind="triggerProps" label="details" />
    </template>
  </Popover>
</template>

<script lang="ts">
  import { Popover, Button } from 'charcell/svelte';
</script>

<Popover label="rider details">
  ben, leader of the polecats
  {#snippet trigger({ triggerProps })}
    <Button {...triggerProps} label="details" />
  {/snippet}
</Popover>

<!-- component: PopoverDriver (behavior not included) --><button
  class="CharcellButton CharcellButton--boxed CharcellButton--interactive"
  type="button"
>
  details</button
><!-- /component -->

import { Popover, Button } from 'charcell/react';

export function PopoverExample() {
  return (
    <Popover
      placement="right-start"
      label="rider details"
      trigger={({ triggerProps }) => (
        <Button {...triggerProps} label="details" />
      )}
    >
      ben, leader of the polecats
    </Popover>
  );
}

<script setup lang="ts">
import { Popover, Button } from 'charcell/vue';
</script>

<template>
  <Popover placement="right-start" label="rider details">
    ben, leader of the polecats
    <template #trigger="{ triggerProps }">
      <Button v-bind="triggerProps" label="details" />
    </template>
  </Popover>
</template>

<script lang="ts">
  import { Popover, Button } from 'charcell/svelte';
</script>

<Popover placement="right-start" label="rider details">
  ben, leader of the polecats
  {#snippet trigger({ triggerProps })}
    <Button {...triggerProps} label="details" />
  {/snippet}
</Popover>

<!-- component: PopoverDriver (behavior not included) --><button
  class="CharcellButton CharcellButton--boxed CharcellButton--interactive"
  type="button"
>
  details</button
><!-- /component -->

import { Popover, Button } from 'charcell/react';

export function PopoverExample() {
  return (
    <Popover
      label="rider details"
      border="none"
      trigger={({ triggerProps }) => (
        <Button {...triggerProps} label="details" />
      )}
    >
      ben, leader of the polecats
    </Popover>
  );
}

<script setup lang="ts">
import { Popover, Button } from 'charcell/vue';
</script>

<template>
  <Popover label="rider details" border="none">
    ben, leader of the polecats
    <template #trigger="{ triggerProps }">
      <Button v-bind="triggerProps" label="details" />
    </template>
  </Popover>
</template>

<script lang="ts">
  import { Popover, Button } from 'charcell/svelte';
</script>

<Popover label="rider details" border="none">
  ben, leader of the polecats
  {#snippet trigger({ triggerProps })}
    <Button {...triggerProps} label="details" />
  {/snippet}
</Popover>

<!-- component: PopoverDriver (behavior not included) --><button
  class="CharcellButton CharcellButton--boxed CharcellButton--interactive"
  type="button"
>
  details</button
><!-- /component -->

import { Popover, Button } from 'charcell/react';

export function PopoverExample() {
  return (
    <Popover
      label="rider details"
      border="single"
      trigger={({ triggerProps }) => (
        <Button {...triggerProps} label="details" />
      )}
    >
      ben, leader of the polecats
    </Popover>
  );
}

<script setup lang="ts">
import { Popover, Button } from 'charcell/vue';
</script>

<template>
  <Popover label="rider details" border="single">
    ben, leader of the polecats
    <template #trigger="{ triggerProps }">
      <Button v-bind="triggerProps" label="details" />
    </template>
  </Popover>
</template>

<script lang="ts">
  import { Popover, Button } from 'charcell/svelte';
</script>

<Popover label="rider details" border="single">
  ben, leader of the polecats
  {#snippet trigger({ triggerProps })}
    <Button {...triggerProps} label="details" />
  {/snippet}
</Popover>

<!-- component: PopoverDriver (behavior not included) --><button
  class="CharcellButton CharcellButton--boxed CharcellButton--interactive"
  type="button"
>
  details</button
><!-- /component -->

import { Popover, Button } from 'charcell/react';

export function PopoverExample() {
  return (
    <Popover
      label="rider details"
      border="rounded"
      trigger={({ triggerProps }) => (
        <Button {...triggerProps} label="details" />
      )}
    >
      ben, leader of the polecats
    </Popover>
  );
}

<script setup lang="ts">
import { Popover, Button } from 'charcell/vue';
</script>

<template>
  <Popover label="rider details" border="rounded">
    ben, leader of the polecats
    <template #trigger="{ triggerProps }">
      <Button v-bind="triggerProps" label="details" />
    </template>
  </Popover>
</template>

<script lang="ts">
  import { Popover, Button } from 'charcell/svelte';
</script>

<Popover label="rider details" border="rounded">
  ben, leader of the polecats
  {#snippet trigger({ triggerProps })}
    <Button {...triggerProps} label="details" />
  {/snippet}
</Popover>

<!-- component: PopoverDriver (behavior not included) --><button
  class="CharcellButton CharcellButton--boxed CharcellButton--interactive"
  type="button"
>
  details</button
><!-- /component -->

import { Popover, Button } from 'charcell/react';

export function PopoverExample() {
  return (
    <Popover
      label="rider details"
      border="heavy"
      trigger={({ triggerProps }) => (
        <Button {...triggerProps} label="details" />
      )}
    >
      ben, leader of the polecats
    </Popover>
  );
}

<script setup lang="ts">
import { Popover, Button } from 'charcell/vue';
</script>

<template>
  <Popover label="rider details" border="heavy">
    ben, leader of the polecats
    <template #trigger="{ triggerProps }">
      <Button v-bind="triggerProps" label="details" />
    </template>
  </Popover>
</template>

<script lang="ts">
  import { Popover, Button } from 'charcell/svelte';
</script>

<Popover label="rider details" border="heavy">
  ben, leader of the polecats
  {#snippet trigger({ triggerProps })}
    <Button {...triggerProps} label="details" />
  {/snippet}
</Popover>

<!-- component: PopoverDriver (behavior not included) --><button
  class="CharcellButton CharcellButton--boxed CharcellButton--interactive"
  type="button"
>
  details</button
><!-- /component -->

import { Popover, Button } from 'charcell/react';

export function PopoverExample() {
  return (
    <Popover
      label="rider details"
      border="double"
      trigger={({ triggerProps }) => (
        <Button {...triggerProps} label="details" />
      )}
    >
      ben, leader of the polecats
    </Popover>
  );
}

<script setup lang="ts">
import { Popover, Button } from 'charcell/vue';
</script>

<template>
  <Popover label="rider details" border="double">
    ben, leader of the polecats
    <template #trigger="{ triggerProps }">
      <Button v-bind="triggerProps" label="details" />
    </template>
  </Popover>
</template>

<script lang="ts">
  import { Popover, Button } from 'charcell/svelte';
</script>

<Popover label="rider details" border="double">
  ben, leader of the polecats
  {#snippet trigger({ triggerProps })}
    <Button {...triggerProps} label="details" />
  {/snippet}
</Popover>

<!-- component: PopoverDriver (behavior not included) --><button
  class="CharcellButton CharcellButton--boxed CharcellButton--interactive"
  type="button"
>
  details</button
><!-- /component -->

as text

at rest

┌─────────┐
│ details │
├─────────┴───────────────────╖
│ ben, leader of the polecats ║
╘═════════════════════════════╝

hover

┌─────────┐
│ details │
├─────────┴───────────────────╖
│ ben, leader of the polecats ║
╘═════════════════════════════╝

press

┌─────────┐
│ details │
├─────────┴───────────────────╖
│ ben, leader of the polecats ║
╘═════════════════════════════╝

focus

┌─────────┐
│❯details │
├─────────┴───────────────────╖
│ ben, leader of the polecats ║
╘═════════════════════════════╝

props

Popover

direction'ltr' | 'rtl': The reading direction its keys and placement follow ('rtl' mirrors the arrow keys); the page's, once mounted, when unset.
placementPlacement: Where the panel opens against its trigger, as a Zag placement ('bottom-start' when unset).
attachedboolean= true: Whether the panel grows out of a boxed trigger, sharing its last row of stroke; it does when it opens at a start placement ('bottom-start', 'top-start'), as placed once it fits the screen, and its left side, and the side it shares (its top below, its bottom above), are single or rounded, as a boxed Button's are. false holds it a row apart, for a trigger with no ring.
openboolean: Controlled open state; pair it with onOpenChange.; binds with v-model:open in vue, bind:open in svelte
defaultOpenboolean: Uncontrolled initial open state.
onOpenChange(open: boolean) => void: Called with the next open state on every machine-driven open or close.
closeOnInteractOutsideboolean= true: Whether an outside click closes the panel.
closeOnEscapeboolean= true: Whether escape closes the panel.
modalboolean= false: Trap focus and block outside interaction while open.
labelstring: The panel's accessible name.
widthnumber: The panel's width in whole cells, its ring included; it fits its content when unset.
minWidthnumber: The panel's least width in whole cells, its ring included: it grows past it with its content.
border'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of every side of the panel's ring: single, rounded, heavy, double or none.
borderX'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the panel's ring's start and end sides, over border.
borderY'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the panel's ring's top and bottom sides, over border.
borderTop'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the panel's ring's top side, over borderY and border.
borderEnd'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the panel's ring's end side, over borderX and border; double when none of them is set, raising the panel.
borderBottom'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the panel's ring's bottom side, over borderY and border; double when none of them is set, raising the panel.
borderStart'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the panel's ring's start side, over borderX and border.

PopoverPanel

attachedboolean: Fuses the window to a boxed trigger: it moves one row onto it and shares its stroke.
aboveboolean: Opened above the trigger, so an attached window shares the trigger's top stroke.
widthnumber: The window's width in whole cells, its ring included; it fits its content when unset, and never outgrows the space it has.
minWidthnumber: The window's least width in whole cells, its ring included: it grows past it with its content.
border'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of every side of the ring: single, rounded, heavy, double or none.
borderX'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the ring's start and end sides, over border.
borderY'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the ring's top and bottom sides, over border.
borderTop'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the ring's top side, over borderY and border.
borderEnd'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the ring's end side, over borderX and border.
borderBottom'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the ring's bottom side, over borderY and border.
borderStart'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the ring's start side, over borderX and border.

it also takes any other attribute of its <div>.

slots

in react, the default slot is children and each named slot a prop of its name, a function where the slot hands values; in vue, a slot; in svelte, a snippet.

Popover

trigger{ triggerProps: Record<string, unknown> }its values required: What opens the panel, typically a Button: spread triggerProps onto it.
default: The panel's content.

PopoverPanel

default