genadis / aurelia-mdl Goto Github PK
View Code? Open in Web Editor NEWAurelia plugin for Material Design Lite
License: Apache License 2.0
Aurelia plugin for Material Design Lite
License: Apache License 2.0
Probably something easy, but I'm not sure what I'm doing wrong..
I have loaded the 'mdi' icon set - because there are more icons than the official MD icon set by Google - and if I use them in my page, it works ok.
However, the aurelia-mdl 'layout' tries to use the (unavailable) standard menu icon and just shows "menu" rather than an icon.
How could I get the correct icon in there?
I'm trying this:
<template bindable="router">
<div mdl="layout">
<header class="mdl-layout__header">
<i class="mdl-layout-icon mdi mdi-menu"></i>
<div class="mdl-layout__header-row">
...
With MDI, to show the icon elsewhere, it'd just be <i class="mdi mdi-icon"></i>
but if I just put that somewhere, it just appears in the wrong place, and the actual menu icon spot still has the broken behaviour. The above snippet gives me no new icon, and still broken behaviour.
Any hints? ๐
I've been looking at the code and the MDL site to try to figure out how to use a modal, but would really love to see an example of a modal used with aurelia-mdl
..
Would you happen have any example code anywhere?
Thanks! โญ
Is it possible to set a custom timeout
value on the snackbar element?
Are there any plans to support webpack (NPM)?
I'm using this definition for my tabs:
<div mdl="tabs" class="mdl-layout__tab-bar mdl-color--cyan-500 mdl-color-text--blue-grey-700 mdl-cell--hide-tablet mdl-cell--hide-phone">
<a repeat.for="row of router.navigation | authFilter: isAuthenticated" class="mdl-layout__tab ${row.isActive ? 'is-active' : ''}" href.bind="row.href">${row.title}</a>
</div>
The idea is for each tab to redirect to one of my defined routes. When hovering over any of the tabs, I can see the correct URL in the browser footer. But, When clicking on a tab, I get the following error:
layout.js:444 Uncaught SyntaxError: Failed to execute 'querySelector' on 'Element': '#/config' is not a valid selector.
On my page, I have between 1 and n textfields (I use a repeat.for
), and I'm getting this odd behaviour:
As you can see, the <label>
floats ok for the bottom textfield, but is not floating in the first.
The only difference in where the two are getting their content is that the top one gets it straight from an object property (value.bind="taskDetails.server"
) and the lower one gets it from an array that's repeated over. I'll put the code below for reference.
Note: If I edit the text in the top textfield, the label then floats properly, it's just when the data gets placed there by the value.bind
that it's behaving weirdly. ๐
Any idea what I'm doing wrong here, to get this odd behaviour? Have you seen anything like this?
Cheers! ๐
Code:
<template>
<div mdl="grid">
<div class="mdl-cell mdl-cell--12-col-desktop">
<div mdl="grid" class="mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--6-col-tablet">
<div mdl="textfield" class="mdl-textfield--floating-label">
<input id="server" class="mdl-textfield__input" type="text" value.bind="taskDetails.server" disabled.bind="!edit">
<label for="server" class="mdl-textfield__label">Server to target</label>
</div>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--12-col-desktop" repeat.for="url of taskDetails.urls">
<div mdl="grid" class="mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
<div mdl="textfield" class="mdl-textfield--floating-label">
<input id="edit_${$index}" class="mdl-textfield__input" type="text" value.bind="url" disabled.bind="!edit">
<label for="edit_${$index}" class="mdl-textfield__label" >URL</label>
</div>
</div>
<div class="mdl-cell mdl-cell--middle mdl-cell--1-col">
<div if.bind="edit">
<button
id="delbutton-${$index}"
mdl="button"
class="mdl-button--icon mdl-button--accent mdl-js-ripple-effect"
click.trigger="del($index)">
<i class="mdi mdi-delete"></i>
</button>
<label mdl="tooltip" class="mdl-tooltip--top" for="delbutton-${$index}">
Remove URL
</label>
</div>
</div>
</div>
</div>
</div>
</template>
I have downloaded the Aurelia Skeleton Navigation project, and followed the installation instructions from the aurelia-mdl README.
In the app.hmtl
I have changed the code to the following:
<template>
<require from="nav-bar.html"></require>
<require from="encapsulated-mdl/material.amber-pink.min.css"></require>
<nav-bar router.bind="router"></nav-bar>
</template>
When the app starts up, it throws a 404, not being able to find encapsulated-mdl/material.amber-pink.min.cs
.
I have managed to overcome this by physically copying all the files from jspm_packages/github/genadis/[email protected]
into jspm_packages/github/genadis/[email protected]
.
I'm trying to get a tooltip to show on each button for items in an array, that are iterated by a repeat.for
.
The MDL docs have a simplistic example of a tooltip being for="id-of-thing"
, but if I put that in my repeat
I either get only a tooltip on the first item (if the id
is a static name like editbutton
, or no tooltip, if I try dynamic id
generation like below)
<div class="mdl-list" click.delegate="handleClick($event)" style="height: 100%;">
<div class="mdl-list__item" repeat.for="entry of taskList" style="height: 56px;">
<span class="mdl-list__item-primary-content">
${entry.name}
</span>
<span class="mdl-list__item-secondary-action">
<button id="editbutton-${$index}" mdl="button" class="mdl-button--icon mdl-button--colored">
<i class="mdi mdi-pencil"></i>
</button>
<div mdl="tooltip" class="mdl-tooltip--right" for="editbutton-${$index}">
Edit Task
</div>
</span>
...
Any ideas?
And also, I can only seem to get mdl-tooltip--large
to work, the --right
in the above code does not put the tooltip on the right..
I'd like to be able to add an additional entry to mdlTypes
. E.g. say we want to use mdl-selectfield as <select mdl="select" ...>
. Is it possible currently?
As far as I can tell, the checkbox and switch elements are not updating when the aurelia bound property changes. I've disabled the mdl code and aurelia is checking/unchecking the checkbox but the the change
event in the mdl code is not being called when being updated programmaticaly.
I'll conduct some more testing to check I'm not doing anything stupid...
If not please write up a short document on how to
Hi,
So I'm trying out the new aurelia-cli
and it seems to only use packages via npm.
I've tried all sorts of contortions, but I can't seem to get aurelia-mdl
and its encapsulated-mdl
dependency to work - I just get errors in the browser.
Have you tried the cli
? Did you get mdl
to work and if so, how?
I'm wanting to migrate my project (based on aurelia-mdl
) to use the cli
as the packaging looks very nice in that structure, but I'm stuck on this..
Any and all assistance would be very much appreciated.
My expected "happy path" for a basic use case (which does not work at present):
au new
(follow the prompts)npm install aurelia-mdl
aurelia_project/aurelia.json
:"dependencies": [
...
"aurelia-mdl",
...
]
app.html
: <require from="encapsulated-mdl/material.amber-pink.min.css"></require>
au run --watch
At this point I get errors: ๐ญ
GET http://localhost:9000/node_modules/aurelia-mdl/dist/commonjs/index/mdl.js 404 (Not Found)
Unhandled rejection Error: Script error for "aurelia-mdl/mdl"
http://requirejs.org/docs/errors.html#scripterror
at Error (native)
at F (http://localhost:9000/scripts/vendor-bundle.js:3661:290)
at HTMLScriptElement.onScriptError (http://localhost:9000/scripts/vendor-bundle.js:3684:113)
...
So I guess that the default, commonjs path is screwy, and change my entry in aurelia_project/aurelia.json
to:
{
"name": "aurelia-mdl",
"path": "../node_modules/aurelia-mdl/dist/amd",
"main": "index"
},
Now I get
GET http://localhost:9000/src/annoto-mdl.js
Unhandled rejection Error: Script error for "annoto-mdl", needed by: aurelia-mdl/mdl
http://requirejs.org/docs/errors.html#scripterror
at Error (native)
at F (http://localhost:9000/scripts/vendor-bundle.js:3661:290)
at HTMLScriptElement.onScriptError (http://localhost:9000/scripts/vendor-bundle.js:3684:113)
...
I try to npm install annoto-mdl --save
, but get 404 Registry returned 404 for GET on https://registry.npmjs.org/annoto-mdl
I search for annoto-mdl
, but Google failed to find it for me.. can you help? ๐
I notice in the package.json
that there are references to it and a bitbucket repo, but that appears to be inaccessible:
"dependencies": {
"annoto-mdl": "bitbucket:annototeam/annoto-mdl@annoto-widget"
},
Cheers,
Frode
๐
I have changed the code in the nav-bar.html
of the Aurelia Skeleton Navigation project to:
<template bindable="router">
<div mdl="layout" class="mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">${router.title}</span>
<div class="mdl-layout-spacer"></div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<ul>
<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
<a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a>
</li>
</ul>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content page-host">
<router-view></router-view>
</div>
</main>
</div>
</template>
But, when rendering, I am seeing the following issues:
Then I would also like to understand the following:
If I use your code snippet from the README:
<button mdl="button" class="mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
it displays the mdl-fab button, but instead of rendering an icon on the button, the text "add" is displayed.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.