Компоненты и возможности TPMET Edu Platform

Введение

Добро пожаловать в справочник компонентов платформы кафедры ТП и МЭТ ИГХТУ. Эта страница служит подробным руководством ко всем визуальным элементам, которые вы можете использовать при создании лекций, конспектов и других материалов.

Мы разделили функциональность на несколько крупных категорий:

Базовые компоненты верстки — карточки, блоки определений и теорем, которые используются для структурирования любого контента.
Математические формулы (KaTeX) — мощная библиотека для отображения формул любого уровня сложности, от простых выражений до длинных уравнений с прокруткой.
Подсветка кода (Highlight.js) — инструмент для визуального выделения синтаксиса программных кодов, что значительно улучшает читаемость примеров.
Диаграммы (Mermaid) — способ создания визуальных схем прямо в тексте с помощью простого текстового синтаксиса.
Графики (Chart.js) — инструмент для создания интерактивных графиков и диаграмм различных типов.
Химические формулы (CharChem) — специализированный инструмент для отображения химических структур и реакций.
PDF-документы — способ встраивания учебных материалов для удобного просмотра.

В каждом разделе ниже вы найдёте подробное описание, объясняющее, зачем нужен тот или иной компонент, и практические примеры, показывающие, как его использовать. Мы старались сделать документацию максимально практичной — чтобы вы могли быстро найти нужный компонент и понять, как интегрировать его в свои материалы.

Базовые компоненты верстки

Базовые компоненты — это фундамент любой страницы на платформе. Они обеспечивают единообразную структуру и читаемость, независимо от типа контента. Эти компоненты используют переменные из style.css, что гарантирует консистентность дизайна на всех страницах.

Карточки тем (Lecture Card)

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

Визуально карточка — это блок с лёгкой тенью, скруглёнными углами и границей. При наведении карточка слегка «всплывает», что даёт тактильную обратную связь без излишней анимации. Такой подход соответствует принципу «инженерной аккуратности».

Когда использовать карточки:

Для выделения отдельных тем или разделов в лекциях
Для создания практических заданий и упражнений
Для выделения важных определений или правил
Для организации примеров или демонстрационного материала

Карточка — это универсальный контейнер, который можно использовать для любого типа контента: текста, изображений, формул или кода. Её дизайн ненавязчивый, но заметный, что позволяет выделить важный блок информации без отвлечения внимания.

Простая карточка с текстом

Это пример базовой карточки, которая используется для выделения отдельного блока информации. Внутри карточки можно размещать любой контент: текст, изображения, формулы или код. Карточка имеет лёгкую тень и скруглённые углы, что делает её визуально отличной от основного текста, но не отвлекающей внимание от содержания.

Карточка с заголовком и подробным описанием

Более сложная карточка может содержать несколько заголовков, списки и другие элементы верстки. Это позволяет создавать структурированные материалы, которые легко читаются и воспринимаются. Карточка поддерживает вложенность всех базовых компонентов, что делает её максимально гибкой.

Ключевое преимущество карточек — их визуальная иерархия: заголовок выделен, текст читается хорошо, блок отделён от основного контента. Это классический приём из учебников, который доказал свою эффективность для обучения.

HTML-структура:

<div class="lecture-card">
  <h3 class="lecture-card__title">Заголовок карточки</h3>
  <p class="lecture-card__content">
    Основной текст карточки — любой контент,
    который нужно выделить.
  </p>
</div>

Обратите внимание: внутри карточки используются стандартные заголовки (h1-h6) и параграфы (p), которые наследуют стили из style.css. Это гарантирует, что контент внутри карточки будет выглядеть так же, как и за её пределами.

Блоки определений и теорем

Блоки определений и теорем — это классический приём из академической литературы, который помогает быстро находить важные формулировки. В учебниках и научных статьях такие блоки традиционно выделяются визуально, чтобы студенты могли легко отличить определения и теоремы от основного текста.

В нашей платформе реализованы два типа блоков: definition-box (блок определения) и theorem-box (блок теоремы). Оба имеют одинаковый дизайн с характерной левой полосой цвета, но используют разные классы для семантического различия.

