Skip to content

Popover

Popover can be used for dropdowns and other popovers when element is clicked and focused.

View Source 

Usage

css
@import "winduum/src/components/popover/index.css" layer(components);
html
<div class="c-popover">
    <div role="button" class="ui-btn" tabindex="0">Popover</div>
    <div class="c-popover-content center shadow dark:bg-body-secondary mt-2.5 p-2 w-32 flex-col">
        <button class="ui-btn ghosted accent-main justify-start w-full">Item 1</button>
        <button class="ui-btn ghosted accent-main justify-start w-full">Item 2</button>
    </div>
</div>
vue
<script setup>
    import { ref } from 'vue'
    import { Popover, PopoverContent } from 'winduum-vue/components/popover'
    import { UiBtn } from 'winduum-vue/components/ui/btn'
</script>

<template>
    <Popover>
        <UiBtn>Open Popover</UiBtn>
        <PopoverContent>
            Popover content
        </PopoverContent>
    </Popover>
</template>

Variants

  • default 
  • content 

Tokens

Applicable to c-popover-content

  • end
  • block-end
  • center
  • block-center
  • top
  • right
  • left

Installation

Follow instructions for individual framework usage below

  • winduum 
  • winduum-vue  (soon)

Examples

Basic

html
<div class="c-popover">
    <div role="button" class="ui-btn" tabindex="0">Popover</div>
    <div class="c-popover-content center shadow dark:bg-body-secondary mt-2.5 p-2 w-32 flex-col">
        <button class="ui-btn ghosted accent-main justify-start w-full">Item 1</button>
        <button class="ui-btn ghosted accent-main justify-start w-full">Item 2</button>
    </div>
</div>

Hover

html
<div class="c-popover hover">
    <div role="button" class="ui-btn" tabindex="0">Popover</div>
    <div class="c-popover-content center shadow dark:bg-body-secondary mt-2.5 p-2 w-32 flex-col">
        <button class="ui-btn ghosted accent-main justify-start w-full">Item 1</button>
        <button class="ui-btn ghosted accent-main justify-start w-full">Item 2</button>
    </div>
</div>

Released under the MIT License.