Публикации по теме 'angular-material'
Бесконечная прокрутка с использованием углового материала
Здравствуйте, читатели!
В этой статье мы будем реализовывать бесконечную прокрутку в нашем приложении angular. Теперь возникает вопрос, что такое бесконечная прокрутка и каковы преимущества ее использования? Да, к концу статьи вы получите ответ на все эти вопросы. Но позвольте мне сначала показать вам, что мы будем развивать к концу этой статьи.
Что ж, интересно. Не правда ли? Итак, когда вы имеете дело с любым приложением, очевидно, что вы должны иметь дело с тысячами записей..
Почему в моем проекте дублируются стили Angular Material?
В этой статье предполагается, что вы используете SCSS с Angular CLI .
Как выглядят эти повторяющиеся стили?
Вы можете увидеть стиль .mat-toolbar.mat-primary вверху. Тогда вы можете увидеть это внизу еще раз. На этот раз с теми же точными стилями ( background , color ) и значениями, но все они переопределены.
В этом примере есть только 1 повторяющийся набор стилей, но очень легко внезапно увидеть 3 повторяющихся набора или 5 или более! Как вы могли догадаться, это может..
Создайте директиву Angular, отвечающую за адаптивную навигацию по сайту
Сначала мы создадим новый проект с помощью Angular CLI.
ng n responsive-sidenav-directive --minimal=true --S
Примечание:
- минимальный, создает проект без каких-либо фреймворков для тестирования.
- S, не генерирует тестовые файлы «spec.ts»
Затем мы добавим в наш проект материал Angular.
cd responsive-sidenav-directive
ng add @angular/material
Мы начнем с базового примера в нашем AppComponent , бокового меню с кнопкой для его переключения.
Теперь сгенерируем нашу..
Серия Angular 6: часть 5 - Angular 6 с Firebase
Начало работы: Angular 6 с Angular Material и Google Firebase
Серии:
Введение в Angular 6 Создание приложения Angular 6 с помощью angular-cli Понимание структуры папок Использование материала Angular и компоновки Angular Flex с Angular 6 Angular 6 с Firebase (вы здесь)
Ссылаясь на Истории включают AngularFire :
Установите Firebase зависимости
npm install --save angularfire2 firebase
Получите Firebase сведения о конфигурации
Чтобы подключить..
Создание многоразового диалогового модуля с помощью Angular Material
Учебник по Angular
Создание многоразового диалогового модуля с помощью Angular Material
В этом уроке я покажу вам, как вы можете создать многоразовый диалоговый модуль с Angular Material для ваших Angular проектов!
Предпосылки
Angular 7 или новее Angular Material 7 или новее
Создание модуля
Прежде всего, вы должны создать папку, в которой будут храниться все ваши файлы. Я решил создать его здесь: app/shared/confirm-dialog
Окончательная структура модуля будет..
Асинхронная проверка в Angular | Пошаговое руководство с PHP и MySQL
Валидация играет очень важную роль в разработке приложений. Проверка помогает пользователю лучше получить доступ к приложению и использовать его. Большинство платформ пользовательского интерфейса предлагают встроенную проверку . Мы также можем использовать некоторые сторонние плагины для проверки.
Скажем, например, если пользователь хочет подтвердить свой номер мобильного телефона с помощью OTP, он должен ввести номер мобильного телефона в данное поле ввода. Иногда пользователь..
Вопросы по теме 'angular-material'
Макет материала angularjs, Flex и Offset
1) Я пытаюсь растянуть дочерние элементы div до 60% и выровнять их по центру, но это не работает. Я использую flex, чтобы растянуть размер div до 60%. См. пример http://plnkr.co/edit/eaLjJDbjL1KnOI4jLYyO?p=preview .
<div layout="column"...
34588 просмотров
schedule
26.12.2023
FAB Speed Dial и простое выпадающее меню не работают
Я следил за демонстрацией, как указано на сайте угловых материалов. https://material.angularjs.org/latest/#/demo/material.components.menu
Я столкнулся с проблемой, когда простые выпадающие меню и быстрые наборы просто статичны и не...
4878 просмотров
schedule
15.11.2022
Добавить нижний колонтитул со ссылкой в список предложений в автозаполнении материала angular
Я создаю веб-сайт, используя (потрясающе выглядящий) Angular Material . Сейчас я использую компонент автозаполнения и хотел бы добавить фиксированный нижний колонтитул к списку предложений. Нечто подобное вы можете увидеть на изображении ниже,...
2003 просмотров
schedule
30.03.2024
Angular Material md-datepicker выдает ошибку при нажатии
Я новичок, и у меня возникли проблемы с недавно доступным md-datepicker от Angular Material 0.11.0: https://material.angularjs.org/0.11.0/#/demo/material.component.datepicker
Короче говоря, мое приложение позволяет пользователям добавлять...
3378 просмотров
schedule
11.10.2022
Материальная угловая бесконечная прокрутка с запросом $http
Я использую директиву md-virtual-repeat для Angular Material для бесконечной прокрутки, и мне нужно заменить ее демо Функция $timeout с запросом $http. Но я не могу найти правильное решение. В приведенном ниже коде бесконечная прокрутка...
10898 просмотров
schedule
03.11.2022
sidenav не отображается должным образом в дизайне материала angularjs
Это мой код.
<body>
<div ng-controller="MainCtrl as mc">
<md-content>
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools">
<span...
1189 просмотров
schedule
11.03.2024
md-sidenav Угловой материал предотвращает закрытие щелчком снаружи
Мне нужно предотвратить закрытие sidenav, если я нажму за его пределами (если я нажму на фон md). Например, для md-диалога есть директива с именем: clickOutsideToClose, где false означает, что диалог не закрывается, если щелкнуть снаружи. Мне нужно...
5417 просмотров
schedule
25.10.2022
Как мне остановить md-cards от растягивания изображений до полной высоты по вертикали?
Я экспериментирую с Angular Material в своем личном блоге и решил попробовать реализовать карточки на своей главной странице. На моем MacBook все выглядит отлично, но когда я просматриваю страницу на компьютере с Windows, мои изображения...
1502 просмотров
schedule
07.10.2023
Нулевое значение в материале Angular md-datepicker
Можно ли установить нулевое значение для md-datepicker ?
<md-datepicker ng-model="vm.activity.myDate" md-placeholder="myDate" />
в моем контроллере я пытался установить дату на ноль, но он всегда показывает 1/1/1901
if...
3007 просмотров
schedule
27.10.2023
Попытка остановить контейнер ввода углового материала со значком, плавающим внутри диалогового окна, от изменения размера диалогового окна
просто пытаюсь создать простую форму входа с угловым материалом, и пока у меня есть это:
<md-dialog aria-label="Login">
<form name="loginForm">
<md-toolbar layout="row" layout-padding layout-align="center center">...
2793 просмотров
schedule
24.03.2024
Изменение размера текста Angular Material Design
Я использую https://material.angularjs.org/latest/ , чтобы сделать мой сайт отзывчивым. Например, для разных размеров экрана я хочу изменить размер шрифта,
для маленького экрана я хочу, чтобы размер шрифта был 5 пикселей, а для размера больше...
9607 просмотров
schedule
15.04.2024
Как загрузить сервис $mdDialog Angular Material в AngularJS?
Я использую библиотеку материалов Angular и не могу заставить работать $mdDialog. Я не уверен, правильно ли загружаю/внедряю сервис.
Вот код:
var mainApp = angular.module("mainApp", ['ngRoute', 'ngMaterial'])
.config(['$routeProvider',...
2172 просмотров
schedule
24.09.2022
Angular Material получить последнюю версию | md-chips: только чтение, съемный
Для моих приложений мне нужно использовать директиву <chips> из Angular-Material .
Чипы должны быть только для чтения (без ввода), но съемными . Эта функция не реализована в последней выпущенной версии: см....
327 просмотров
schedule
28.09.2022
Невозможно выровнять md-icon по правому краю внутри md-input-container в последней версии Angular Material
Я обновляю приложение с Angular Material 1.0.5 до 1.0.9.
В настоящее время у меня есть несколько контейнеров ввода, содержащих элементы выбора и значка, например
<md-input-container class="md-icon-right" flex>...
1747 просмотров
schedule
15.02.2024
Проблема отображения пользовательского интерфейса Angular Material
В настоящее время я использую угловой материал в проекте веб-разработки. Я также использую маршрутизатор пользовательского интерфейса для переключения между различными состояниями.
Я проверил, что, когда содержимое слишком велико для представления...
442 просмотров
schedule
17.07.2022
Dart Angular 2 и компоненты Material Design
У нас есть Angular 2 для Dart:
https://github.com/angular/material2/blob/master/README.md#the-goal-of-angular-material
Есть ли в Angular 2 для Dart компоненты материального дизайна?
1613 просмотров
schedule
22.10.2023
угловой материал закрыть mdDialog из директивы шаблона
Я пытаюсь закрыть диалог таким образом:
showAlert(ev) {
this.mdDialog.show({
restrict: 'E',
template:'<loader></loader>' +
' <md-button ng-click="this.mdDialog.hide()" class="md-primary">' +
'...
6074 просмотров
schedule
16.08.2022
UI Bootstrap против материала Angular
В настоящее время мое приложение angular (v1) широко использует директивы UI Bootstrap. Я хотел бы перейти на Angular Material, но меня беспокоит его вес (просто минимизированный css весит около 400 КБ, с некоторыми модулями js речь идет о...
3095 просмотров
schedule
18.04.2024
Не удалось выровнять кнопки с угловым материалом
У меня есть простая задача, которая должна иметь:
Две кнопки слева от экрана
И одна кнопка справа от экрана
Я посмотрел на веб-сайте угловых материалов, но все же что-то не так:
<div layout="row" layout-align="start...
1518 просмотров
schedule
20.09.2022
Как обеспечить равные поля с помощью Angular Material? (md-grid-list md-grid-tile md-rowspan)
Вот пример на Codepen .
Я устанавливаю md-row-height="30px" , а затем вычисляю md-rowspan так, чтобы оно равнялось количеству элементов + 1. (плюс один для заголовка)
<md-grid-list md-cols="1" md-cols-gt-md="3" md-cols-gt-sm="2"...
693 просмотров
schedule
22.12.2023