Визуально блок — это блок с приглушённым фоном, левой полосой цвета и скруглёнными углами справа. Левая полоса использует основной цвет кафедры (#003366), что создаёт визуальную связь с брендом. Блок не отвлекает внимание, но хорошо выделяется на фоне основного текста.

Когда использовать блоки определений и теорем:

Для выделения важных определений терминов и понятий
Для формулировки теорем, аксиом и принципов
Для выделения ключевых правил и законов
Для структурирования учебного материала

Использование блоков определений и теорем — это не просто визуальный приём, а методический подход. Студенты быстрее запоминают важные формулировки, когда они визуально отделены от основного текста. Это снижает когнитивную нагрузку и улучшает усвоение материала.

Определение

«Нанотехнология — это область науки и техники, занимающаяся манипуляцией веществом на атомном и молекулярном уровне для создания материалов и устройств с принципиально новыми свойствами».

Теорема

Если функция непрерывна на отрезке, то она ограничена на этом отрезке и достигает на нём своих наибольшего и наименьшего значений.

Полный блок определения

Иногда может понадобиться использовать полный блок без левой полосы. Для этого используется модификатор --full, который переносит выделение на верхнюю границу или убирает её полностью. Это полезно, когда блок находится в контейнере с уже выделенной границей, чтобы избежать дублирования визуальных элементов.

Важно: заголовки внутри блоков определений и теорем используют h4 — это соответствует вложенной иерархии (основной заголовок страницы — h1, разделы — h2, подразделы — h3, блоки — h4).

HTML-структура:

<!-- Блок определения -->
<div class="definition-box">
  <h4 class="definition-box__title">Определение</h4>
  <p class="definition-box__content">
    Текст определения...
  </p>
</div>

<!-- Блок теоремы -->
<div class="theorem-box">
  <h4 class="theorem-box__title">Теорема</h4>
  <p class="theorem-box__content">
    Текст теоремы...
  </p>
</div>

<!-- Полный блок -->
<div class="definition-box definition-box--full">
  <h4 class="definition-box__title">Полный блок</h4>
  <p class="definition-box__content">
    Текст...
  </p>
</div>

Математические формулы с помощи $ \KaTeX $

$ \KaTeX $ — это быстрая библиотека для отображения математических формул в браузере. Мы выбрали KaTeX вместо других решений (например, MathJax) из-за её высокой скорости рендеринга.

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

Строчные формулы

Строчные формулы используются для вставки математических выражений непосредственно в текст. Они не ломают высоту строки и сохраняют читаемость абзаца. Это классический приём из академических текстов, когда формулы встроены в предложения.

Например, при описании плотности тока в физике плазмы мы пишем: $j = \sigma E$ , где $ \sigma $ — проводимость среды, а $ E $ — напряжённость поля. Такой способ вставки сохраняет высоту строки и не ломает верстку.

Пример 1: Простая формула в тексте

В лекциях по физике плазмы часто встречается соотношение для плотности тока: $j = \sigma E$ . Здесь $ \sigma $ — проводимость среды, а $ E $ — напряжённость поля. Такой способ вставки сохраняет высоту строки и не ломает верстку.

Пример 2: Формула в предложении

Плотность потока частиц определяется как $\Gamma = n \langle v \rangle$ , где $ n $ — концентрация, а $ \langle v \rangle $ — средняя скорость частиц. Это fundamental соотношение в кинетической теории газов.

Пример 3: Формула с пояснением

Температура электронов выражается в энергетических единицах: $T_e\,[\text{эВ}] \approx 11\,600 \cdot T_e\,[\text{К}]$ . Это означает, что 1 эВ соответствует примерно 11 600 Кельвинам.

Пример 4: Формула с индексами и дробями

Дебаевская длина определяется как $\lambda_D = \sqrt{\dfrac{\varepsilon_0 k_B T_e}{n_e e^2}}$ , где $ \varepsilon_0 $ — электрическая постоянная, $ k_B $ — постоянная Больцмана, $ T_e $ — температура электронов, $ n_e $ — концентрация электронов, а $ e $ — элементарный заряд.

Блочные формулы

Блочные формулы используются для выделения важных уравнений, которые должны быть центрированы и вынесены отдельно от основного текста. Это классический приём из научной литературы, когда ключевые уравнения выделяются для лучшего восприятия.

Пример 5: Уравнение непрерывности

Уравнение непрерывности для заряда:

\frac{\partial \rho}{\partial t} + \nabla \cdot \mathbf{j} = 0

Это фундаментальное уравнение в электродинамике, выражающее закон сохранения заряда. Оно говорит о том, что изменение плотности заряда во времени связано с расходом тока.

Пример 6: Закон Ома в дифференциальной форме

\mathbf{j} = \sigma \mathbf{E}

Закон Ома в дифференциальной форме связывает плотность тока с напряжённостью поля через проводимость. Это линейное соотношение справедливо для многих материалов в слабых полях.

Длинные формулы с горизонтальной прокруткой

Для очень длинных выражений, которые не помещаются на экран, используется специальная обёртка katex-container--scroll с внутренним блоком katex-scroll-block. Это позволяет прокручивать формулу внутри блока, не ломая верстку всей страницы.

Пример 7: Длинное выражение для среднего значения

Усреднение функции по импульсам:

\langle f(\mathbf{r}, \mathbf{v}, t) \rangle = \int\!\!\!\int\!\!\!\int f(\mathbf{r}, \mathbf{v}, t)\, d^3\mathbf{v} = \int_0^\infty \int_0^\pi \int_0^{2\pi} f(r, v, \theta, \phi, t)\, v^2 \sin\theta\, d\phi\, d\theta\, dv \quad \text{и} \quad n(\mathbf{r}, t) = \int f(\mathbf{r}, \mathbf{v}, t)\, d^3\mathbf{v} = \int_0^\infty 4\pi v^2 f(r, v, t)\, dv

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

Формулы в таблицах

Для справочных данных часто используются таблицы с формулами. В нашей платформе реализована специальная таблица formula-table, которая оптимизирована для отображения формул. Она использует белый фон внутри ячеек, чтобы формулы читались хорошо.

Пример 8: Таблица основных соотношений в плазме

Основные физические величины и их формулы:

Величина	Обозначение	Формула
Дебаевская длина	$\lambda_D$	$\lambda_D = \sqrt{\dfrac{\varepsilon_0 k_B T_e}{n_e e^2}}$
Ларморовский радиус	$$ r_L $$	$r_L = \dfrac{m v_{\perp}}{q B}$
Плазменная частота	$\omega_{pe}$	$\omega_{pe} = \sqrt{\dfrac{n_e e^2}{\varepsilon_0 m_e}}$

Формулы в списках

Для определений и пояснений часто используются списки. В нашей платформе реализован специальный класс definition-list с маркером слева. Формулы можно вставлять прямо в пункты списка.

Пример 9: Ключевые определения

Важные определения в плазменной физике:

Температура электронов: выражается в энергетических единицах: $T_e\,[\text{эВ}] \approx 11\,600 \cdot T_e\,[\text{К}]$ .
Плотность потока частиц: определяется как $\Gamma = n \langle v \rangle$ , где $ n $ — концентрация, $ \langle v \rangle $ — средняя скорость.
Критерий квазинейтральности: $|n_i - n_e| \ll n_0$ , то есть отклонение от нейтральности мало по сравнению с фоновой плотностью.

Подсветка кода (Highlight.js)

Highlight.js — это библиотека для автоматической подсветки синтаксиса программных кодов. Она распознаёт множество языков программирования и применяет цветовую схему, которая делает код легко читаемым.

Мы используем кастомную тему stackoverflow-light, которая хорошо сочетается с общим стилем кафедры. Фон блока кода — светло-серый, шрифт моноширинный, границы мягкие. Это делает код заметным, но не выбивающимся из общего стиля.

function calculatePlasmaDensity(temperature, pressure) {
  const k = 1.380649e-23; // Boltzmann constant
  return (pressure / (k * temperature));
}
// Пример функции расчёта плотности плазмы

class PlasmaSimulation {
  constructor(temperature, density) {
    this.temperature = temperature; // Температура в эВ
    this.density = density;         // Плотность в м^-3
  }

  calculateDebyeLength() {
    const epsilon0 = 8.854e-12;
    const e = 1.602e-19;
    const k = 1.380649e-23;
    
    // T_e в Кельвинах
    const T_e = this.temperature * 11600;
    
    return Math.sqrt(
      (epsilon0 * k * T_e) /
      (this.density * e * e)
    );
  }
}

Обратите внимание: чтобы включить подсветку для конкретного блока кода, добавьте класс language-язык к элементу <code>. Например, language-javascript или language-html.

Как использовать подсветку кода:

<div class="code-block">
  <pre class="code-block__pre">
    <code class="code-block__code">
      ваш код здесь...
    </code>
  </pre>
</div>

Диаграммы (Mermaid)

Mermaid — это библиотека для создания диаграмм с помощью простого текстового синтаксиса. Вам не нужно рисовать диаграммы в графических редакторах — вы просто пишете схему в текстовом виде, и Mermaid автоматически создаёт SVG-изображение.

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

Пример 1: Блок-схема технологического маршрута

Эта блок-схема показывает типовой маршрут изготовления микроприбора: от подготовки подложки до контроля качества. Такие схемы полезны для визуализации производственных процессов в лекциях.

flowchart TD A[Подготовка подложки] --> B[Нанесение диэлектрика] B --> C[Фотолитография] C --> D[Травление] D --> E[Осаждение металла] E --> F[Контроль качества] F --> G{Годен?} G -- Да --> H[Сборка прибора] G -- Нет --> I[Возврат на доработку]

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

Пример 2: Схема отношений между структурами

Такая схема может быть полезна для демонстрации иерархии структур в физике плазмы или материаловедении.

graph LR A[Плазма] --> B[Ионы] A --> C[Электроны] A --> D[Нейтральные атомы] B --> E[Ионные реакции] C --> F[Электронные реакции] D --> G[Рекомбинация] E --> H[Потеря энергии] F --> H G --> H

Пример 3: Последовательность эксперимента

Схема последовательности действий в эксперименте по измерению плазменных параметров.

sequenceDiagram participant Аппарат participant Датчик participant Компьютер participant Исследователь Аппарат->>Датчик: Включение Датчик->>Компьютер: Передача данных Компьютер->>Исследователь: Отображение графика Аппарат->>Аппарат: Измерение параметров loop Каждые 100мс Аппарат->>Датчик: Запрос данных Датчик->>Компьютер: Ответ Компьютер->>Исследователь: Обновление графика end

Как использовать Mermaid:

<div class="mermaid-container">
  <div class="mermaid-container__content">
    <div class="mermaid" style="text-align: center;">
      flowchart TD
      A[Начало] --> B[Процесс]
      B --> C[Конец]
    </div>
  </div>
</div>

Графики (Chart.js)

Chart.js — это библиотека для создания интерактивных графиков и диаграмм. Она поддерживает множество типов диаграмм: линейные, столбчатые, круговые, радиальные и другие. В нашей платформе мы используем её для визуализации зависимостей и распределений в лекциях по физике и инженерии.

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

Пример 1: Линейный график зависимости

Линейные графики используются для отображения изменений величины во времени или при изменении параметра. В данном примере показана зависимость плотности плазмы от температуры — типичная задача в физике плазмы.

Обратите внимание: график автоматически адаптируется под ширину контейнера, и масштаб осей подбирается автоматически.

Пример 2: Столбчатая диаграмма

Столбчатые диаграммы используются для сравнения величин по категориям. В данном примере показано сравнение плотности плазмы для разных температур.

Пример 3: Круговая диаграмма

Круговые диаграммы используются для отображения долей в целом. В данном примере показано распределение частиц в плазме.

Как использовать Chart.js:

<div class="chart-wrapper">
  <canvas id="my-chart"></canvas>
</div>

Химические формулы (CharChem)

CharChem — это специализированная библиотека для отображения химических формул и структур. Она позволяет легко вставлять простые формулы в текст, центрировать структурные формулы и выделять важные уравнения в рамке.

В нашей платформе реализованы три режима отображения химических формул:

Строчная формула (inline) — для вставки в текст (например, H2O или CH4 + 2O2 -> CO2 + 2H2O)
Центрированная формула (centered) — для структурных формул как иллюстраций (например, органические структуры)
Формула в рамке (framed) — для важных уравнений

Пример 1: Строчные формулы

Простые химические формулы можно вставлять прямо в текст с помощью классов chem-formula-container и echem-formula. Формулы имеют лёгкий фон, чтобы выделиться из текста.

Даже базовая формула воды выглядит аккуратно в потоке текста: H2O . Реакция горения метана также легко встраивается: CH4 + 2O2 -> CO2 + 2H2O .

Строчные формулы используются, когда формула — это часть предложения, а не отдельный элемент. Они сохраняют межстрочный интервал и не ломают верстку.

Пример 2: Центрированные структурные формулы

Сложные органические структуры лучше смотрятся по центру, как отдельные иллюстрации. Для этого используется обертка chem-formula-anchor--centered и класс echem-formula--centered.

Органическая структура этанола:

H3C/\<|CH3>/OH

Формула со структурой:

`/O`\<`/~HO>`|<`\wHO>/<`|wOH>\|\wCH3

Центрирование достигается за счёт Flexbox-обертки, которая гарантирует, что формула будет по центру, независимо от её ширины.

Пример 3: Важные уравнения в рамке

Для особо важных реакций используется рамка — это выделяет их так же, как блок с теоремой или определением. Для этого используется обертка chem-formula-anchor--framed.

Качественная реакция на железо II:

3K3[Fe(CN)6] + 3Fe^2+ -> 3KFe(ii)[Fe(iii)(CN)6]"|v" + 6K^+

Рамка добавляет отступы, фон и тень, что делает важное уравнение визуально отдельным элементом.

Как использовать CharChem:

<!-- Строчная формула -->
<span class="chem-formula-container">
  <span class="echem-formula">H2O</span>
</span>

<!-- Центрированная формула -->
<div class="chem-formula-anchor chem-formula-anchor--centered">
   <span class="echem-formula echem-formula--centered">
      H3C/\<|CH3>/OH
   </span>
</div>

<!-- Формула в рамке -->
<div class="chem-formula-anchor chem-formula-anchor--framed">
  <span class="echem-formula">3K3[Fe(CN)6] + 3Fe^2+ -> ...</span>
</div>

PDF-документы

PDF-документы встраиваются на страницу через iframe с адаптивным соотношением сторон. Мы используем формат 3:4 (вертикальный), чтобы удобнее читать лекции и конспекты.

Важно: PDF-вьюер поддерживает ленивую загрузку (loading="lazy"), что критично при ограниченном интернете. Файл загружается только тогда, когда пользователь доскроллит до блока с PDF.

Скачать PDF На весь экран

Примечание: loading="lazy" предотвращает загрузку iframe, пока пользователь не доскроллит до блока — это критично при ограниченном интернете.

Модальные окна

Стилизованные модальные окна с плавными анимациями, оверлеем и кнопкой закрытия. Поддерживаются три размера: стандартный, большой и маленький.

Модальное окно — контент поверх основной страницы с затемнением фона
Оверлей — затемнение фона с прозрачностью 0.6
Кнопка закрытия — крестик в заголовке с анимацией при наведении
Плавные анимации — появление с небольшим отступом сверху

Пример 1: Стандартное модальное окно

Стандартное модальное окно с заголовком, телом и кнопкой закрытия. Используется для отображения краткой информации, предупреждений или подтверждений действий.

<!-- Кнопка для открытия -->
<button class="btn" onclick="openModal('modal-example-1')">
  Открыть окно
</button>

<!-- Модальное окно -->
<div class="modal-overlay" id="modal-example-1">
  <div class="modal-container">
    <div class="modal-header">
      <h2 class="modal-title">Заголовок окна</h2>
      <button class="modal-close-btn" onclick="closeModal('modal-example-1')">
        <svg viewBox="0 0 24 24">
          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
        </svg>
      </button>
    </div>
    <div class="modal-body">
      <p>Контент модального окна...</p>
    </div>
  </div>
</div>

Пример 3: Модальное окно с кнопками действий

Для модальных окон с действиями (подтверждение, отмена) используется класс modal-footer с выравниванием кнопок вправо.

<div class="modal-overlay" id="modal-confirm">
  <div class="modal-container modal-container--small">
    <div class="modal-header">
      <h2 class="modal-title">Подтверждение действия</h2>
      <button class="modal-close-btn" onclick="closeModal('modal-confirm')">✕</button>
    </div>
    <div class="modal-body">
      <p>Вы уверены, что хотите выполнить это действие?</p>
      <p>Это действие нельзя будет отменить.</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn--outline" onclick="closeModal('modal-confirm')">Отмена</button>
      <button class="btn" onclick="confirmAction()">Подтвердить</button>
    </div>
  </div>
</div>

Как использовать модальные окна:

function openModal(modalId) {
  var overlay = document.querySelector('.modal-overlay');
  overlay.classList.add('active');
}

function closeModal(modalId) {
  var overlay = document.querySelector('.modal-overlay');
  overlay.classList.remove('active');
}

// Закрытие по клику на оверлей
var overlay = document.querySelector('.modal-overlay');
overlay.addEventListener('click', function() {
  this.classList.remove('active');
});

Заключение

Надеемся, этот справочник помог вам понять, какие компоненты доступны на платформе кафедры ТП и МЭТ ИГХТУ, и как их использовать. Все компоненты разработаны с учётом:

Академического стиля — дизайн вдохновлён лучшими образцами технической литературы и университетских сайтов.
Читаемости — никаких мелких шрифтов, слишком тонких линий или сложных градиентов.
Структурированности — каждый блок имеет чёткое назначение и визуальное отличие.
Адаптивности — сайт одинаково хорошо работает на ноутбуке, планшете и смартфоне.
Экономии трафика — минимум тяжёлых эффектов, локальные шрифты, кэшируемые CSS-файлы.
Доступности — контраст между текстом и фоном соответствует стандартам WCAG 2.1, навигация доступна с клавиатуры.

Этот стиль легко поддерживать и расширять: при добавлении новых разделов или тем не придётся заново подбирать цвета и шрифты — достаточно использовать уже определённые переменные из style.css.

Если у вас есть вопросы или предложения по улучшению компонентов, обращайтесь к документации или свяжитесь с разработчиками.

Компоненты и возможности платформы

Введение

Базовые компоненты верстки

Карточки тем (Lecture Card)

Когда использовать карточки:

Простая карточка с текстом

Карточка с заголовком и подробным описанием

HTML-структура:

Блоки определений и теорем

Когда использовать блоки определений и теорем:

Определение

Теорема

Полный блок определения

HTML-структура:

Математические формулы с помощи $ \KaTeX $

Строчные формулы

Пример 1: Простая формула в тексте

Пример 2: Формула в предложении

Пример 3: Формула с пояснением

Пример 4: Формула с индексами и дробями

Блочные формулы

Пример 5: Уравнение непрерывности

Пример 6: Закон Ома в дифференциальной форме

Длинные формулы с горизонтальной прокруткой

Пример 7: Длинное выражение для среднего значения

Формулы в таблицах

Пример 8: Таблица основных соотношений в плазме

Формулы в списках

Пример 9: Ключевые определения

Подсветка кода (Highlight.js)

Как использовать подсветку кода:

Диаграммы (Mermaid)

Пример 1: Блок-схема технологического маршрута

Пример 2: Схема отношений между структурами

Пример 3: Последовательность эксперимента

Как использовать Mermaid:

Графики (Chart.js)

Пример 1: Линейный график зависимости

Пример 2: Столбчатая диаграмма

Пример 3: Круговая диаграмма

Как использовать Chart.js:

Химические формулы (CharChem)

Пример 1: Строчные формулы

Пример 2: Центрированные структурные формулы

Пример 3: Важные уравнения в рамке

Как использовать CharChem:

PDF-документы

Модальные окна

Пример 1: Стандартное модальное окно

Пример 2: Модальное окно с прокруткой

Пример 3: Модальное окно с кнопками действий

Пример 4: Модальное окно с формой

Как использовать модальные окна:

Заключение

Стандартное модальное окно

Модальное окно с длинным контентом

Подтверждение действия

Контактная форма