Угловые материалы: Базовый шаблон использования

Я бы очень хотел интегрировать в свое угловое приложение Базовый шаблон использования от Angular Materials. Угловые материалы: Базовый шаблон использования

Мне очень нравится эффект перехода, когда нажата кнопка <>.

Я уже сделал поиск этой директивы на своем веб-сайте, но не нашел ее. Самое близкое, что мне удалось найти, это Toolbar, но он немного отличается тем, что верхние углы не закруглены. Кроме того, использование простого ng-show не будет предусматривать этот переход.

Любые предложения о том, как достичь этого?

источник

2016-01-23 Radu Cojocari

Вы можете сделать это с помощью angular animations, который представляет собой просто простой CSS с переходами. И вы на правильном пути с md-toolbar. Демоверсии используют его, вам просто нужно установить CSS для округления верхних углов.

md-card md-toolbar { 
    border-radius: 3px 3px 0 0; 
}

Теперь добавьте некоторое содержимое ниже md-toolbar, который вы хотите переключить и использовать ng-show на нем.

<div class="toggle-content" ng-show="open"> 
    The toggled content! 
</div>

Тогда просто проверить ngShow документацию о том, как оживить его с помощью CSS. То, что вы хотите оживить, - это высота элемента toogle-content. Когда он скрыт, применяется height: 0, в противном случае height: 200px.

.toggle-content { 
    height: 200px; 
    background: red; 
} 

.toggle-content.ng-hide-add, .toggle-content.ng-hide-remove { 
    transition: height linear 0.5s; 
} 

.toggle-content.ng-hide { 
    height: 0; 
}

И, конечно, вам нужно md-button в панели инструментов, которая переключает содержание.

<md-button ng-click="open = !open"> 
    Toggle 
</md-button>

Полный пример: http://codepen.io/kuhnroyal/pen/XXZPrE

источник

2016-01-24 12:32:52 kuhnroyal

Привет @kuhnroyal, спасибо за пример. Я попытался использовать ваш пример. но когда я не добавляю height: 200px в CSS, переход не анимируется. переключение содержимого просто исчезает без какой-либо анимации. Любые идеи почему? – Ravi

@Ravi Поскольку высота - это свойство, которое анимируется, если вы его удаляете, все это, конечно, не работает. – kuhnroyal

Если высота высоты не соответствует высоте по умолчанию, если высота не указана? Я полагаю, что нет.Но есть ли способ управлять анимацией с пользовательской высотой (пользовательская высота до 0, а затем 0 до настраиваемой высоты при переключении) по сравнению с фиксированной высотой в примере выше? – Ravi

Вам необходимо реализовать что-то вроде метода slideToggle() в jquery. Директива Angular Slideables предоставляет эту функциональность.

Прямые углы - это особый стиль, реализованный в дополнение к директиве md-toolbar.

источник

2016-01-23 21:10:31 gnerkus

Я прыгал на что-то более "вне коробки". Что-то вроде аккордеона, который предлагает ui-bootstrap. –

Получается, что это самое близкое, что мне удалось найти, что соответствует моим потребностям.

'use strict'; 
 
angular.module('ui', ['ui.bootstrap']); 
 

 

 
(function() { 
 
    
 
    angular.module('ui', [ 
 
    "ui.bootstrap", 
 
     "ngAnimate" 
 
     ]); 
 
    
 
    var module = angular.module("ui"); 
 
    module.controller("controller", function($scope) { 
 

 
    var model = this; 
 
    model.oneAtATime = true; 
 

 
    model.Operators = [{ 
 
     ReportItemName: "asd" 
 
    }, { 
 
     ReportItemName: "fds" 
 

 
    }]; 
 
    }); 
 
}());

<!DOCTYPE html> 
 
<html ng-app="ui"> 
 

 
<head> 
 
    <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
 
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-animate.js"></script> 
 
    <script data-require="[email protected]*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
    <script data-require="[email protected]" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script> 
 
    <script data-require="[email protected]" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-controller="controller as model"> 
 
    <uib-accordion close-others="model.oneAtATime"> 
 
     <uib-accordion-group heading="Custom template"> 
 
     <uib-accordion-heading> 
 
      I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
 
     </uib-accordion-heading> 
 
     <h1>Some Content</h1> 
 
     </uib-accordion-group> 
 
    </uib-accordion> 
 
    </div> 
 
</body> 
 

 
</html>

Другие решения, которые обеспечивают вне коробки функциональность очень сильно приветствуется.

источник

2016-01-24 11:18:32

Угловые материалы: Базовый шаблон использования

ответ

Смежные вопросы