Buttons

Buttons are the ideal components to trigger an ink reaction on the user press. In the Material design the buttons are divided between raised, flat and float action buttons.

The code of the buttons above seems like this.

<button class="button flat">BUTTON</button>
    
<button class="button raised">BUTTON</button>

<a href="https://material.io/" target="_blank" class="button raised grey-300">ANCHOR BUTTON</a>

<button class="button raised green-500">COLORED BUTTON</button>

<button class="button raised" disabled>DISABLED BUTTON</button>

<button class="button raised">ICON BUTTON <i class="icon">&#xE150;</i></button>

Cards

You can use cards to organize small sets of pictures or texts in a flashy block.

Title goes here

Subtitle here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id pellentesque est

Title goes here

Subtitle here

BUTTON BUTTON

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id pellentesque est

<div class="row">
    <div class="col-3">

        <div class="card">
            <div class="media">
                <img src="/img/demo.jpg" />
            </div>
            <header>
                <p class="title">Title goes here</p>
                <p class="subheading">Subtitle here</p>
            </header>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id pellentesque est
            </div>
        </div>

    </div>
    <div class="col-3">

        <div class="card">
            <div class="media">
                <img src="/img/demo.jpg" />
            </div>
            <header>
                <p class="title">Title goes here</p>
                <p class="subheading">Subtitle here</p>
            </header>
            <div class="group">
                <button class="button flat" data-tooltip="Tooltip text">BUTTON</button>
                <button class="button flat" data-tooltip="Tooltip text">BUTTON</button>  
            </div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id pellentesque est
            </div>
        </div>

    </div>
</div>

Chips

Chips can display a photo, text, rules or a contact.

Contacts

Contact Name

Ali Connors 

email@email.com

<div class="chips">
    <label>
        Contacts
    </label>
    <div class="content">
        <div class="chip"><span>Contact Name</span></div>
        <div class="chip">
            <img src="/img/avatar.jpg" />
            <span>Ali Connors</span>
            <i class="icon">&#xE5C9;</i>
        </div>
        <div class="chip"><span>email@email.com</span></div>
    </div>
</div>

Ion.get(".chips").chips({
    placeholder: "Add a contact",
    autocomplete: [
        {text: "Autocomplete contact", subtitle: "Contact", img: "/img/avatar.jpg"},
        {text: "John Doe", subtitle: "johndoe@email.com", img: "/img/avatar.jpg"},
        {text: "Test", subtitle: "Test contact", img: "/img/avatar.jpg"},
        {text: "Contact2", subtitle: "contact2@email.com", img: "/img/avatar.jpg"},
        {text: "Deletable contact", subtitle: "deletable", img: "/img/avatar.jpg", deletable: true},
    ],
    limit: 4,
    minlengthSearch: 2
});

Dialogs

Dialogs may contain decisions for the user, alerts and warnings or information about a specific task.

Ion.dialog({
    title: 'Dialog title', 
    subtitle: 'Dialog subtitle',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id pellentesque est',
    affirmativeText: 'OK',
    dismissiveText: 'CANCEL',
    class: 'myClass'
});

Dividers

Dividers can be used to separate contents into sections or to individualize items in a list.

<div class="divider"></div>

Expansion panels

Expansion panels are containers that can include basic information, allow a lightweight edition, or contain an entire card.

<div class="expansion-panel">
    <div class="item">
        <header>
                Item 1
        </header>
        <div class="content">
            Content of item 1
        </div>
    </div>
    <div class="item">
        <header>
            Item 2
        </header>
        <div class="content">
            Content of item 2
        </div>
    </div>
    <div class="item">
        <header>
            Item 3
        </header>
        <div class="content">
            Content of item 3
        </div>
    </div>
</div>

Grid lists

Grids organize similar data listings and standardize the layout for a better coopreension of the content they contain.

Basic usage

