Демо

Открыть демо NSMP Vue Components

Демо — это не просто витрина отдельных элементов, а полноценный пример интерфейса приложения. В нём можно посмотреть, как наши встроенные компоненты выглядят и работают вместе, а также сравнить их с нативными компонентами Ant Design Vue в одинаковых сценариях.

Формы

На вкладке «Форма встроенных компонентов» собран полный пример формы на компонентах NSMP Vue Components. Здесь особенно хорошо видно, как единый набор компонентов помогает получить красивый, цельный и готовый к использованию интерфейс без ручной сборки оформления для каждого поля.

Рядом находится вкладка «Форма компонентов Ant Design». Эта форма построена напрямую на нативных компонентах Ant Design Vue и не использует наши кастомные компоненты или вспомогательные методы. Благодаря этому вкладки можно переключать и сравнивать результат вживую.

Таблицы

В демо есть два варианта одной и той же таблицы:

• «Встроенная таблица» использует компонент Table из NSMP Vue Components. Помимо аккуратного внешнего вида, она предоставляет готовую настройку отображаемых столбцов, изменение их порядка, сортировку, выбор строк, пагинацию и сохранение пользовательского представления.
• «Таблица Ant Design» построена непосредственно на нативном компоненте Ant Design Vue, без наших обёрток и кастомных методов. В этом сравнительном примере у неё нет интерфейса настройки столбцов — и добавлять его на эту вкладку мы не планируем: она специально остаётся наглядным примером базового нативного решения.

Обязательно попробуйте встроенную таблицу самостоятельно: именно в интерактивном демо лучше всего заметно, насколько удобнее готовое управление столбцами и насколько цельно таблица выглядит в интерфейсе NSMP.

Темы

На вкладке «Настройки» можно выбрать одну из доступных тем и сразу увидеть, как меняется оформление всех компонентов демо. Это быстрый способ проверить будущий интерфейс в разных темах без изменения кода.

Нативные компоненты Ant Design Vue тоже получают выбранную тему, поэтому сравнение остаётся честным. При этом адаптация наших встроенных компонентов заметно полнее и аккуратнее: стандартные компоненты Ant Design стилизуются, но выглядят менее цельно и хуже соответствуют интерфейсу NSMP.

TIP

Переключайте парные вкладки после выбора темы: так проще всего сравнить встроенные и нативные компоненты на одних и тех же данных.

Настройка показанных возможностей описана на страницах Form, Table и «Темизация».