Administri – Material Design for AngularJS

If you’re an AngularJS developer and you need to streamline your app development with awesome design, you most definitely need to check out the material design for AngularJS. The post highlights all the benefits the design has to offer. The first thing that is most likely going to catch your eye is that the design is extremely neat and attractive. The Administri design has pre-designed components for all sorts of administrative panel blocks and features.

Video: Material Design for AngularJS

Dashboard

The design pack comes with three types of dashboards: just plain dashboard, analysis-focused and tailored for social media. These dashboards have some of the components that design comes bundled with. Let’s take a closer look at the design components and see what’s so cool about each of them.

UI Elements

The material design for AngularJS has the following UI elements that you’ll be able to easily use for your needs: buttons, UI components, cards, colors, widgets, material icons, typography and grids. You can easily hook them up in your own app so that they perform the actions you want them to. First let’s take a closer look at the available buttons.

UI components administri

Buttons

Buttons are included with the .md-button directive. You can make all sorts of buttons, ranging from links to raised and not raised buttons. Disabled styling can be done using ng-disabled=”true” attribute. You can also make use of fabs. Speaking of which …

Fabs

Fabs are an amazing and very functional style of buttons. They can be used pretty much anywhere to give quick actions to the user. Fabs can be inserted using class=”md-fab” and inserting an SVG icon inside. A collection of material design SVG icons comes bundled with the theme.

Speed dial fabs

The speed dial fabs are fab-style buttons that reveal more options once you hover over or click them. You can choose from 4 direction modes, such as Up, Down, Left and right. Other than that, it’s possible to choose from two animation modes, which are md-fling and md-scale.

Button Sizes

It goes without saying that you’ll also be able to resize your buttons as you see fit. You can apply different classes to your buttons to achieve the desired height and width for your buttons. These classes are btn-sm, btn-xs, btn-lg or no class for the default height. So your buttons can be extra small, small, normal and large.

button sizes administri

UI Components

The UI components section of the material design for AngularJS has the following components built-in: bottom sheets, contact chips, progress circular bars, toasts, awesome Md app, tabs, fab speed dial, chip elements, dialog, linear progress bars, toolbar shrink, fab toolbar and static tabs.

Bottom Sheet

You can show a bottom sheet using the service $mdBottomSheet. You can show your sheet as a list or as a grid. You can dismiss your bottom sheet with the service or a swipe down.

Contact Chips

Contact Chips work like tags with contact pictures that you can add to any text field. They are displayed with a nice style and can be inserted or removed.

Circular Progress Bar

You can use determined progress bars and indeterminate progress bars using the directive md-progress-circular. For operations where the percentage of the operation completed can be determined, you want to use a determinate indicator. They give users a quick sense of how long an operation will take.

For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what’s happening behind the scenes and how long it will take, use an indeterminate indicator in that case.

Toast

You can use the following position options for your toasts: bottom, top, left and right. Toast can be dismissed with a swipe, a timer, or a button.

Awesome MD App

The tooltip is visible when the button is hovered over, focused, or touched. Additionally, the tooltip’s md-visible attribute can use data-binding to programmatically show/hide itself.

Tabs

Use the directive md-tabs and md-tab to create awesome tabs with animation when scrolling. You can bind the selected tab via the selected attribute on the md-tabs element.

Fab Speed Dial

You may supply a direction of left, up, down, or right through the md-direction attribute. Other than that, you can use either the md-fling animation mode or the md-scale one. Note that you can also hover over the directive’s area or tab through each button to open and activate the speed dial menu.

Chip Elements

Chips work like tags that you can add to any text field. They are displayed with a nice style and can be inserted or removed. You can use a custom chip template or the default one. Other than that, you can even use placeholders and override hint texts.

Dialog

You can show a Dialog using the service $mdDialog. It allows you to open a dialog over the app’s content. You can press Escape or click outside the dialog to close it and send focus back to the triggering button.

