pages._explore-components-base-overlay.title

pages._explore.sections.basic-usage.title

html

<BaseButton
  text="Toggle Basic Overlay"
  @triggered="fnToggleUIActivityState(basicOverlayKey)"
/>
<BaseOverlay
  :item-key="basicOverlayKey"
>
  <div> 
    Some Content Inside the Basic Overlay
  </div>
</BaseOverlay>

typescript

<script setup lang="ts">

// composables
const { fnToggleUIActivityState } = useUIState()

// state
const basicOverlayKey = 'basicOverlay'

</script>

pages._explore.sections.complex-usage.title

html

<BaseButton
  text="Toggle Complex Overlay"
  @triggered="fnToggleUIActivityState(complexOverlayKey)"
/>
<BaseOverlay
  :item-key="complexOverlayKey"
  :backdrop-classes="'!bg-green/10 transition-all duration-250 ease-in-out backdrop-blur-sm'"
  :content-position="BaseOverlayContentPositionOptions.LEFT"
  :content-classes="'bg-surface/80 transition-all duration-400 ease-in-out'"
  :toggle-effect="BaseOverlayToggleEffects.SLIDE"
>
  <div> 
    Some Content Side Content Overlay
  </div>
</BaseOverlay>

typescript

<script setup lang="ts">
import { BaseOverlayContentPositionOptions, BaseOverlayToggleEffects } from '#core-types/components/base/base-overlay'

// composables
const { fnToggleUIActivityState } = useUIState()

// state
const complexOverlayKey = 'compleOverlay'

</script>

pages._explore.sections.props.title

Prop	Default	Type
itemKey	BaseDropdownOpeningPositions.BOTTOM	string
backdropClasses	delay-250 transition-all duration-250 ease-in-out backdrop-blur-sm	string
contentPosition	center	BaseOverlayContentPositionOptions
contentClasses	transition-all duration-400 ease-in-out	string
contentSizeClasses	''	string
toggleEffect	fade	BaseOverlayToggleEffects

pages._explore.sections.types.title

Name	Type	Options
BaseOverlayContentPositionOptions	enum	CENTER \| TOP \| RIGHT \| BOTTOM \| LEFT
BaseOverlayToggleEffects	enum	FADE \| SLIDE

pages._explore.sections.slots.title

Slot	Type
default	{}