tilwinjoy / angular-bootstrap-material Goto Github PK

View Code? Open in Web Editor NEW

21.0 2.0 13.0 125 KB

AngularJS directives for bootstrap material design components

Home Page: http://tilwinjoy.github.io/angular-bootstrap-material

JavaScript 94.18% HTML 5.82%

angular-bootstrap-material's Introduction

AngularJS Bootstrap Material Design

AngularJS directives for creating bootstrap material design components based on Bootstrap material design css.

This is a work in progress.

##Getting Started

This project is an AngularJS version of the aswesome Bootstrap material design. It removes the dependency on jQuery as well as Bootstrap's JavaScript and makes it easy to work with dynamic AngularJS components

###Dependencies:

AngularJS
Angular-messages
UI Bootstrap (Optional: required for supporting bootstrap's JavaScript components)
Bootstrap CSS (tested with version 3.3.6)
Bootstrap Material Design CSS components (bootstrap-material-design.css and ripples.css)

###How to install:

run bower install abm to install via bower or grab the latest source from Github and include it in your project after the dependencies.

Include angularBootstrapMaterial module in your application:

 angular.module('app', ['angularBootstrapMaterial']);

###CSS Related Stuff: This project doesn't do any CSS magic, all that comes from Bootstrap material design.
For demos and documentation of typography, tables, icons etc refer the Bootstrap material design documentation

###Demos

Visit http://tilwinjoy.github.io/angular-bootstrap-material/ for demos

Support and Contributions

If you like this project, don't forget to star this repository.
Feature requests, bug reports and helping hands are very welcome. Please see the CONTRIBUTING.md file.

If you have any suggestions for improvement, please use the general discussion thread.

Development

The build process uses Gulp and frontend dependencies are managed via Bower. Ensure you have nodejs installed.

After cloning the repo, run npm install && bower install to ensure you have all dev dependencies.

Once you make the changes, run gulp and load the index.html in demos folder in browser for testing.

angular-bootstrap-material's People

Contributors

Stargazers

Watchers

Forkers

migaber stvhanna palsuman unseen1980 jgutierro vibhor-trantor dalbir nitinsinha63 abe312 makotokadowaki motabass marveluck

angular-bootstrap-material's Issues

Ripple effect

I have noticed that The ripple effect is no working for me .. I'm using abm-component directive where needed .. but it doesn't show on checkboxes, navbar etc 😞 (does work on buttons though)

example:

<header class="header-navbar">
  <nav class="navbar navbar-default" abm-component>
    <div class="container-fluid">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" aria-expanded="false" ng-click="navbar.collapse = !navbar.collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="">Nova<div class="ripple-container"></div></a>
      </div>

      <main-menu class="navbar-collapse collapse" uib-collapse="navbar.collapse" role="navbar.role"></main-menu>

    </div>
  </nav>
</header>

The main-menu component loads the <ul /> with all the menu items.

General discussion

^What the title says.

directive scope is not updating parent model

im trying to use BMD to build a set of directives to apply various filters and validations, to different kind of inputs and to make things simplier making every input as close to a one liner as possible.

so i make my own directives and define in templetes the markup using bmd-* attributes, and it seems to work fine. i set the model in the directive using

scope:{
modelValue: '='
}

and then assign as ng-model="modelValue" for the inputs in the template.

the thing is, if i update the model straight from the controller it updates just fine the inputs, and it does the validations that where setup. but if i write on the input there are no events firing at all then doesnt change in the directive nor in the parent model, i checked with ng-inspector and the model doesnt change when the input is writen into.
i did the same thing with plain html and it works just fine, but once i add the bmd-* attirbutes its doesnt work anymore, any clue on this issue?

Angular-translate

Hi, thanks for your module,
can you image to add angular-translate support?
For example when using form- groups I would like to translate error messages.

Bower version out-of-date - New tag needed

Hi.

The last tag we have is based on this commit 011301a.

Because of that, the bower version is out-dated and some things don't work properly (like the floating labels).

I think it's time to create a new tag.

Thanks!

Example of classList variable

Found the ng-class directive in form-group.html and I am wondering how it can be used to control has-class style.

I wrote

in angular html template file and the result is ng-class="{}"

Thanks,

Connie

Uncaught TypeError: Cannot read property 'init' of undefined at HTMLDocument.<anonymous> (..material-dashboard.js?v=1.2.0:31:15)

As you can see error in heading I am unable to initialize materialize style on my UI, I am running with this problem from last couple of hours and unable to fix yet, I have done already included arrive.min.js before material-dashboard.js so please don't mention in your solution.

below are scripts and css I am loding in sequence -
`

<!--  Material Dashboard CSS    -->
<link href="../node_modules/material-dashboard/css/material-dashboard.css?v=1.2.0" rel="stylesheet"/>

<!--     Fonts and icons     -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet' type='text/css'>

<!--   Core JS Files   -->
<script src="../node_modules/material-dashboard/js/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="../node_modules/material-dashboard/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../node_modules/material-dashboard/js/arrive.min.js" type="text/javascript"></script>
<script src="../node_modules/material-dashboard/js/material.min.js" type="text/javascript"></script>

<!--  Charts Plugin -->
<script src="../node_modules/material-dashboard/js/chartist.min.js"></script>

<!--  Notifications Plugin    -->
<script src="../node_modules/material-dashboard/js/bootstrap-notify.js"></script>

<!--  Google Maps Plugin    -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwXN6k7T7X7o1bGH4YhZHEC_kFLi951ew"></script>

<!-- Material Dashboard javascript methods -->
<script src="../node_modules/material-dashboard/js/material-dashboard.js?v=1.2.0"></script>`

Thanks in advance.

form support in 2 row

i am trying to make a fluid layout for a form, with 2 row element that collapse to a single row when col-xs is reached

that's what i have do

                <abm-form-group class="form-group">
                    <label class="col-xs-2 col-sm-2 control-label">Alba</label>
                    <div class="col-xs-10 col-sm-4">
                        <timepicker-pop input-name="alba" class="input-group"
                                        input-time="main.settings_save.alba"
                                        show-meridian='false'></timepicker-pop>
                    </div>
                </abm-form-group>

                <abm-form-group class="form-group">
                    <label class="col-xs-2 col-sm-2 control-label">Tramonto</label>
                    <div class="col-xs-10 col-sm-4">
                        <timepicker-pop input-name="tramonto" class="input-group"
                                        input-time="main.settings_save.tramonto"
                                        show-meridian='false'></timepicker-pop>
                    </div>
                </abm-form-group>

now, if i put col-md-6 on abm-form-group
it will 'work' but the second row (that's just a single row)
will 'cover' the first one and i am not able to gain focus on the row.

if i put a div class='row' element, it won't pad using bootstrap standard padding.

previously, using just boostrap i use

but seems that on adb-form-group i can't do that, it cover the div, as said.

Error message is hidden when form control loses focus

I observe that error message of form control is hidden when it loses focus.
This behaviour does not match the requirement of the project i am currently working on.

Is it possible to retain the message when form control loses focus?
This is the template code found in form-group.html

<div ng-show="showErrors" ng-messages="this['fg_'+$id].$error" ng-messages-multiple>
    <div ng-if="errorMessagesInclude" ng-messages-include="{{errorMessagesInclude}}"></div>
    <div ng-repeat="(key,value) in errorMessageMap">
      <!-- use ng-message-exp for a message whose key is given by an expression -->
      <div ng-message-exp="key" class="help-block">{{value}}</div>
    </div>
  </div>

Thanks,

Connie

Not able to add input with prefix icon

Here's the example.

Failed to instantiate module ngMessages / no ripples on header menu

I try to add the material design on my bootstrap.
This is my import:

// Import angular
import 'angular';

// Animation
import angularAnimate from 'angular-animate';

// Router
import angularUIRouter from 'angular-ui-router';

import angularUIBootstrap from 'angular-ui-bootstrap';

import angularBootstrapMaterial from 'angular-bootstrap-material/dist/angular-bootstrap-material';

And my css imports:

@import 'node_modules/bootstrap/dist/css/bootstrap';
@import 'node_modules/bootstrap-material-design/dist/css/bootstrap-material-design.min';
@import 'node_modules/bootstrap-material-design/dist/css/ripples.min';

My angular module:

export const demoModule = angular.module('demo', [
    angularAnimate,
    angularUIRouter,
    angularUIBootstrap,
    'angularBootstrapMaterial',
]);

I get this error:

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module demo due to:
Error: [$injector:modulerr] Failed to instantiate module angularBootstrapMaterial due to:
Error: [$injector:modulerr] Failed to instantiate module ngMessages due to:
Error: [$injector:nomod] Module 'ngMessages' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=ngMessages

What do I have forgot ? Thank you

Edit: I fixed the problem by a import of angular-messages

NEW problem: I haven't any ripples on the header menu :/

support for slider

Hello,

any plan to support slider from bootstrap material ui?

empty "main" attribute in bower.json file

The empty "main" attribute in the bower.json file caused issues with wiredep, there is a PR for this issue

Select drop down isn't formatted like material drop down .

So currently the drop down for the select input field just looks like a select list with a different font and not like an material drop down.

Problem using components in angular with ripple effect

Look this example:

<header>
    <nav class="navbar navbar-inverse navbar-static-top"  abm-component="" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" ng-click="$ctrl.navCollapsed = !$ctrl.navCollapsed">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" ui-sref="home">Brand</a>
            </div>
            <div class="collapse navbar-collapse" ng-class="!$ctrl.navCollapsed && 'in'">
                <ul class="nav navbar-nav">
                    <li ui-sref-active="active">
                        <a ui-sref="home" ng-click="$ctrl.setNavCol(true)"><i class="mdi mdi-home mdi-lg"></i></a>
                    </li>
                    <li ui-sref-active="active" ng-click="$ctrl.setNavCol(true)">
                        <a  ui-sref="page1" ng-click="$ctrl.setNavCol(true)">Page 1</a>
                    </li>
                    <li ui-sref-active="active" ng-click="$ctrl.setNavCol(true)">
                        <a ui-sref="page2" ng-click="$ctrl.setNavCol(true)">Page 2</a>
                    </li>
                </ul>
            <lang></lang>
            </div>
        </div>
    </nav>
</header>

lang.component.html:

<ul class="nav navbar-nav navbar-right lang">
    <li  ng-class="{ active: $ctrl.getLanguage()==='fr'}" class="lang" ><a href="" ng-click="$ctrl.changeLanguageTo('fr')" ng-class="{ active: $ctrl.getLanguage()==='fr'}">FR</a></li>
    <li  ng-class="{ active: $ctrl.getLanguage()==='en'}" ><a href="" ng-click="$ctrl.changeLanguageTo('en')">EN</a></li>
</ul>

It's seems, it's not possible to apply a ripple on the <ul><li> which is in the <lang> component.
I don't have the effect, how can I do ?

Thank you

Edit: Simple warkaround is to write: abm-component="" on each li or ul but I want to avoid this if possible