Dialog

The Dialog component is a flexible and extensible content container. Dialog are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. They are particularly well-suited to use with the Modal component.

Examples

Base

A simple dialog is created with a title and content property.

Show code

HTML

<section>
    <o-switch v-model="isLoading" label="Loading state" />

    <o-dialog
        :title="title"
        :content="content"
        :subtitle="subtitle"
        :loading="isLoading"
        closeable />
</section>

JS

import { ref } from "vue";

const title = "Dialog Title";
const subtitle = "Dialog Subtitle";
const content =
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!";

const isLoading = ref(false);

Confirm Check

The component can be used to require decisions or show critical information. Using the confirmButton and cancelButton properties confirm checks can be made.

Show code

HTML

<section>
    <o-dialog
        title="Delete Dialog"
        content="Are you sure you want to delete this?"
        confirm-button="Delete"
        confirm-variant="danger"
        cancel-button="Cancel" />
</section>

Slots

The component provides header, title, subtitle, content, footer as well as confirmButton and cancelButton named slots templates to customise HTML content.

Show code

HTML

<o-dialog>
    <template #title>Advanced Dialog</template>
    <template #subtitle>Dialog subtitle</template>
    <template #image>
        <img
            alt="Oruga Logo"
            src="https://avatars2.githubusercontent.com/u/66300512?s=200&v=4" />
    </template>
    <template #content>
        <p class="m-0">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Inventore sed consequuntur error repudiandae numquam deserunt
            quisquam repellat libero asperiores earum nam nobis, culpa
            ratione quam perferendis esse, cupiditate neque quas!
        </p>
    </template>
    <template #cancelButton>
        <a href="#" class="dialog-link">A link</a>
    </template>
    <template #confirmButton>
        <a href="#" class="dialog-link">Another link</a>
    </template>
</o-dialog>

Image

You can place an image below the header.

Show code

HTML

<o-dialog
    title="Advanced Dialog"
    content="Some quick example text to build on the dialog title and make up the bulk of the dialog's content."
    image-alt="Oruga Logo"
    image-src="https://avatars2.githubusercontent.com/u/66300512?s=200&v=4" />

Form

A useful purpose for a dialog is to display forms in it.

Show code

HTML

<o-dialog title="Login" closeable @close="onClose">
    <template #content>
        <form action="">
            <o-field label="Email">
                <o-input type="email" placeholder="Your email" required />
            </o-field>

            <o-field label="Password">
                <o-input
                    type="password"
                    password-reveal
                    placeholder="Your password"
                    required />
            </o-field>

            <o-field>
                <o-checkbox label="Remember me" />
            </o-field>

            <div class="dialog-footer">
                <o-button
                    label="Close"
                    type="button"
                    @click.prevent="onClose" />
                <o-button
                    label="Login"
                    variant="primary"
                    @click.prevent="onLogin" />
            </div>
        </form>
    </template>
</o-dialog>

JS

function onClose(): void {
    alert("close");
}
function onLogin(): void {
    alert("login");
}

SCSS

.dialog-footer {
    display: flex;
    align-items: center;
    gap: 5px;
}

Dialog Component

A flexible and extensible content container.

<o-dialog></o-dialog>

Props

Prop name	Description	Type	Values	Default
ariaCloseLabel	Accessibility label for the close button	string	-	From config: dialog: {   ariaCloseLabel: "Close" }
buttonPosition	Position of the footer buttons	"centered" | "left" | "right"	-
cancelButton	Render a cancel button and set text text as label	string	-
cancelVariant	Color variant of the cancel button	string	primary, info, success, warning, danger, and any other custom color
closeIcon	Close icon name	string	-	From config: dialog: {   closeIcon: "close" }
closeIconSize	Close icon size	string	-	From config: dialog: {   closeIconSize: undefined }
closeable	Adds close button to the header	boolean	-	From config: dialog: {   closeable: false }
component	Component to be injected. Close the component by emitting a 'close' event — $emit('close')	Component	-
confirmButton	Render a confirm button and set text as label	string	-
confirmVariant	Color variant of the confirm button	string	primary, info, success, warning, danger, and any other custom color
content	Dialog body content, unnecessary when content slot is used	string	-
disableCancel	Disable the cancel button	boolean	-
disableConfirm	Disable the confirm button	boolean	-
events	Events to be binded to the injected component	{}	-
iconPack	Icon pack to use for the close icon	string	mdi, fa, fas and any other custom icon pack	From config: dialog: {   iconPack: undefined }
imageAlt	Dialog image alt, unnecessary when image slot is used	string	-
imageSrc	Dialog image src, unnecessary when image slot is used	string	-
loading	Show a loading spinner in the dialog	boolean	-
loadingLabel	Show label beside the loading icon	string	-
override	Override existing theme classes completely	boolean	-
props	Props to be binded to the injected component	any	-
subtitle	Dialog header subtitle, unnecessary when subtitle slot is used Class of the header subtitle element	(string & ComponentClass)	-
title	Dialog header title, unnecessary when title slot is used	string	-

Events

Event name	Properties	Description
close	event Event - native event	close button click event
confirm	event Event - native event	confirm button click event

Slots

Name	Description	Bindings
header	Override the header	close (event: Event): void - function to emit a close event
title	Override the header title, default is title prop
subtitle	Override the header subtitle, default is subtitle prop
close	Override the close icon
image	Override the image
default	Override the default dialog body	close (event: Event): void - function to emit a close event confirm (event: Event): void - function to emit a confirm event
content	Override the body content, default is content prop	close (event: Event): void - function to emit a close event confirm (event: Event): void - function to emit a confirm event
footer	Override the footer	close (event: Event): void - function to emit a close event confirm (event: Event): void - function to emit a confirm event
cancelButton
confirmButton

Class Inspector

Classes applied to the element:

➜ Want to know how does the Class Inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
headerClass	Class of the header element.
titleClass	Class of the header title element.
subtitle	Class of the header subtitle element.
closeClass	Class of the header close element.
imageClass	Class of the image container.
figureClass	Class of the image figure element.
bodyClass	Class of the body element.
contentClass	Class of the body content element.
footerClass	Class of the footer element.
footerPositionClass	Class of the footer element with position.	buttonPosition	left centered right
confirmButtunClass	Class of the footer confirm button element.	confirmButton
cancelButtonClass	Class of the footer cancel button element.	cancelButton

Sass Variables

Current theme ➜ Oruga

The theme does not have any custom variables for this component.

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

The theme does not have any custom variables for this component.