Material Design Lite (MDL) VS Материал Angular2 в приложении Angular2

На YouTube и других обучающих сайтах есть несколько руководств по Angular2, некоторые из которых использовали Material Design Lite (MDL), а некоторые использовали новый Материал Angular2 в демонстрационных целях.

Учитывая, что Angular2 Material все еще довольно новый (в настоящее время находится в альфа-версии) и ограничен по количеству компонентов и документации по сравнению с MDL, который был бы лучшим вариантом для реализации в Angular2 на данный момент и каковы за и против каждого конкретного для Angular2?


angular angular-material2 material-design-lite
person Neville Katila    schedule 16.06.2016    source источник

Ответы (3)


arrow_upward
4
arrow_downward

MDL определенно лучше документирован (я не нашел хорошей документации по Angular2 Material). Я думаю, что из-за этого MDL является (в настоящее время) лучшим выбором. Минус MDL в том, что он не интегрирован в typescript/angular2.

Если вы собираетесь использовать компоненты MDL в своих шаблонах компонентов Angular 2, вы можете расширить свой компонент примерно так, чтобы зарегистрировать компоненты MDL: (иначе анимации MDL не будут работать, поскольку они зависят от javascript)

declare var componentHandler: any;
export class MaterialTemplate {
    ngAfterViewInit(){
        componentHandler.upgradeAllRegistered();
    }
}

Использование будет примерно таким:

@Component({
    selector: 'my-selector',
    template: `
        <form action="#">
        <div class="mdl-textfield mdl-js-textfield">
        <input value="{{bleh}}" class="mdl-textfield__input" type="text" id="sample1">
        <label class="mdl-textfield__label" for="sample1">Text...</label>
        </div>
        <button (click)="action()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
        create
        </button>
        </form>`
})
export class CreateComponent extends MaterialTemplate {...}

Как только Angular2 Material выйдет из альфа-версии и будет иметь некоторую документацию, я бы переключился на это.

person Georg Grab    schedule 16.06.2016

arrow_upward
0
arrow_downward

Это полностью зависит от вашего варианта использования. Будет ли ваш проект запущен в работу в ближайшее время или для этого есть достаточно времени? Требуется ли вам настройка компонентов пользовательского интерфейса до каждой детали или это очень общая цель? Я много исследовал, и, поскольку у нас мало времени для запуска в производство, я выбираю Bootstrap Material Design. URL-адрес: mdbootstrap.com Причина: если вы используете компоненты углового материала, во-первых, они находятся в альфа-секунде, мой вариант использования очень индивидуальный. Например, я вызываю остальные службы, чтобы заполнить даже такие основы, как радио, флажки.

Дело в том, если у вас мало времени и вам требуется серьезная настройка, используйте MDL (сейчас его используют даже популярные компоненты Wijmo 5 ng2), или вы можете подождать и выбрать материал angular2.

person Pratik Kelwalkar    schedule 16.06.2016

arrow_upward
0
arrow_downward

Помимо Angular2-material и MDL, существует также MaterializeCSS, который представляет собой CSS-фреймворк, основанный на материальном дизайне. Их официальный веб-сайт находится по адресу http://materializecss.com.

В них гораздо больше рабочих компонентов, чем в MDL или Angular2-material, все с примерами и документацией.

Однако MaterializeCSS основан на JQuery, т. е. ему нужен JQuery для активации динамического поведения некоторых компонентов. Взгляните на https://www.npmjs.com/package/angular2-materialize. . Этот пакет добавляет именно такое динамическое поведение в приложения Angular2. Просто импортируйте MaterializeDirective в свой компонент Angular2, и он должен работать.

person Cerny    schedule 27.07.2016