GrCollapse

Примеры 4 у каждого — живое демо и его код

• Вопросы о счетах, открытых несколько

  Модель — массив имён, поэтому сравниваемые ответы остаются открытыми вместе. Заголовок страницы — h2, а heading-level делает вопросы h3: скринридер обходит их по структуре, а триггер остаётся кнопкой внутри заголовка, как требует шаблон APG.

  Billing questions

  What happens when I add seats mid-month?

  You pay for the new seats only for the days left in the billing period. The amount appears as a separate line on the next invoice, called «Proration».

  Why is VAT added to my invoice?

  We charge VAT when the company has no valid EU VAT number on file. Add the number in Settings → Billing, and the next invoice will be issued with reverse charge.

  Which cards and payment methods do you accept?

  Visa, Mastercard and American Express, SEPA Direct Debit for euro accounts, and bank transfer on the yearly plan.

  Can I get a refund after cancelling?

  Monthly plans are not refunded for the current month. Yearly plans are refunded pro rata within the first 30 days.

  Код и пропы

• Заказ по одной секции

  accordion держит в модели одно имя, поэтому открытие «Оплаты» сворачивает «Товары», и итог остаётся на виду. borderless убирает вторую рамку внутри карточки, divided рисует разделители, а слот extra ставит бейдж рядом с триггером, а не внутри.

  Order #4815€312.40

  Items

  3

  • Halden desk, oak€249.00
  • Desk lamp, black€39.90
  • Cable tray, 80 cm€23.50

  Shipping

  Tomorrow

  12 Harbour Street, 20457 Hamburg · DHL, before 12:00

  Payment

  Paid

  Visa ending 4242 · 6 Oct, 09:14
  Код и пропы

• Панель фильтров, которая считает включённое

  Каждая группа показывает в extra, сколько её фильтров включено, поэтому свёрнутая секция всё равно говорит правду. expand-icon-position="start" ставит шеврон туда, где начинается список, а disabled-секция объясняет себя заголовком.

  Код и пропы

• Секция, которая не свернётся с несохранённым

  before-change получает секцию и направление. Измените название компании и попробуйте свернуть секцию — guard откажет и скажет почему. Откройте «Историю счетов» в первый раз — guard дождётся данных, прежде чем секция раскроется, а повторный клик тем временем игнорируется.

  Company details

  SaveDiscard

  Invoice history

  Close the workspace

  Exports all invoices, then deletes the workspace after 30 days.
  Код и пропы

API порождается из пакета · разойтись не может

import type { GrCollapseProps, GrCollapseEmits, GrCollapseItemProps } from '@feugene/granularity/components/GrCollapse'

interface GrCollapseProps {
    /** Открытые секции (`v-model`): в `accordion` — одно значение или `undefined`, иначе массив. */
    modelValue?: GrCollapseModelValue;
    /** Одновременно открыта только одна секция: открытие новой закрывает прежнюю. */
    accordion?: boolean;
    /** Блокирует все секции: заголовки не переключаются. */
    disabled?: boolean;
    /** Разделители между секциями. По умолчанию `true`; глобально — `componentDefaults`. */
    divided?: boolean;
    /**
     * Без обёртки в `GrCard`: аккордеон внутри карточки или сайдбара иначе получает вторую рамку и
     * вторую тень. По умолчанию `false`.
     */
    borderless?: boolean;
    /** Уровень заголовков секций (`h2`…`h6`) — под структуру страницы. */
    headingLevel?: GrCollapseHeadingLevel;
    /** Сторона шеврона относительно заголовка. */
    expandIconPosition?: GrCollapseIconPosition;
    /**
     * Async-guard переключения: получает секцию и направление, `false` отменяет. Пока он не
     * ответил, повторный клик по той же секции игнорируется.
     */
    beforeChange?: GrCollapseBeforeChange;
    /** Размер секций. Не задан — берётся из `GrConfigProvider`, иначе `md`. */
    size?: GrComponentSize;
    /**
     * Пусто ли. Не задан — считается по содержимому: аккордеон без секций
     * показывает заглушку вместо пустой рамки. `false` подавляет автоопределение —
     * например, когда секции приезжают асинхронно и мигать текстом не надо.
     */
    empty?: boolean;
    /** Текст пустого состояния. Слот `#empty` сильнее. */
    emptyText?: string;
}

interface GrCollapseEmits {
    /** Новые открытые секции (`v-model`): значение или `undefined` в `accordion`, иначе массив. */
    (e: 'update:modelValue', value: GrCollapseModelValue): void;
    /** Пользователь открыл или закрыл секцию — уже после `beforeChange`. */
    (e: 'change', value: GrCollapseModelValue): void;
}

interface GrCollapseItemProps {
    name?: GrCollapseValue;
    title?: string;
    disabled?: boolean;
}

const grCollapseConfig: import("@feugene/granum/contract").GranumComponentDescriptor<"GrCollapse">;

interface GrCollapseConfigurableProps {
    size: GrComponentSize;
    divided: boolean;
    borderless: boolean;
    expandIconPosition: GrCollapseIconPosition;
    headingLevel: GrCollapseHeadingLevel;
}

const grCollapseSafelist: string[];

Доступность

Полный контракт пакета: docs/keyboard.md ↗

Связанные четвёртый вопрос: когда не это

• GrTabsНавигация

  Разделы переключаются, а не раскрываются

• GrFormSectionФормы

  Разделы формы идут подряд

• GrTreeДанные

  Данные вложены

• GrDialogСлои

  Содержимое открывается поверх страницы

• GrDrawerСлои

  Содержимое открывается поверх страницы

• GrCarouselДанныессылается сюда

  Берут, когда галерея товара или объекта.

• GrTabPanelsНавигацияссылается сюда

  Берут, когда к вкладкам нужны панели.

• GrTabsWithPanelsНавигацияссылается сюда

  Берут, когда нужны и вкладки, и панели.