<div class="row">
    <div class="col-12">12</div>
    <div class="col-6">6</div>
    <div class="col-6">6</div>
    <div class="col-4">4</div>
    <div class="col-4">4</div>
    <div class="col-4">4</div>
    <div class="col-3">3</div>
    <div class="col-3">3</div>
    <div class="col-3">3</div>
    <div class="col-3">3</div>
    <div class="col-2">2</div>
    <div class="col-2">2</div>
    <div class="col-2">2</div>
    <div class="col-2">2</div>
    <div class="col-2">2</div>
    <div class="col-2">2</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
    <div class="col-1">1</div>
</div>

Fluid grid

Using the .col class you can make fluid layouts that fit the content.

<div class="row">
    <div class="col-6">6</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
</div>

Offsets

You can offset grid items to create specific layouts.

<div class="row">
    <div class="col-6 offset-6">.col-6 .offset-6</div>
    <div class="col-4 offset-4">.col-4 .offset-4</div>
    <div class="col-5 offset-1">.col-5 .offset-1</div>
</div>

Multiple screen configuration

You can configure the grids to have different sizes for each type of screen: Phone (small), Tablet (medium), and Desktop (large).

To do this, simply add the suffix p- or t- instead of col in column class. For the desktop type no changes are required as it is the default size.

Offsets can also be adjusted for each type of screen.

<div class="row">
    <div class="t-3">.t-3</div>
    <div class="p-6">.p-6</div>
    <div class="col-3 t-6 p-12"></div>
    <div class="t-3 offset-t-3">.t-3 .offset-t-3</div>
    <div class="p-6 offset-t-6">.p-6 .offset-t-6</div>
</div>

Lists

Lists consist of continuous rows of similar data types. They can group text and images together. There are single-line, two-line, three-line list and expasion list.

<ul class="list">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">
        <img src="avatar.jpg" />
        <div class="content single-line">
            <p>Item 3</p>
            <p class="body-1">Some text of item 3 as Lorem ipsum</p>
        </div>
    </li>
    <li class="item">
        <img src="avatar.jpg" />
        <div class="content">
            <p>Item 4</p>
            <p class="body-1">Some text of item 4 as Lorem ipsum dolor sit amet, 
            <br />consectetur adipiscing elit. Maecenas id pellentesque est</p>
        </div>
    </li>
</ul>

<ul class="list">
    <li class="item expansion">
        <a>Item expansion 1</a>
        <div class="content">
            <ul class="list">
                <li class="item">Item 1</li>
                <li class="item">Item 2</li>
            </ul>
        </div>
    </li>
    <li class="item expansion">
        <a>Item expansion 2</a>
        <div class="content">
            <ul class="list">
                <li class="item">Item 1</li>
                <li class="item">Item 2</li>
            </ul>
        </div>
    </li>
</ul>

Menus

Menus display a list of choices with a button, action or other control.

<div class="menu">
    <button class="button flat" >BUTTON</button>
    
    <div class="content">
        <ul class="list">
            <li class="item">Item 1</li>
            <li class="item">Item 2</li>
            <li class="item">Item 3</li>
        </ul>
    </div>
</div>

Ion.get("button").on("click", function(event){
    Ion.menu(event);
});

Progress

Progress indicates a loading on the page. Determinate indicators display how long an oparation will take and indeterminate indicators shows an unspecified wait time.

Progress determinate

The basic progress determinate shows the progress percentage of a loading.

<div class="progress linear determinate">
    <span class="bar" style="width: 64%;"></span>
</div>

Progress indeterminate

Display the loading for an indeterminate period.

<div class="progress linear indeterminate">
    <span class="bar"></span>
</div>

Progress query

Like a indeterminate progress, but indicates some query task to user.

<div class="progress linear query">
    <span class="bar"></span>
</div>

Progress buffer

This progress indicates the consuming percent, the loading percent and the buffer task. For a video for example.

<div class="progress linear buffer">
    <span class="bar-1"></span>
    <span class="bar-2"></span>
</div>

Selection controls

Selection controls allow the user to select an option. There are checkboxes, radio buttons ans switches.

<label class="checkbox">
    <input type="checkbox" />
