Riupress UI

Appearance

Floating ​

This component is based on the library Floating UI helping to position one element in relation to another. It facilitates building such interface elements as dropdown and tooltip. An important element of the component is also the use of Composable Onclickotside from the library VueUse.

Props ​

placement
The position of the emerging component
type:String
default:bottom
values:top, top-start, top-end, right, right-start, right-end, bottom, bottom-start, bottom-end, left, left-start, left-end
type
Decides about the action that will cause a component
type:String
default:hover
values:hover, click
color
Color in the Tailwind palette
type:String
default:white
values:white, primary, secondary, warning, info, success, danger
radius
Rounding size
type:String
default:md
values:xs, sm, md, lg, xl
shadow
Shadow size
type:String
default:md
values:xs, sm, md, lg, xl
close
It allows you to force the closing from the content level, e.g. clicking on the Dropdown menu forces closing
type:Boolean
default:false

Slots ​

trigger
Calling button
content
Called element

Events ​

hideFloating
Should cause setting prop close false

Examples ​

Dropdown
html
<floating type="click">
  <template #trigger>
    <btn color="primary" text="Button" />
  </template>
  <template #content>
    <div class="p-2">Dropdown content</div>
  </template>
</floating>
Dropdown set by prop show
html
<script setup>
  import { ref } from 'vue'
  const closeit = ref(false)
  function close() {
    closeit.value = true
  }
</script>
<div class="block w-full"><a href="#" @click="close()">Show Dropdown</a></div>
<floating type="click" :close="closeit" @hide-floating="closeit=false">
  <template #trigger>
    <btn color="primary" text="Button" />
  </template>
  <template #content>
    <div class="p-2">Dropdown content z <a href="#" @click="close()">closing link</a></div>
  </template>
</floating>
Tooltip
html
<floating placement="right" color="primary">
  <template #trigger>
    <btn color="primary" text="Button" />
  </template>
  <template #content>
    <div class="px-2 py-1 text-sm text-white">Tooltip content</div>
  </template>
</floating>