Если вы знаете и любите angular, часто используйте angular 2 и просто решили использовать их материальные компоненты, продолжайте читать. Если вы теперь также осознали, что они несколько тонко разбросаны, в них отсутствуют некоторые ключевые элементы, такие как хорошая таблица, определенно продолжайте читать. Это для вас!
Проверка альтернатив
Хорошо, материал очень похож на Google. Это хорошо, они устанавливают общее использование и ощущения, клиенты будут чувствовать себя в вашем приложении как дома. Но теперь возникает вопрос: Angular ✔ а какой UI поверх? Bootstrap, PrimeNG, Материал,…? Ну, я выбрал Материал, но потом быстро оказался в затруднительном положении. А как насчет красивого стола? Нет, не готов. А как насчет крутых графиков и разноцветных пончиков? Неа. Хорошо, снова ищу альтернативы. Нашла Ковалент, она мне понравилась. Он не идеален, он молодой, но он включает в себя структуру Angular Material и не пытается заново изобрести то, что уже есть. Они создают те вещи, которые вы иначе построили бы из угловатого материала.
Они также предлагают некоторые интересные дополнительные функции, такие как http-оболочка, которая помогает вам создавать перехватчики для ваших http-вызовов. Я чувствую себя довольно глупо, создав сервис, который перехватывает вызовы http xhr для перехвата событий, зная, что кто-то уже это построил. Но не будем дальше отвлекаться, давайте заглянем в таблицу данных!
Построить стол
Я получил некоторые данные. Я хочу их показать. Поскольку легко может быть несколько сотен элементов, я хочу, чтобы их можно было сортировать и искать. Имеет смысл. Может быть, даже пейджинг, но это позже. А пока давайте воспользуемся этими сетями 4G и просто извлечем все данные.
Данные частично вложены, но ковалентные данные могут с этим справиться. Вы просто даете ему массив конфигураций, которые описывают ваши данные и где найти значения, которые он должен поместить в столбцы, а затем он вычисляет остальное.
columns: ITdDataTableColumn[] = [ {name: 'offer.date', label: 'Date', tooltip: 'date ordered'}, {name: 'offer.description', label: 'Description'}, {name: 'amount', label: 'Price'}, {name: 'offer.vegetarian', label: 'Vegetarian'}, {name: 'paid', label: 'Paid'} ];
Это конфиг. Я не буду публиковать всю свою модель, но в любом случае это очевидно из моей конфигурации. Это выглядит примерно так
[{ paid: false, //some more Props offer: { description: "foo", date: "2015-05-05", //... }, }, ... ]
Простая таблица без поиска и сортировки теперь выглядит так
Довольно просто. Я передаю ему данные и структуру данных, используя columns
. Затем я могу предоставить ему шаблоны для данных, которые я хочу отформатировать определенным образом. Добавьте евро после цены, чтобы дата отображалась правильно. В этом роде.
Подведение итогов
Я не стал объяснять весь API таблиц данных, у них есть документация для этого. Но вы поняли. И выглядит неплохо! На всех размерах экрана. Когда вы уменьшаете размер, он не превращается в список, но я этого не хочу. Это стол, он должен оставаться столом, даже если экран маленький. И это нормально, потому что на маленьких экранах можно прокручивать слева направо.
Я продолжу изучать проект, но он выглядит многообещающим. Он не так спроектирован, как угловой материал или материал-компоненты-паутина, но они более высокого уровня и готовы сегодня. Поэтому я начинаю создавать свое приложение с их помощью, заменяя элементы в будущем, когда официальные репозитории внедрили свои версии инструментов.
Оборотная сторона: я не думаю, что эти инструменты так же идеально протестированы или ориентированы на программы чтения с экрана и не соответствуют тем же стандартам доступности, что и материалы angular. Но это цена, которую вы платите за более быстрое развитие библиотеки.
В целом это выглядит многообещающе. Поместите это на GitHub и держите в своем наборе инструментов!