</label>

<label class="radio">
    <input type="radio" />
</label>

<label class="switch">
    <input type="checkbox" />
</label>

Tables

The tables display sets of similar data.

<div class="responsive">
    <table class="table">
        <tr>
            <th>Dessert (100g serving)</th>
            <th>Calories</th>
            <th>Fat (g)</th>
            <th>Carbs (g)</th>
        </tr>
        <tr>
            <td>Frozen yogurt</td>
            <td>159</td>
            <td>6.0</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Ice cream sandwich</td>
            <td>237</td>
            <td>9.0</td>
            <td>37</td>
        </tr>
        <tr>
            <td>Eclair</td>
            <td>262</td>
            <td>16.0</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Cupcake</td>
            <td>305</td>
            <td>3.7</td>
            <td>67</td>
        </tr>
        <tr>
            <td>Gingerbread</td>
            <td>356</td>
            <td>16.0</td>
            <td>49</td>
        </tr>
        <tr>
            <td>Jelly bean</td>
            <td>375</td>
            <td>0.0</td>
            <td>94</td>
        </tr>
        <tr>
            <td>Lollipop</td>
            <td>392</td>
            <td>0.2</td>
            <td>98</td>
        </tr>
    </table>
</div>

Tabs

Tabs allow switch between different views. They can be used to group content in segmented sections.

its use is basically the definition of the titles and of the contents of tabs and a call in javascript.

<nav class="tabs" data-tabs="tabs-content">
    <a class="tab" data-tab-id="tab-1">TAB 1</a>
    <a class="tab" data-tab-id="tab-2">TAB 2</a>
    <a class="tab" data-tab-id="tab-3">TAB 2</a>
</nav>

<div id="tabs-content" class="tabs-content">
    <section id="tab-1">Content of tab 1</section>
    <section id="tab-2">Content of tab 2</section>
    <section id="tab-3">Content of tab 3</section>
</div>

Ion.get(".tabs").tabs();

Text fields

The text fields allow the user input, edit and select text.

<div class="row">
    <div class="col">

        <div class="text-field">
            <input />
            <span></span>
            <label>Label text</label>
        </div>

    </div>
    <div class="col">

        <div class="text-field">
            <i class="icon">&#xE0BE;</i>
            <div>
                <input />
                <span></span>
                <label>Label text</label>
            </div>
        </div>

    </div>
</div>

Searchbar fixed

The searchbars are an type of text fields for search by input. The searchbar fixed is hidden until user action.

<div class="searchbar fixed">
    <div class="search-field">
        <i class="icon">&#xE8B6;</i>
        <input type="search" placeholder="Pesquisar" />
        <span></span>
    </div>
</div>

Searchbar centered

The searchbar centered is ideal for toolbars.

Toasts

The toasts provides a brief message feedback about an operation or task.

Ion.toast({
    text: "Toast text",
    duration: 3000
});

Toolbar

Toolbar can group quick actions for the user. They appear above the view, can be static or fixed.

<header class="toolbar light-blue-500">
    <a class="radial" onclick="Ion.navbar.show()"><i class="icon">&#xE5D2;</i></a>

    <div class="flex">
        <div class="searchbar centered light-blue-100">
            <i class="icon">&#xE8B6;</i>
            <input type="search" placeholder="Pesquisar" />
        </div>
    </div>
    
    <a class="radial"><i class="icon">&#xE029;</i></a>
</header>

Tooltips

Tooltips help clarify the purpose of other components of the page with descriptive texts by action of user.

The attribute data-position changes the position of tooltip, by default this attribute has the value "bottom", and data-tooltip is the description text of an element.

<button class="button raised" data-tooltip="Tooltip text bottom">Tooltip bottom</button>

<button class="button raised" data-tooltip="Tooltip text top" data-position="top">Tooltip top</button>

<button class="button raised" data-tooltip="Tooltip text left" data-position="left">Tooltip left</button>

<button class="button raised" data-tooltip="Tooltip text right" data-position="right">Tooltip right</button>