Как создать Аккордеонный Список с Ionic 4?

Question

Спросите меня, как создать «Аккордеонный список».

Мне это нужно для нескольких разделов с примером «О нас» «Услуги», которые в момент нажатия я буду отображать информацию.

Я надеюсь, что вы можете мне помочь. находится в ионном 4

Answer 1

Это не включенный компонент в Ionic 4, но его не сложно решить.

Вы можете использовать Панель расширения Angular Material , если вы хотите использовать готовый компонент.

Если вам просто нужен быстрый обзор, это будет примерно так:

1. Создание компонента
2. Установка стандартной высоты для расширения панелей (раздражает, ноэто ограничение самого CSS, поэтому вы должны это сделать)
3. Используйте css для обработки скрытия или расширения + анимация
4. Используйте фрагмент кода для переключения расширенного состояния
5. В зависимости от типа аккордеона (допускается одно открытие или несколько открытых одновременно), вы также можете написать другой фрагмент кода, чтобы свернуть все остальные панели при открытии новой.

БонусРекомендации по поддержке глубоких ссылок:

1. Обновите #fragment в URL при открытии каждой панели
2. Проверьте соответствие #fragment при загрузке страницы и разверните его

У Джоша есть учебное пособие - Создание списка аккордеонов в Ionic .

Существует также подробное руководство по Мастеринг Ionic .