rhythnic/meteor-mdl-ux

语言: JavaScript

git: https://github.com/rhythnic/meteor-mdl-ux

'适用于Google Material Design Lite的Reactive Blaze模板'
'Reactive Blaze Templates for Google's Material Design Lite'
README.md (中文)

MDL-UX

Material Design Lite对Meteor具有反应性。

关于

此repo是一个Meteor包,其中包含用于反复使用Material Design Lite的模板。

MDL

Material Design Lite(MDL)是一个类似于Bootstrap的CSS / Javascript框架,但适用于Material Design。

该MDL包具有两个优点。第一个是通用包装模板,它将初始化包装器中包含的所有MDL组件。这可以随时初始化任何组件组。 第二个优点是便利模板,有助于减少代码大小。便捷模板还可以反应性地调用MDL方法来“刷新”模板。

您可以在MDL网站上找到MDL组件的使用说明。

MDL CSS

此程序包不链接到MDL css文件。这样你就可以选择任何主题。首先,链接到head标签中的MDL文件。

<head>
  <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css">
  <script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

基本用法

按照MDL站点的指示编写MDL,然后使用MDL模板包装HTML。

{{#MDL}}
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>
{{/MDL}}

便利模板

因为编写所有CSS类可能会有点多,所以有4个模板试图减少它。 为标签之类的东西设置便利模板是没有意义的,其中许多代码是自定义的,但对于像按钮这样的东西 很高兴不必一直编写CSS类。这些模板位于components文件夹中。  mdlButton  mdlSpinner  mdlTextfield  mdlToggle(复选框,收音机,图标切换和切换)

mdlButton

{{> mdlButton effect="miniFab" icon="search" id="search-btn"}}

PARAMS:  效果:{string}'默认','fab','miniFab','icon'  涟漪:{boolean}  提出:{boolean}  color:{string}'primary'/'accent'  content:{string}文本内容(仅限默认效果)  icon:{string}图标名称

在mdlButton上,如果设置'href'变量,将呈现链接元素。如果设置'for'变量,则会呈现标签。否则将呈现一个按钮。

对于所有便捷模板,您可以设置其他变量以使其可用于模板的数据对象。它不会影响DOM。模板过滤掉非标准变量或数据属性。例如,如果我需要单击处理程序内的'this'文档'_id',我可以将它传递给按钮。

{{> mdlButton effect="icon" icon="more_vert" class="options-btn" _id=this._id }}

mdlSpinner

{{> mdlSpinner active=true color="single" }}

PARAMS:  active:{boolean}  color:{string}'single'/'multi'

mdl Textfield

{{> mdlTextfield label="Name" floating=true name="name"}}

PARAMS:  浮动:{boolean}  expandable:{boolean}  label:{string}  input:输入元素的{object | string}属性 * error:{string}错误消息(仅在输入处于无效状态时才可见)

在mdlTextfield上,任何不是标准HTML5全局变量的变量集都将传递给input元素。如果变量不是有效的输入属性,则它仅在数据对象上可用。如果要将全局变量(如id)传递给input元素,请使用序列化JSON。

{{> mdlTextfield input='{"id":"password", "class": "login-field"}' placeholder="Password" type="password"}}

在这种情况下,我们可以将类型和占位符放在输入JSON字符串的内部或外部。

通常,input元素需要'id'属性来匹配标签的'for'属性。如果您不提供ID,则会生成随机ID。

要使textarea呈现,请包含“rows”变量。如果expandable设置为true,则将忽略行。

mdlToggle

{{> mdlToggle toggle="switch" ripple=true label="notifications"}}

PARAMS:  切换:{string}'复选框','收音机','图标','切换'  涟漪:{boolean}  label:{string}  input:输入元素的{object | string}属性

mdl切换将变量传递给input元素,就像使用mdl Textfield一样。

mdlButton,mdlTextfield和mdlToggle将响应于在模板数据对象上设置“禁用”属性。 mdlToggle将响应设置'已检查'属性。

MDL.upgrade

如果您无法使用模板包装器,则可以调用MDL.upgrade函数并传入jQuery集。

var elements = tmpl.$('mdl-checkbox');
MDL.upgrade(elements);

mdlModal

mdlModal不是MDL的核心部分,但它是添加到此包中的东西。 mdlModal由全局模板和操作它的方法组成。

模板

将模板放在模板堆栈中足够高,这样它的大小就不会受到限制。

<main class="mdl-layout__content">
  {{> yield}}
  {{> mdlModal}}
</main>

MDL.modal

MDL.modal有3种方法。  MDL.modal.set()  MDL.modal.show() * MDL.modal.hide()

show和hide方法不带任何参数。 set方法将重新配置模态。默认情况下,Set也会显示模态,除非您在选项中将show设置为false。

MDL.set参数:  error {string}:错误消息,覆盖消息选项  message {string}:要显示的消息  onConfirm:{Function}:确认回调,设置此选项将导致模式底部显示“取消”和“确认”按钮  template {string}:要在模态内显示的模板名称。消息和错误选项覆盖模板。  templateData {Object}:模板选项的数据上下文  show {boolean}:显示模态,defualt为false

本文使用googletrans自动翻译,仅供参考, 原文来自github.com

en_README.md

mdl-ux

Material Design Lite made reactive for Meteor.

About

This repo is a Meteor package that contains templates for using Material Design Lite reactively.

MDL

Material Design Lite (MDL) is a CSS/Javascript framework similar to Bootstrap, but for Material Design.

This MDL package has two advantages. The first is a universal wrapping template that will initialize all MDL components contained in the wrapper. This fascilitates initializing any group of components whenever you want.
The second advantage is the convenience templates, which help reduce code size. Convenience templates also call MDL methods reactively to "refresh" the template.

You can find usage instructions for MDL components on the MDL website.

MDL CSS

This package doesn't link to the MDL css file. This is so you can choose any theme. First, link to the MDL files in a head tag.

<head>
  <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css">
  <script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

Basic Use

Write MDL as instructed by the MDL site, and then wrap the HTML with the MDL template.

{{#MDL}}
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>
{{/MDL}}

Convenience templates

Because writing all of the CSS classes can become a bit much, there are 4 templates that try to reduce that.
It doesn't make sense to have convenience templates for things like tabs, where a lot of code is custom, but for things like buttons
it's nice not to have to write the CSS classes all the time. Those templates are inside of the components folder.
mdlButton
mdlSpinner
mdlTextfield
mdlToggle (checkbox, radio, icon-toggle, and switch)

mdlButton

{{> mdlButton effect="miniFab" icon="search" id="search-btn"}}

Params:
effect: {string} 'default', 'fab', 'miniFab', 'icon'
ripple: {boolean}
raised: {boolean}
color: {string} 'primary'/'accent'
content: {string} text content (for default effect only)
icon: {string} icon name

On mdlButton, if you set an 'href' variable, a link element will be rendered. If you set a 'for' variable, a label will be rendered. Otherwise a button will be rendered.

For all of the convenience templates, you can set other variables to have them available on the data object of the template. It won't affect the DOM. The template filters out variables that are not standard or data attributes. For instance, if I need the document '_id' available on 'this' inside of the click handler, I can pass it to the button.

{{> mdlButton effect="icon" icon="more_vert" class="options-btn" _id=this._id }}

mdlSpinner

{{> mdlSpinner active=true color="single" }}

Params:
active: {boolean}
color: {string} 'single'/'multi'

mdlTextfield

{{> mdlTextfield label="Name" floating=true name="name"}}

Params:
floating: {boolean}
expandable: {boolean}
label: {string}
input: {object|string} attributes for the input element
* error: {string} error message (only visible if input is in an invalid state)

On mdlTextfield, any variable set that is not a standard HTML5 global variable will be passed along to the input element. If the variable is not a valid input attribute, it will be available only on the data object. If you want to pass a global variable, like id, to the input element, use serialized JSON.

{{> mdlTextfield input='{"id":"password", "class": "login-field"}' placeholder="Password" type="password"}}

In this instance, we could have put type and placeholder either inside or outside of the input JSON string.

Usually, the input element needs an 'id' attribute to match the 'for' attribute of the label. If you don't provide an id, a random one is generated.

To cause a textarea to be rendered, include a 'rows' variable. If expandable is set to true, rows will be ignored.

mdlToggle

{{> mdlToggle toggle="switch" ripple=true label="notifications"}}

Params:
toggle: {string} 'checkbox', 'radio', 'icon', 'switch'
ripple: {boolean}
label: {string}
input: {object|string} attributes for the input element

mdlToggle passes variables to the input element, just like with mdlTextfield.

disabled

mdlButton, mdlTextfield, and mdlToggle will respond reactively to setting a 'disabled' property on the template data object. mdlToggle will respond reactively to setting a 'checked' property.

MDL.upgrade

In the event that you can't use the template wrapper, you can call the MDL.upgrade function and pass in the jQuery set.

var elements = tmpl.$('mdl-checkbox');
MDL.upgrade(elements);

mdlModal

mdlModal is not part of the core of MDL, but it's something added to this package. mdlModal consists of a global template and methods for manipulating it.

template

Put the template high enough in the template stack so that it's size won't be constrained.

<main class="mdl-layout__content">
  {{> yield}}
  {{> mdlModal}}
</main>

MDL.modal

There are 3 methods on MDL.modal.
MDL.modal.set()
MDL.modal.show()
* MDL.modal.hide()

The show and hide methods don't take any parameters. The set method will reconfigure the modal. Set will also show the modal by default, unless you set show to false in the options.

MDL.set parameters:
error {string} : error message, overrides message option
message {string} : message to display
onConfirm: {Function} : confirm callback, setting this option will cause "Cancel" and "Confirm" buttons show on the bottom of the modal
template {string} : name of template to display inside of the modal. template is overridden by the message and error options.
templateData {Object}: data context for template option
show {boolean}: show the modal, defualt is false