x-material
Material components for web
Introduction

We aim to create a toolkit of web components that does not require huge frameworks, custom JavaScript processors and does not dictate the user how their apps should be developed. Instead the x-material provides pluggable and friendly custom components that do not differ conceptually from other HTML elements.

The library is built on top of x-tag and provides lightweight web components for designing user interfaces according to Material Design specification. The library is very much work in progress and will likely to change public API frequently - it currently cannot be used in production. You are more than welcome to join the development on GitHub.



Text View

Mat

Material

Material

Material

Material

Material

Material

Material

Material

Material

Material

Material


    <m-text-view text-style="display4">Mat</m-text-view>

    <m-text-view text-style="display3">Material</m-text-view>

    <m-text-view text-style="display2">Material</m-text-view>

    <m-text-view text-style="display1">Material</m-text-view>

    <m-text-view text-style="headline">Material</m-text-view>

    <m-text-view text-style="title">Material</m-text-view>

    <m-text-view text-style="subheading">Material</m-text-view>

    <m-text-view text-style="body2">Material</m-text-view>

    <m-text-view text-style="body1">Material</m-text-view>

    <m-text-view text-style="caption">Material</m-text-view>

    <m-text-view text-style="button">Material</m-text-view>

    <m-text-view text-color="secondary">Material</m-text-view>


                
Buttons

A button clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.

Raised Buttons









    <!-- Button with no colouring -->
    <m-button text="Button"></m-button>

    <!-- Coloured button (uses current theme) -->
    <m-button text="Button" primary></m-button>

    <!-- Coloured button (custom palette) -->
    <m-button text="Button" theme-color="blue-grey"></m-button>

    <!-- Disabled button -->
    <m-button text="Button" disabled></m-button>


                
Flat Buttons









    <!-- Button with no colouring -->
    <m-button text="Button" flat></m-button>

    <!-- Coloured button (uses current theme) -->
    <m-button text="Button" flat primary></m-button>

    <!-- Coloured button (custom palette) -->
    <m-button text="Button" flat theme-color="teal"></m-button>

    <!-- Disabled button -->
    <m-button text="Button" flat disabled></m-button>


                
Icons

Simply a wrapper around beautifully crafted Material icons by Google that can be viewed and searched here.








    <!-- Default icon colour -->
    <m-icon src="bluetooth"></m-icon>

    <!-- Primary theme colour -->
    <m-icon src="bluetooth" primary></m-icon>

    <!-- Custom colour -->
    <m-icon src="bluetooth" theme-color="indigo"></m-icon>


                
Avatar

Avatars and thumbnails represent entities or content, either literally through photography or conceptually through illustration. Generally, they are tap targets that lead to a primary view of the entity or content.

It is recommended that you do not use more that two characters as a placeholder.


E


IK






    <!-- Specify text as placeholder -->
    <m-avatar>E</m-avatar>

    <!-- Change background -->
    <m-avatar>IK</m-avatar>

    <!-- Specify the image source -->
    <m-avatar src="https://avatars2…"></m-avatar>


                
Cards

A card is a sheet of material that serves as an entry point to more detailed information. A card could contain a photo, text, and a link about a single subject.










    <!-- Use as any container -->
    <m-card elevation="2">
        …
    </m-card>


                
Lists

A list consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for tiles.

Add 8px of padding at the top and bottom of a list, except for lists with subheaders, which have their own padding.


A Abbey Christensen A Alex Nelson M Mary Johnson P Peter Carlsson T Trevor Hansen
Wi-Fi Bluetooth Data usage More

    <!--
        You can use avatars to deliver the content.
        Put icons to indicate a secondary action.
    -->
    <m-card
        elevation="2"
        style="padding-bottom: 8px;">
    <m-subhead text="Recent chat"></m-subhead>
    …
    <m-item-single>
        <m-avatar>T</m-avatar>
        Trevor Hansen
        <m-icon src="chat_bubble" class="action"></m-icon>
    </m-item-single>
    </m-card>

    <!--
        You can use icons to deliver the content.
        Put dividers to increase readability.
    -->
    <m-card
        elevation="2"
        style="padding-bottom: 8px;">
    <m-subhead
        theme-color="teal"
        text="Wireless & networks">
    </m-subhead>
    …
    <m-divider partial></m-divider>
    <m-item-single>
        <m-icon src="more_horiz" theme-color="teal"></m-icon>
        More
    </m-item-single>
    </m-card>


                
Toolbar

TBD



    <!-- Secondary toolbar with no icon -->
    <m-toolbar text="Title"></m-toolbar>

    <!-- Secondary toolbar with an icon -->
    <m-toolbar text="Title" nav-icon="menu"></m-toolbar>



                
Text Field

Text fields allow the user to input text, select text, and lookup data via auto-completion.










    <!-- An input with no hint -->
    <m-text-field></m-text-field>

    <!-- An input with a hint -->
    <m-text-field hint="Input text">
    </m-text-field>

    <!-- An input with a floating hint -->
    <m-text-field hint="Input text" floating>
    </m-text-field>

    <!-- Disabled input with a hint -->
    <m-text-field hint="Input text" disabled>
    </m-text-field>

    <!-- An input with a hint and an icon -->
    <m-text-field
    hint="Input text"
    input-icon="phone"
    </m-text-field>

    <!-- An input with a floating hint and an icon -->
    <m-text-field
        hint="Input text"
        input-icon="phone"
        floating>
    </m-text-field>

    <!-- An input with a character counter -->
    <m-text-field hint="Phone"
        floating
        max-length=10>
    </m-text-field>

    <!-- An input with validation enabled (using RegExp) -->
    <m-text-field hint="Phone"
        floating
        validation-rule="^\d*$"
        validation-message="Only numbers allowed.">
    </m-text-field>