CDN и распространение ​

pantoken публикует каждый пакет в npm, так что можно подтягивать токены, компоненты и веб-компоненты прямо с CDN — без шага сборки, без бандлера. Эта страница описывает URL объединения CSS (с интерактивным конструктором), а также варианты вставки веб-компонентов.

Основа токенов ​

Каждый компонент pantoken читает --instui-* пользовательских свойств из таблицы токенов на странице. Поставляются две варианта:

  • @pantoken/css/dist/style.lean.css — рекомендуемая CDN-основа. Она содержит все токены, кроме полного набора иконок, поэтому занимает около 23 КБ в gzip.
  • @pantoken/css/dist/style.css — полный лист, включая все ~1,777 глифов иконок (--instui-icon-*). Около 140 КБ в gzip. Загружайте его, если вы широко ссылаетесь на иконки через var(--instui-icon-*).

Шкала высот (elevation) и переменные кольца фокуса присутствуют в обеих таблицах, поэтому тени и кольцо фокуса работают при загруженной только основе.

Выбор компонентов и иконок ​

Интерактивный CDN-пикер собирает jsDelivr combine URL для CSS и фрагменты для JavaScript-пакетов. Откройте его, отметьте нужное и скопируйте сгенерированный вывод.

  • Вкладка Components — выберите отдельные таблицы стилей компонентов или весь бандл components.css. Добавьте базовый reset или утилиты spacing/color, если они нужны.
  • Вкладка JS — скопируйте фрагмент ESM-импорта для @pantoken/interactions.
  • Вкладка Icons — выберите отдельные иконки из набора InstUI (~1,800 иконок) или из Simple Icons (~3,300 брендовых глифов). Пикер выдаёт отдельный combine URL для CSS файлов иконок, чтобы можно было загружать только те иконки, которые вы действительно используете.
  • Вкладка Web Components — собирает фрагменты @pantoken/web-components (ESM селективная регистрация или классический скрипт-бутстрап).

Каждый файл компонента небольшой — большинство около 2 КБ. Компонент, который рендерит иконки (alert, checkbox, и несколько других), требует эти глифы, поэтому конструктор добавляет @pantoken/components/dist/component-icons.css (примерно 0.5 КБ в gzip — 11 иконок, используемых набором компонентов) всякий раз, когда вы выбираете облегчённый лист. В полном листе они уже включены.

Порядок загрузки и шрифты ​

Сначала загрузите основу токенов, затем опциональный base reset, затем файлы компонентов, и в конце — утилиты: это утилиты переопределения, поэтому они реально переопределяют правило компонента только когда оказываются после него в каскаде. Комбинированный URL выше уже упорядочивает их за вас. Шрифты — единственное исключение: @pantoken/components/dist/fonts.css ссылается на файлы шрифтов по относительному пути, так что combine не может их переписать — загрузите его как отдельный <link>:

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pantoken/components/dist/fonts.css" />

Всё сразу ​

Отметьте All components в пикере, чтобы переключить его на бандл, или укажите его напрямую (примерно 141 КБ в gzip) вместе с таблицей токенов:

html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/combine/npm/@pantoken/css/dist/style.css,npm/@pantoken/components/dist/components.css"
/>

Веб-компоненты ​

@pantoken/web-components регистрирует фреймворк-агностичные кастом-элементы <instui-*>. Они инлайнит свою CSS, но по-прежнему читают токены из таблицы на странице, поэтому загрузите и основу токенов тоже.

ES модули (рекомендуется) ​

ESM CDN разрешает зависимости пакета за вас. Это регистрирует каждый элемент:

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pantoken/css/dist/style.css" />
<script type="module">
  import "https://esm.sh/@pantoken/web-components";
</script>

Используйте полный лист токенов (или облегчённый лист плюс component-icons.css), чтобы элементы, рендерящие иконки, такие как <instui-alert>, могли разрешить свои глифы.

Чтобы зарегистрировать лишь некоторые элементы — и их вложенные зависимости — импортируйте register и передайте only:

html
<script type="module">
  import { register } from "https://esm.sh/@pantoken/web-components";
  // Pulls in date-input and calendar automatically.
  register(customElements, { only: ["date-time-input"] });
</script>

Классический тег script ​

Для вставки без модулей загрузите IIFE-сборку. Она бандлит зависимости и авто-регистрирует каждый элемент при загрузке, экспортируя глобальную переменную PantokenWebComponents:

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pantoken/css/dist/style.css" />
<script src="https://cdn.jsdelivr.net/npm/@pantoken/web-components/dist/web-components.iife.js"></script>

Она больше, чем путь ESM — она инлайнит @pantoken/components и @pantoken/icons — поэтому используйте её только если модули недоступны.

Зафиксировать версии ​

Указанные выше URL — и те, которые пишет пикер — следят за последним релизом. Зафиксируйте мажорную (или точную) версию для продакшена — например @pantoken/css@0 — чтобы обновление не стало для вас неожиданностью.