DIALOG.md

Dialog

Dialogs inform users about a task and can contain critical information, required decisions, involve multiple tasks, provide access to destinations in your app and contain a small forms to submit.

Element

<dialog>...</dialog>

Most used helpers

Colors

fill, primary-container, secondary-container, tertiary-container

Forms

modal, border, round, no-round, left-round, right-round, top-round, bottom-round

Paddings

padding, no-padding, tiny-padding, small-padding, medium-padding, large-padding

Positions

left, right, top, bottom

Elevates

elevate, no-elevate, small-elevate, medium-elevate, large-elevate

Sizes

small, medium, large, max

Triggers

active

Example

<dialog>
  <h5>Title</h5>
  <p>Content of dialog</p>
  <nav>
    <button>Cancel</button>
    <button>Confirm</button>
  </nav>
</dialog>

Triggers

To open/close a dialog

Method 1

Add/remove active class on dialog.

<dialog class="active">
  <h5>Title</h5>
  <p>Content of dialog</p>
  <nav>
    <button>Cancel</button>
    <button>Confirm</button>
  </nav>
</dialog>

Method 2

Call HTML dialog element methods

<dialog id="dialog">
  <h5>Title</h5>
  <p>Content of dialog</p>
  <nav>
    <button>Cancel</button>
    <button>Confirm</button>
  </nav>
</dialog>

document.querySelector('#dialog').show(); // open
document.querySelector('#dialog').showModal(); // open as modal
document.querySelector('#dialog').close(); // close

Method 3

Add data-ui="dialog-selector" attribute on elements.

<button data-ui="#dialog">Open dialog</button>

<dialog id="dialog">
  <h5>Title</h5>
  <p>Content of dialog</p>
  <nav>
    <button data-ui="#dialog">Cancel</button>
    <button data-ui="#dialog">Confirm</button>
  </nav>
</dialog>

Method 4

Call ui("dialog-selector")

<dialog id="dialog">
  <h5>Title</h5>
  <p>Content of dialog</p>
  <nav>
    <button>Cancel</button>
    <button>Confirm</button>
  </nav>
</dialog>

ui('#dialog');

Go to

Begin, Elements, Helpers, Settings, Summary, beercss.com

Badge, Button, Card, Checkbox, Chip, Container, Dialog, Expansion, Grid, Icon, Input, Layout, List, Main layout, Media, Menu, Navigation, Overlay, Page, Progress, Radio, Select, Slider, Switch, Table, Tabs, Textarea, Snackbar, Tooltip, Typography