Linear Progress Bar

Linear progress bars are good for showing normal loading on page transitions. You can include these via the directive md-progress-linear.

linear progress bars

Toolbar Shrink

The Administri design comes with the toolbar shrink feature as well. The bar disappears in a really neat way.

Fab Toolbar

You can use the fabToolbar with a trigger and regular toolbar. You may use the md-open attribute to programmatically control whether or not the control is open, and you may set the direction that the toolbar appears using the md-direction attribute. This component currently supports the left and right options.

Static Tabs

It goes without saying that you will also have a static tab design ready to use. You can modify it to meet your needs as well. Moving on to the next item in the UI Elements drop-down menu.

Cards

The Administri design pack comes with multiple card designs, which are readily available for immediate use.

Colors

The same holds true for colors. By default your Angular Material application will use the default theme. The default theme is pre-configured with the following palettes for intention groups:

  • primary – indigo
  • accent – pink
  • warn – red
  • background – grey (note that white is also in this palette)

Configuring of the default theme is done by using $mdThemingProvider during application configuration.

Widgets

The Administri design pack also comes with a set of widget designs that you can modify and use for your project.

Material Icons

The material design for AngularJS also allows you to choose from a plethora of material design icons.

material icons administri

Typography

Plus, the design comes with matching typography, which adds even more appeal to your design.

Grid

And last but not least. The Administri material design also has a grid system built-in. That makes your design process by a long shot easier and the result is just bound to be stunning and state-of-the-art.

Material Design for AngularJS and Custom Pages

The pack also comes with a few pre-designed custom pages, such as profile, login, signup, forgot password, contact, 500 and 404. You can just modify them as you see fit instead of creating everything from scratch.

Tables Styles

You can also make use of 3 predesigned table styles: static tables, responsive tables and dynamic tables.

tables styles administri

Form Elements

The material design also comes with all sorts of form elements to simplify your life as a web developer. Other than that, you’ll have access to a few form designs with validation built-in.

Charting in Material Design for AngularJS

You can also make use of different kinds of charts, such as flot charts (line chart, realtime chart, area chart, stacked bar chart, pie chart and doughnut chart), Chart JS (Line Chart js, Bar Chart js, Radar Chart js, Polar Chart js, Pie Chart js and Doughnut Chart js), Morris charts (Line chart, Area chart) and other charts.

Maps

Another feature that you just can’t do without in up-to-date designs is maps. You can use a standard map, dynamic map and a styled map. Plus, VMAP designs are available as well.

Tasks

And finally you can also use consistent design for your to-do list functionality. You can add tasks, tick them off or delete, view all, view active or view completed. Plus, you can clear completed tasks.


Bottom Line

The Administri material design will allow you to jumpstart your next AngularJS-based project because you’ll be able to just modify the pre-designed UI components that come bundled. Thus, your next project will both work flawless and look awesome. Get the design and start creating more professional applications.

What do you think about the design?

About The Author

Vitaliy Kolos

Coming from tech support background, Vitaliy Kolos is into tons of web stuffs: WordPress SEO (his forte), web design, web development, inbound marketing and everything in between. Other than that, he's an avid audiobook reader and insatiable digital nomad.

  • Leila

    The design looks really great. It’s my understanding that you can use it with AngularJS only? Is there a way to use the design with Bootstrap or other frameworks?

    • Richard Heckel

      I’m not sure about this particular design, but it’s my understanding that it would not be possible to do it. Sure thing, you can trying decompose the design by using its elements but it won’t work out of the box. You may still need to confirm it with the actual designer.

      • Thanks for your assistance in the matter, Richard. You hit the nail on the head just like that 🙂

    • That’s exactly right, it’s specifically for AngularJS

  • Jose Caban

    I should agree that design looks really promising. Especially the color palette.

    • Thanks for your comment, Jose. I can’t agree more that it’s a really great choice when it comes to the color palette as well.