OrionAside

<o-aside> crée une balise <aside> dans le DOM qui apparaît depuis la droite de la fenêtre via une simple animation. Il peut être ouvert via le système de refs ou via la prop display.

Bon à savoir

OrionAside et OrionModal ont un fonctionnement très similaire.

Popables

OrionNotif, OrionAside et OrionModal font partie de la famille des Popables.

Cela signifie que vous pouvez en ouvrir un nouveau sans fermer l'actuel. Si vous faites cela, le premier aside sera placé en file d'attente et se ré-ouvrira automatiquement à la fermeture du deuxième.

Ce comportement peut être adapté en fonction de vos besoins.
Plus d'informations dans la documentation des popables.

Un exemple dans la partie composant imbriqué.

Usage

Les asides peuvent être utilisés de plusieurs façons

directement dans le template, en utilisant les refs ou la prop display pour l'afficher ou le masquer.
programmatiquement avec useAside(customOptions).

AsideStyle AsideSlots AsideNested

Nested component source code

<template>
	<o-section :title="`${title} ${uid ?? ''}`">
		<p>
			Etiam porta sem malesuada magna mollis euismod.
			Etiam porta sem malesuada magna mollis euismod.
			Aenean lacinia bibendum nulla sed consectetur.
			Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
			Cras justo odio, dapibus ac facilisis in, egestas eget quam.
		</p>

		<p>
			Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
			Eget lacinia odio sem nec elit.
			Cras justo odio, dapibus ac facilisis in, egestas eget quam.
			Vestibulum id ligula porta felis euismod semper.
			Nulla vitae elit libero, a pharetra augue.
		</p>
	</o-section>

	<o-section align="right">
		<o-button
			v-if="uid"
			color="warning"
			outline
			@click="_aside?.close({ flush: true })">
			Close and flush queue
		</o-button>

		<o-button
			color="danger"
			outline
			@click="_aside?.close()">
			Close aside
		</o-button>

		<o-button
			color="info"
			@click="openNew()">
			Open a new aside
		</o-button>
	</o-section>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import { useAside, getUid } from 'lib';
import NestedComp from './NestedComp.vue';

defineProps<{ title: string, uid?: number }>();
const _aside = inject<OrionAside>('_aside');

function openNew () {
	useAside({
		Nested: NestedComp,
		NestedProps: {
			title: `Queued aside`,
			uid: getUid(),
		},
	});
}
</script>

AsidePlayground

Props

displayboolean = false

optionsPartial<Orion.Aside.Options> = () => {}

Events

enter-start

No payload

enter-end

No payload

leave-start

No payload

leave-end

No payload

Slots

poster

No bindings

header

No bindings

actions

close: () => void

footer

close: function

default

close: () => void

PublicInstance

slotPoster

string

slotFooter

string

slotActions

string

slotHeader

string

_loader

() => OrionLoader

uid

number

bus

Bus

state

{
	isClosing: boolean;
	isOpening: boolean;
	isMounted: boolean;
	visible: boolean;
}

options

Orion.Popable.Options

open

(keepInQueue?: boolean) => Promise<void>

(options?: Orion.Popable.CloseOptions | undefined) => Promise<void>

trigger

(eventName: string, params?: any) => void

animateAsync

(enter: boolean) => Promise<void>

removeProgrammatic

() => void

isLastOpenedPopable

() => boolean

_el

(() => HTMLElement | undefined) | undefined

Provide

_aside

publicInstance