Skip to content

Latest commit

 

History

History
73 lines (47 loc) · 1.79 KB

OVERLAY.md

File metadata and controls

73 lines (47 loc) · 1.79 KB
Raw

Overlay

Overlays block user screen and can express an unspecified wait time.

Element

<div class="overlay">...</div>

Most used helpers

Alignments

left-align, right-align, center-align, top-align, bottom-align, middle-align

Triggers

active

Example

<div class="overlay center-align middle-align">
  <progress class="circle"></progress>
</div>

Triggers

To show/hide a overlay

Method 1

Add/remove active class on overlay.

<div class="overlay center-align middle-align active">
  <progress class="circle"></progress>
</div>

Method 2

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

<button data-ui="#overlay">Show overlay</button>

<div class="overlay center-align middle-align" id="overlay">
  <progress class="circle"></progress>
</div>

Method 3

Call ui("overlay-selector").

<div class="overlay center-align middle-align" id="overlay">
  <progress class="circle"></progress>
</div>
ui('#overlay');

Go to

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

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