conversation
between the system and the user. It is prompted when the system needs input from the user or to give the user urgent information concerning their current workflow.
Follow the tutorials here to use the HTMLPLUS
library on React-based
projects.
Select your desired component from below and see the available properties, slots, events, styles and methods.
escape
key is pressed.left
, center
, right
, start
, end
, and vertical values are top
, center
and bottom
.void
void
void
void
Below is a collection of simple to complex examples.
import React from "react";
import { Dialog } from "@htmlplus/react";
const App = () => {
return <>
<div className="center">
<Dialog.Toggler connector="dialog-default">
Open
</Dialog.Toggler>
</div>
<Dialog connector="dialog-default">
<Dialog.Content>
<Dialog.Header>
Dialog Title
</Dialog.Header>
<Dialog.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Dialog.Body>
<Dialog.Footer>
<Dialog.Toggler>
Close
</Dialog.Toggler>
</Dialog.Footer>
</Dialog.Content>
</Dialog>
</>;
};
export default App;
.center {
text-align: center;
}
import React from "react";
import { Dialog } from "@htmlplus/react";
const App = () => {
return <>
<div className="center">
<Dialog.Toggler connector="dialog-animation">
Open
</Dialog.Toggler>
</div>
<Dialog animation="fade" connector="dialog-animation">
<Dialog.Content>
<Dialog.Header>
Dialog Title
</Dialog.Header>
<Dialog.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Dialog.Body>
<Dialog.Footer>
<Dialog.Toggler>
Close
</Dialog.Toggler>
</Dialog.Footer>
</Dialog.Content>
</Dialog>
</>;
};
export default App;
.center {
text-align: center;
}
import React from "react";
import { Dialog } from "@htmlplus/react";
const App = () => {
return <>
<div className="center">
<Dialog.Toggler connector="dialog-persistent">
Open
</Dialog.Toggler>
</div>
<Dialog animation="fade" connector="dialog-persistent" persistent>
<Dialog.Content>
<Dialog.Header>
Dialog Title
</Dialog.Header>
<Dialog.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Dialog.Body>
<Dialog.Footer>
<Dialog.Toggler>
Close
</Dialog.Toggler>
</Dialog.Footer>
</Dialog.Content>
</Dialog>
</>;
};
export default App;
.center {
text-align: center;
}
import React from "react";
import { Dialog } from "@htmlplus/react";
const App = () => {
return <>
<div className="center">
<Dialog.Toggler connector="dialog-placement">
Open
</Dialog.Toggler>
</div>
<Dialog animation="fade" connector="dialog-placement" placement="center-bottom">
<Dialog.Content>
<Dialog.Header>
Dialog Title
</Dialog.Header>
<Dialog.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Dialog.Body>
<Dialog.Footer>
<Dialog.Toggler>
Close
</Dialog.Toggler>
</Dialog.Footer>
</Dialog.Content>
</Dialog>
</>;
};
export default App;
.center {
text-align: center;
}
import React, { useState } from "react";
import { Grid, Dialog } from "@htmlplus/react";
const App = () => {
const [open, setOpen] = useState(false);
const [size, setSize] = useState('md');
const hide = () => {
setOpen(false);
};
const show = size => {
setSize(size);
setOpen(true);
};
return <>
<Grid justifyContent="center" gutter="md">
<Grid.Item xs="12" sm="auto">
<button onClick={() => show('sm')}>
Small dialog
</button>
</Grid.Item>
<Grid.Item xs="12" sm="auto">
<button onClick={() => show('lg')}>
Large dialog
</button>
</Grid.Item>
<Grid.Item xs="12" sm="auto">
<button onClick={() => show('xl')}>
Extra large dialog
</button>
</Grid.Item>
</Grid>
<Dialog animation="fade" open={open} size={size} onClose={() => hide()}>
<Dialog.Content>
<Dialog.Header>
Dialog Title
</Dialog.Header>
<Dialog.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Dialog.Body>
<Dialog.Footer>
<button onClick={() => hide()}>
Close
</button>
</Dialog.Footer>
</Dialog.Content>
</Dialog>
</>;
};
export default App;
plus-grid-item {
text-align: center;
}
import React from "react";
import { Dialog } from "@htmlplus/react";
const App = () => {
return <>
<div className="center">
<Dialog.Toggler connector="dialog-backdrop">
Open
</Dialog.Toggler>
</div>
<Dialog animation="fade" connector="dialog-backdrop" backdrop={false}>
<Dialog.Content>
<Dialog.Header>
Dialog Title
</Dialog.Header>
<Dialog.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Dialog.Body>
<Dialog.Footer>
<Dialog.Toggler>
Close
</Dialog.Toggler>
</Dialog.Footer>
</Dialog.Content>
</Dialog>
</>;
};
export default App;
.center {
text-align: center;
}
import React from "react";
import { Dialog } from "@htmlplus/react";
const App = () => {
return <>
<div className="center">
<Dialog.Toggler connector="dialog-scrollable">
Open
</Dialog.Toggler>
</div>
<Dialog animation="fade" connector="dialog-scrollable" scrollable>
<Dialog.Content>
<Dialog.Header>
Dialog Title
</Dialog.Header>
<Dialog.Body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh eros, luctus in lacus eu, eleifend ultricies ipsum. Morbi sit amet diam et erat pulvinar ultricies in vel erat. Vestibulum sit amet posuere lacus, gravida semper libero. Praesent sed nisi sed lorem posuere consequat. Nunc vehicula fermentum hendrerit. Mauris aliquam ornare laoreet. Maecenas cursus nec ipsum et tempus. Sed pretium odio bibendum, pharetra nisl sed, scelerisque ipsum. Nam egestas interdum risus et gravida. Suspendisse aliquam leo ac leo fermentum, ac accumsan purus vestibulum. Integer facilisis tincidunt urna vel accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et elit imperdiet, gravida urna tempus, fringilla nisl.
</p>
<p>
Nam a gravida lorem. Curabitur sagittis vitae quam vitae dignissim. Curabitur eget sollicitudin urna, vitae venenatis massa. Aliquam nulla dolor, lobortis at mauris non, gravida dignissim nulla. Integer ac ultricies nisl. Duis aliquam sem eu dui porttitor lobortis. Ut luctus rhoncus tincidunt. Vestibulum consequat risus non diam consectetur, bibendum molestie enim placerat. Morbi pretium sem sit amet dictum feugiat. Fusce gravida, eros ac bibendum ullamcorper, sapien nunc vulputate elit, quis iaculis sapien ligula eget nisi. Duis erat urna, porttitor non massa at, porttitor varius mauris. In lobortis massa dui, et consectetur mauris iaculis vitae. Vivamus suscipit, risus vitae viverra auctor, enim sem lacinia nisl, vel dictum risus dolor at felis. In hac habitasse platea dictumst. Donec ac urna ac sapien euismod vulputate.
</p>
<p>
Proin sapien enim, pellentesque eget urna ut, mollis tincidunt quam. Pellentesque eu orci et leo dapibus sagittis in nec tellus. Vivamus porta felis turpis, ac vehicula felis tristique at. Integer at lacus odio. Donec ornare turpis eu cursus finibus. Suspendisse cursus vestibulum lacus vel porta. Nam eget nibh eu ante ultrices aliquet. Nullam quis ligula faucibus, aliquam tellus quis, accumsan tortor. Integer at leo dictum, luctus dui ac, suscipit turpis. Sed pharetra finibus sapien sed fermentum. In viverra est sagittis sagittis maximus.
</p>
<p>
Maecenas quis lorem rutrum, convallis purus ac, hendrerit dui. Etiam consectetur molestie eros sed lacinia. Maecenas ipsum est, consectetur et rutrum et, convallis quis metus. Praesent est eros, semper sed velit sit amet, gravida vestibulum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean varius, erat vel ullamcorper consequat, tellus massa gravida arcu, et blandit nisl justo vitae tellus. Suspendisse id metus aliquam, dignissim massa et, facilisis ex. Sed suscipit nunc elit, id dictum velit ultrices hendrerit. Nunc sit amet dui ultrices, sollicitudin justo quis, lacinia tortor. Sed viverra libero facilisis lectus pharetra, vel porttitor sem bibendum. Praesent non nibh quis ante viverra aliquet eu nec nisl. Mauris ante mauris, molestie eget feugiat in, semper quis massa.
</p>
<p>
Maecenas vulputate finibus odio, vitae dignissim nibh ultricies rhoncus. Aenean in dictum justo. Vestibulum pellentesque lorem aliquam lectus finibus, id sagittis ex molestie. Duis rhoncus risus molestie ligula consequat efficitur. Aenean vel nisl vel sem pretium ultrices nec quis mi. Donec enim elit, tristique non sodales quis, iaculis ut justo. In laoreet sodales leo, vel maximus purus volutpat quis. Maecenas ac tincidunt nisl, vitae sodales nibh. Morbi tellus libero, feugiat vitae convallis pretium, fermentum in mi. Etiam dignissim vitae massa nec semper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh eros, luctus in lacus eu, eleifend ultricies ipsum. Morbi sit amet diam et erat pulvinar ultricies in vel erat. Vestibulum sit amet posuere lacus, gravida semper libero. Praesent sed nisi sed lorem posuere consequat. Nunc vehicula fermentum hendrerit. Mauris aliquam ornare laoreet. Maecenas cursus nec ipsum et tempus. Sed pretium odio bibendum, pharetra nisl sed, scelerisque ipsum. Nam egestas interdum risus et gravida. Suspendisse aliquam leo ac leo fermentum, ac accumsan purus vestibulum. Integer facilisis tincidunt urna vel accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et elit imperdiet, gravida urna tempus, fringilla nisl.
</p>
<p>
Nam a gravida lorem. Curabitur sagittis vitae quam vitae dignissim. Curabitur eget sollicitudin urna, vitae venenatis massa. Aliquam nulla dolor, lobortis at mauris non, gravida dignissim nulla. Integer ac ultricies nisl. Duis aliquam sem eu dui porttitor lobortis. Ut luctus rhoncus tincidunt. Vestibulum consequat risus non diam consectetur, bibendum molestie enim placerat. Morbi pretium sem sit amet dictum feugiat. Fusce gravida, eros ac bibendum ullamcorper, sapien nunc vulputate elit, quis iaculis sapien ligula eget nisi. Duis erat urna, porttitor non massa at, porttitor varius mauris. In lobortis massa dui, et consectetur mauris iaculis vitae. Vivamus suscipit, risus vitae viverra auctor, enim sem lacinia nisl, vel dictum risus dolor at felis. In hac habitasse platea dictumst. Donec ac urna ac sapien euismod vulputate.
</p>
<p>
Proin sapien enim, pellentesque eget urna ut, mollis tincidunt quam. Pellentesque eu orci et leo dapibus sagittis in nec tellus. Vivamus porta felis turpis, ac vehicula felis tristique at. Integer at lacus odio. Donec ornare turpis eu cursus finibus. Suspendisse cursus vestibulum lacus vel porta. Nam eget nibh eu ante ultrices aliquet. Nullam quis ligula faucibus, aliquam tellus quis, accumsan tortor. Integer at leo dictum, luctus dui ac, suscipit turpis. Sed pharetra finibus sapien sed fermentum. In viverra est sagittis sagittis maximus.
</p>
<p>
Maecenas quis lorem rutrum, convallis purus ac, hendrerit dui. Etiam consectetur molestie eros sed lacinia. Maecenas ipsum est, consectetur et rutrum et, convallis quis metus. Praesent est eros, semper sed velit sit amet, gravida vestibulum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean varius, erat vel ullamcorper consequat, tellus massa gravida arcu, et blandit nisl justo vitae tellus. Suspendisse id metus aliquam, dignissim massa et, facilisis ex. Sed suscipit nunc elit, id dictum velit ultrices hendrerit. Nunc sit amet dui ultrices, sollicitudin justo quis, lacinia tortor. Sed viverra libero facilisis lectus pharetra, vel porttitor sem bibendum. Praesent non nibh quis ante viverra aliquet eu nec nisl. Mauris ante mauris, molestie eget feugiat in, semper quis massa.
</p>
<p>
Maecenas vulputate finibus odio, vitae dignissim nibh ultricies rhoncus. Aenean in dictum justo. Vestibulum pellentesque lorem aliquam lectus finibus, id sagittis ex molestie. Duis rhoncus risus molestie ligula consequat efficitur. Aenean vel nisl vel sem pretium ultrices nec quis mi. Donec enim elit, tristique non sodales quis, iaculis ut justo. In laoreet sodales leo, vel maximus purus volutpat quis. Maecenas ac tincidunt nisl, vitae sodales nibh. Morbi tellus libero, feugiat vitae convallis pretium, fermentum in mi. Etiam dignissim vitae massa nec semper.
</p>
</Dialog.Body>
<Dialog.Footer>
<Dialog.Toggler>
Close
</Dialog.Toggler>
</Dialog.Footer>
</Dialog.Content>
</Dialog>
</>;
};
export default App;
.center {
text-align: center;
}
import React from "react";
import { Dialog } from "@htmlplus/react";
const App = () => {
return <>
<div className="center">
<Dialog.Toggler connector="dialog-specific-scrollable">
Open
</Dialog.Toggler>
</div>
<Dialog animation="fade" connector="dialog-specific-scrollable" scrollable>
<Dialog.Content>
<Dialog.Header>
Dialog Title
</Dialog.Header>
<Dialog.Body scrollable>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh eros, luctus in lacus eu, eleifend ultricies ipsum. Morbi sit amet diam et erat pulvinar ultricies in vel erat. Vestibulum sit amet posuere lacus, gravida semper libero. Praesent sed nisi sed lorem posuere consequat. Nunc vehicula fermentum hendrerit. Mauris aliquam ornare laoreet. Maecenas cursus nec ipsum et tempus. Sed pretium odio bibendum, pharetra nisl sed, scelerisque ipsum. Nam egestas interdum risus et gravida. Suspendisse aliquam leo ac leo fermentum, ac accumsan purus vestibulum. Integer facilisis tincidunt urna vel accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et elit imperdiet, gravida urna tempus, fringilla nisl.
</p>
<p>
Nam a gravida lorem. Curabitur sagittis vitae quam vitae dignissim. Curabitur eget sollicitudin urna, vitae venenatis massa. Aliquam nulla dolor, lobortis at mauris non, gravida dignissim nulla. Integer ac ultricies nisl. Duis aliquam sem eu dui porttitor lobortis. Ut luctus rhoncus tincidunt. Vestibulum consequat risus non diam consectetur, bibendum molestie enim placerat. Morbi pretium sem sit amet dictum feugiat. Fusce gravida, eros ac bibendum ullamcorper, sapien nunc vulputate elit, quis iaculis sapien ligula eget nisi. Duis erat urna, porttitor non massa at, porttitor varius mauris. In lobortis massa dui, et consectetur mauris iaculis vitae. Vivamus suscipit, risus vitae viverra auctor, enim sem lacinia nisl, vel dictum risus dolor at felis. In hac habitasse platea dictumst. Donec ac urna ac sapien euismod vulputate.
</p>
<p>
Proin sapien enim, pellentesque eget urna ut, mollis tincidunt quam. Pellentesque eu orci et leo dapibus sagittis in nec tellus. Vivamus porta felis turpis, ac vehicula felis tristique at. Integer at lacus odio. Donec ornare turpis eu cursus finibus. Suspendisse cursus vestibulum lacus vel porta. Nam eget nibh eu ante ultrices aliquet. Nullam quis ligula faucibus, aliquam tellus quis, accumsan tortor. Integer at leo dictum, luctus dui ac, suscipit turpis. Sed pharetra finibus sapien sed fermentum. In viverra est sagittis sagittis maximus.
</p>
<p>
Maecenas quis lorem rutrum, convallis purus ac, hendrerit dui. Etiam consectetur molestie eros sed lacinia. Maecenas ipsum est, consectetur et rutrum et, convallis quis metus. Praesent est eros, semper sed velit sit amet, gravida vestibulum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean varius, erat vel ullamcorper consequat, tellus massa gravida arcu, et blandit nisl justo vitae tellus. Suspendisse id metus aliquam, dignissim massa et, facilisis ex. Sed suscipit nunc elit, id dictum velit ultrices hendrerit. Nunc sit amet dui ultrices, sollicitudin justo quis, lacinia tortor. Sed viverra libero facilisis lectus pharetra, vel porttitor sem bibendum. Praesent non nibh quis ante viverra aliquet eu nec nisl. Mauris ante mauris, molestie eget feugiat in, semper quis massa.
</p>
<p>
Maecenas vulputate finibus odio, vitae dignissim nibh ultricies rhoncus. Aenean in dictum justo. Vestibulum pellentesque lorem aliquam lectus finibus, id sagittis ex molestie. Duis rhoncus risus molestie ligula consequat efficitur. Aenean vel nisl vel sem pretium ultrices nec quis mi. Donec enim elit, tristique non sodales quis, iaculis ut justo. In laoreet sodales leo, vel maximus purus volutpat quis. Maecenas ac tincidunt nisl, vitae sodales nibh. Morbi tellus libero, feugiat vitae convallis pretium, fermentum in mi. Etiam dignissim vitae massa nec semper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh eros, luctus in lacus eu, eleifend ultricies ipsum. Morbi sit amet diam et erat pulvinar ultricies in vel erat. Vestibulum sit amet posuere lacus, gravida semper libero. Praesent sed nisi sed lorem posuere consequat. Nunc vehicula fermentum hendrerit. Mauris aliquam ornare laoreet. Maecenas cursus nec ipsum et tempus. Sed pretium odio bibendum, pharetra nisl sed, scelerisque ipsum. Nam egestas interdum risus et gravida. Suspendisse aliquam leo ac leo fermentum, ac accumsan purus vestibulum. Integer facilisis tincidunt urna vel accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et elit imperdiet, gravida urna tempus, fringilla nisl.
</p>
<p>
Nam a gravida lorem. Curabitur sagittis vitae quam vitae dignissim. Curabitur eget sollicitudin urna, vitae venenatis massa. Aliquam nulla dolor, lobortis at mauris non, gravida dignissim nulla. Integer ac ultricies nisl. Duis aliquam sem eu dui porttitor lobortis. Ut luctus rhoncus tincidunt. Vestibulum consequat risus non diam consectetur, bibendum molestie enim placerat. Morbi pretium sem sit amet dictum feugiat. Fusce gravida, eros ac bibendum ullamcorper, sapien nunc vulputate elit, quis iaculis sapien ligula eget nisi. Duis erat urna, porttitor non massa at, porttitor varius mauris. In lobortis massa dui, et consectetur mauris iaculis vitae. Vivamus suscipit, risus vitae viverra auctor, enim sem lacinia nisl, vel dictum risus dolor at felis. In hac habitasse platea dictumst. Donec ac urna ac sapien euismod vulputate.
</p>
<p>
Proin sapien enim, pellentesque eget urna ut, mollis tincidunt quam. Pellentesque eu orci et leo dapibus sagittis in nec tellus. Vivamus porta felis turpis, ac vehicula felis tristique at. Integer at lacus odio. Donec ornare turpis eu cursus finibus. Suspendisse cursus vestibulum lacus vel porta. Nam eget nibh eu ante ultrices aliquet. Nullam quis ligula faucibus, aliquam tellus quis, accumsan tortor. Integer at leo dictum, luctus dui ac, suscipit turpis. Sed pharetra finibus sapien sed fermentum. In viverra est sagittis sagittis maximus.
</p>
<p>
Maecenas quis lorem rutrum, convallis purus ac, hendrerit dui. Etiam consectetur molestie eros sed lacinia. Maecenas ipsum est, consectetur et rutrum et, convallis quis metus. Praesent est eros, semper sed velit sit amet, gravida vestibulum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean varius, erat vel ullamcorper consequat, tellus massa gravida arcu, et blandit nisl justo vitae tellus. Suspendisse id metus aliquam, dignissim massa et, facilisis ex. Sed suscipit nunc elit, id dictum velit ultrices hendrerit. Nunc sit amet dui ultrices, sollicitudin justo quis, lacinia tortor. Sed viverra libero facilisis lectus pharetra, vel porttitor sem bibendum. Praesent non nibh quis ante viverra aliquet eu nec nisl. Mauris ante mauris, molestie eget feugiat in, semper quis massa.
</p>
<p>
Maecenas vulputate finibus odio, vitae dignissim nibh ultricies rhoncus. Aenean in dictum justo. Vestibulum pellentesque lorem aliquam lectus finibus, id sagittis ex molestie. Duis rhoncus risus molestie ligula consequat efficitur. Aenean vel nisl vel sem pretium ultrices nec quis mi. Donec enim elit, tristique non sodales quis, iaculis ut justo. In laoreet sodales leo, vel maximus purus volutpat quis. Maecenas ac tincidunt nisl, vitae sodales nibh. Morbi tellus libero, feugiat vitae convallis pretium, fermentum in mi. Etiam dignissim vitae massa nec semper.
</p>
</Dialog.Body>
<Dialog.Footer>
<Dialog.Toggler>
Close
</Dialog.Toggler>
</Dialog.Footer>
</Dialog.Content>
</Dialog>
</>;
};
export default App;
.center {
text-align: center;
}
import React from "react";
import { Dialog } from "@htmlplus/react";
const App = () => {
return <>
<div className="center">
<Dialog.Toggler connector="dialog-fullscreen">
Open
</Dialog.Toggler>
</div>
<Dialog animation="fade" connector="dialog-fullscreen" placement="bottom" fullscreen>
<Dialog.Content>
<Dialog.Header>
Dialog Title
</Dialog.Header>
<Dialog.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Dialog.Body>
<Dialog.Footer>
<Dialog.Toggler>
Close
</Dialog.Toggler>
</Dialog.Footer>
</Dialog.Content>
</Dialog>
</>;
};
export default App;
.center {
text-align: center;
}
import React from "react";
import { Dialog } from "@htmlplus/react";
const App = () => {
return <>
<div className="center">
<Dialog.Toggler connector="dialog-full-width">
Open
</Dialog.Toggler>
</div>
<Dialog animation="fade" connector="dialog-full-width" fullWidth>
<Dialog.Content>
<Dialog.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Dialog.Body>
</Dialog.Content>
</Dialog>
</>;
};
export default App;
.center {
text-align: center;
}
import React from "react";
import { Dialog } from "@htmlplus/react";
const App = () => {
return <>
<div className="center">
<Dialog.Toggler connector="dialog-full-height">
Open
</Dialog.Toggler>
</div>
<Dialog animation="fade" connector="dialog-full-height" placement="center" fullHeight>
<Dialog.Content>
<Dialog.Header>
Dialog Title
</Dialog.Header>
<Dialog.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</Dialog.Body>
<Dialog.Footer>
<Dialog.Toggler>
Close
</Dialog.Toggler>
</Dialog.Footer>
</Dialog.Content>
</Dialog>
</>;
};
export default App;
.center {
text-align: center;
}
import React from "react";
import { Dialog } from "@htmlplus/react";
const App = () => {
return <>
<div className="center">
<Dialog.Toggler connector="dialog-sticky">
Open
</Dialog.Toggler>
</div>
<Dialog animation="fade" connector="dialog-sticky" fullWidth sticky>
<Dialog.Content>
<Dialog.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Dialog.Body>
</Dialog.Content>
</Dialog>
</>;
};
export default App;
.center {
text-align: center;
}
import React from "react";
import { Grid, Dialog } from "@htmlplus/react";
const App = () => {
return <>
<Grid justifyContent="center" gutter="md">
<Grid.Item xs="12" sm="auto">
<Dialog.Toggler connector="dialog-nesting-1">
Open Dialog 1
</Dialog.Toggler>
</Grid.Item>
<Grid.Item xs="12" sm="auto">
<Dialog.Toggler connector="dialog-nesting-2">
Open Dialog 2
</Dialog.Toggler>
</Grid.Item>
<Grid.Item xs="12" sm="auto">
<Dialog.Toggler connector="dialog-nesting-3">
Open Dialog 3
</Dialog.Toggler>
</Grid.Item>
</Grid>
<Dialog animation="fade" connector="dialog-nesting-1" size="xl">
<Dialog.Content>
<Dialog.Header>
Dialog 1
</Dialog.Header>
<Dialog.Body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh eros, luctus in lacus eu, eleifend
ultricies ipsum. Morbi sit amet diam et erat pulvinar ultricies in vel erat. Vestibulum sit amet posuere
lacus, gravida semper libero. Praesent sed nisi sed lorem posuere consequat. Nunc vehicula fermentum
hendrerit. Mauris aliquam ornare laoreet. Maecenas cursus nec ipsum et tempus. Sed pretium odio bibendum,
pharetra nisl sed, scelerisque ipsum. Nam egestas interdum risus et gravida. Suspendisse aliquam leo ac leo
fermentum, ac accumsan purus vestibulum. Integer facilisis tincidunt urna vel accumsan. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et elit imperdiet, gravida urna
tempus, fringilla nisl.
</p>
</Dialog.Body>
<Dialog.Footer>
<Dialog.Toggler connector="dialog-nesting-2">
Open Dialog 2
</Dialog.Toggler>
<Dialog.Toggler>
Close
</Dialog.Toggler>
</Dialog.Footer>
</Dialog.Content>
</Dialog>
<Dialog animation="fade" connector="dialog-nesting-2" size="lg">
<Dialog.Content>
<Dialog.Header>
Dialog 2
</Dialog.Header>
<Dialog.Body>
<p>
Nam a gravida lorem. Curabitur sagittis vitae quam vitae dignissim. Curabitur eget sollicitudin urna, vitae
venenatis massa. Aliquam nulla dolor, lobortis at mauris non, gravida dignissim nulla. Integer ac ultricies
nisl. Duis aliquam sem eu dui porttitor lobortis. Ut luctus rhoncus tincidunt. Vestibulum consequat risus non
diam consectetur, bibendum molestie enim placerat. Morbi pretium sem sit amet dictum feugiat. Fusce gravida,
eros ac bibendum ullamcorper, sapien nunc vulputate elit, quis iaculis sapien ligula eget nisi. Duis erat
urna, porttitor non massa at, porttitor varius mauris. In lobortis massa dui, et consectetur mauris iaculis
vitae. Vivamus suscipit, risus vitae viverra auctor, enim sem lacinia nisl, vel dictum risus dolor at felis.
In hac habitasse platea dictumst. Donec ac urna ac sapien euismod vulputate.
</p>
</Dialog.Body>
<Dialog.Footer>
<Dialog.Toggler connector="dialog-nesting-3">
Open Dialog 3
</Dialog.Toggler>
<Dialog.Toggler>
Close
</Dialog.Toggler>
</Dialog.Footer>
</Dialog.Content>
</Dialog>
<Dialog animation="fade" connector="dialog-nesting-3" size="sm">
<Dialog.Content>
<Dialog.Header>
Dialog 3
</Dialog.Header>
<Dialog.Body>
<p>
Proin sapien enim, pellentesque eget urna ut, mollis tincidunt quam. Pellentesque eu orci et leo dapibus
sagittis in nec tellus. Vivamus porta felis turpis, ac vehicula felis tristique at. Integer at lacus odio.
Donec ornare turpis eu cursus finibus. Suspendisse cursus vestibulum lacus vel porta. Nam eget nibh eu ante
ultrices aliquet. Nullam quis ligula faucibus, aliquam tellus quis, accumsan tortor. Integer at leo dictum,
luctus dui ac, suscipit turpis. Sed pharetra finibus sapien sed fermentum. In viverra est sagittis sagittis
maximus.
</p>
</Dialog.Body>
<Dialog.Footer>
<Dialog.Toggler>
Close
</Dialog.Toggler>
</Dialog.Footer>
</Dialog.Content>
</Dialog>
</>;
};
export default App;
plus-grid-item {
text-align: center;
}
import React from "react";
import { Dialog } from "@htmlplus/react";
const App = () => {
const ensure = (type, event) => {
if (window.confirm(`Are you sure you want to ${type} it?`)) return;
event.preventDefault();
};
return <>
<div className="center">
<Dialog.Toggler connector="dialog-prevent">
Open
</Dialog.Toggler>
</div>
<Dialog animation="fade" connector="dialog-prevent" onOpen={event => ensure('open', event)} onClose={event => ensure('close', event)}>
<Dialog.Content>
<Dialog.Header>
Dialog Title
</Dialog.Header>
<Dialog.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Dialog.Body>
<Dialog.Footer>
<Dialog.Toggler>
Close
</Dialog.Toggler>
</Dialog.Footer>
</Dialog.Content>
</Dialog>
</>;
};
export default App;
.center {
text-align: center;
}