{% extends 'layout.twig' %} {% set title %}Piwik UI demo{% endset %} {% block head %} {{ parent() }} {% endblock %} {% block root %}

{{ title }}

This page is intended to show all the UI components and styles available to use in Piwik.

Grid system

Materialize's grid system allows to organize the content in columns, all the while staying responsive for smaller screens.

.col m1
.col m1
.col m1
.col m1
.col m1
.col m1
.col m1
.col m1
.col m1
.col m1
.col m1
.col m1
.col m8
.col m4
.col m4
.col m4
.col m4
.col m6
.col m6

Read more about Materialize's grid system.

Typography

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading
h6. heading

This is a paragraph, and this is a link.

Another paragraph, 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.

Alignment classes

Left aligned block.

Center aligned block.

Right aligned block.

<p class="left">Left aligned block.</p>
<p class="center">Center aligned block.</p>
<p class="right">Right aligned block.</p>

Left aligned text.

Center aligned text.

Right aligned text.

<p class="left-align">Left aligned text.</p>
<p class="center-align">Center aligned text.</p>
<p class="right-align">Right aligned text.</p>

Lists

<ul>
  <li>...</li>
</ul>

Buttons

Link 
<a class="btn" href="#">Link</a>
<input type="button" class="btn" value="Input">
<input type="submit" class="brn" value="Submit">
Large button 
<button class="btn btn-large">Large button</button>
<a class="btn btn-large" href="#">Large button</a>
Block button Large block button 
<a class="btn btn-block" href="#">Block button</a>
<a class="btn btn-large btn-block" href="#">Large block button</a>

Flat buttons

Flat button Flat button 
<a class="btn-flat" href="#">Flat button</a>
<a class="btn-flat" href="#"><span class="icon-add"></span></a>
<a class="btn-flat btn-large" href="#">Flat button</a>
<a class="btn-flat btn-large" href="#"><span class="icon-add"></span></a>

Loading indicator

<div piwik-activity-indicator loading="true"></div>

This is an angular component. You can change the loading state via angular.

Progressbar

<div piwik-progressbar progress="5" label="Downloading database"></div>

This is an angular component. Update the progress and label via angular.

Alerts

Info! This alert needs your attention, but it's not super important.
Success! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.
Error! Change a few things up and try submitting again. 
<div piwik-alert="info">
    <strong>Info!</strong> This alert needs <a>your attention</a>, but it's not super important.
</div>
<div piwik-alert="success">
    <strong>Success!</strong> You successfully read this important <a>alert message</a>.
</div>
<div piwik-alert="warning">
    <strong>Warning!</strong> Better <a>check</a> yourself, you're not looking too good.
</div>
<div piwik-alert="danger">
    <strong>Error!</strong> Change <a>a few things</a> up and try submitting again.
</div>

Forms

Simple form

It is possible to use all kind of HTML in the help text, including links. 
<div piwik-form>
    <div piwik-field uicontrol="text" name="username"
          title="Username"
          introduction="This is an introduction. It can be used to group form fields"
          placeholder="Some text here">
    </div>

    <div piwik-field uicontrol="text" name="email"
         title="Email"
         inline-help="This is the inline help which provides more information.">
    </div>

    <div piwik-field uicontrol="text" name="textWithoutPlaceholder"
         title="This field has a title but no place holder">
    </div>

    <div piwik-field uicontrol="text" name="textWithoutTitle"
         title="This field has a place holder but no title">
    </div>

    <div piwik-field uicontrol="text" name="textWithValue"
         value="My value"
         title="This field has already a value set">
    </div>

    <div piwik-field uicontrol="password" name="password"
         title="Password"
         placeholder="Enter your password here">
    </div>

    <div id="complexHelpText" class="inline-help-node">
        It is possible to use all kind of HTML in the help text, including <a href="javascript:;">links</a>.
    </div>

    <div piwik-field uicontrol="text" name="alias"
         title="Disabeld text field"
         disabled="true"
         placeholder="This value cannot be changed"
         inline-help="#complexHelpText">
    </div>

    <div piwik-field uicontrol="text" name="fullWidthText"
         title="Form fields can be made full witdth"
         full-width="true"
         placeholder="Some text here...">
    </div>

    <div piwik-field uicontrol="textarea" name="description"
         title="Description"
         inline-help="This is a textarea. It automatically gets larger the more text is entered.">
    </div>

    <div piwik-field uicontrol="select" name="language"
         title="Language"
         introduction="Select fields"
         value="1"
         inline-help="Single select"
         options='{1: "English",2:"Spanish"}'>
    </div>

    <div piwik-field uicontrol="multiselect" name="phonenumbers"
         title="Phone numbers"
         value="1"
         inline-help="Multi select"
         options='{1: "0123456789",2:"9876543210",3:"5432109876"}'>
    </div>

    <div piwik-field uicontrol="checkbox" name="enableFeature"
         title="Enable feature"
         introduction="Radio and checkboxes"
         inline-help="This is a single checkbox">
    </div>

    <div piwik-field uicontrol="checkbox" name="enableFeature"
         title="Enable feature"
         var-type="array"
         options='{today: "Today", yesterday: "Yesterday",week: "Previous 30 days (not including today)"}'
         inline-help="This field shows multiple checkboxes as we declare we want to get an array of values.">
    </div>

    <div piwik-field uicontrol="radio" name="defaultReportDate"
         title="Report to load by default"
         options='{today: "Today", yesterday: "Yesterday",week: "Previous 30 days (not including today)"}'
         inline-help="This is a help text that can be used to describe the field. This help text may extend over several lines.">
    </div>

    <div piwik-field uicontrol="site" name="currentsite"
         introduction="Piwik specific form fields"
         title="Select a website">
    </div>

    <div piwik-save-button></div>
    <div piwik-save-button
         onconfirm="myController.save()"
         disabled="myController.isDisabled"
         value="Changed button text"
         saving="myController.isLoading">
    </div>
</div>

If you do not want to use one ouf our form fields we recommend to add the class browser-default to the input or select element.

Code

Inline

You can put code in a text using the code tag. 

You can put code in a text using the <code piwik-select-on-focus>code</code> tag.

Block

Or you can display a code block:

<!-- Piwik -->
<script type="text/javascript">
</script>
<!-- End Piwik Code -->
<pre piwik-select-on-focus>...</pre>

Tables

First Name Last Name Username
Mark Otto @mdo
Jacob Thornton @fat
Larry the Bird @twitter 
<table><thead>...</thead><tbody>...</tbody></table>

Content intro

My headline

My text goes is in here

<div piwik-content-intro>
    <h2>My headline</h2>
    <p>My text goes is in here</p>
</div>

A content intro can be used as an introduction to the following content and is usually used as the first part of a page followed by one or multiple content blocks.

Content blocks

My text goes is in here

<div piwik-content-block content-title="My title" help-url="https://piwik.org">
    <p>My text goes is in here</p>
</div>

Content Table

My intro text is here

Column 1Column 2
Value 1Value 2
Value 1Value 2
 
<div piwik-content-block content-title="My title" help-url="https://piwik.org">
    <p>My intro text is here</p>
    <table piwik-content-table>
        <thead><tr><th>Column 1</th><th>Column 2</th></tr></thead>
        <tbody>
            <tr><td>Value 1</td><td>Value 2</td></tr>
            <tr><td>Value 1</td><td>Value 2</td></tr>
        </tbody>
    </table>
</div>

Icons

<span class="icon-ok"></span>
{% endblock %}