PAGE.md

Page

Pages are containers that can be a main page, multiple pages or just to animate an element.

Element

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

Most used helpers

Positions

left, right, top, bottom

Triggers

active

Example

<div class="page">
  <h5>Title</h5>
</div>

Triggers

To show/hide a page

Method 1

Add/remove active class on page.

<div class="page active">
  <h5>Title</h5>
</div>

Method 2

Add data-ui="page-selector" attribute on elements. All other pages that are in the same level will be hidden.

<a data-ui="#page1">Open page 1</a>
<a data-ui="#page2">Open page 2</a>

<div class="page" id="page1">
  <h5>Page 1</h5>
</div>

<div class="page" id="page2">
  <h5>Page 2</h5>
</div>

Method 3

Call ui("page-selector"). All other pages that are in the same level will be hidden.

<div class="page" id="page1">
  <h5>Page 1</h5>
</div>

<div class="page" id="page2">
  <h5>Page 2</h5>
</div>

ui('#page1');

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