Компоненты UIkit 3

  • Красивый адаптивный аккордеон для сайта с анимацией при развертывании. Каждый элемент, при нажатии/клике на заголовок элемента, может быть «развёрнут» или «раскрыт».
  • Компонент «Алерт» - взаимодействие с пользователем. Уведомления на странице. Отображение успешного или положительного сообщения. Как установить уведомление в состояние предупреждения и как отобразить сообщение об ошибке. Как сделать кнопку закрытия...
  • Компонент «Выравнивание» позволит управлять выравниванием встроенных элементов в зависимости от размера области просмотра. Адаптивность при выравнивании элементов.
  • Создание анимации для сайта. Коллекция потрясающих плавных анимаций для использования на вашей веб-странице.
  • Создавайте интересные и невероятные статьи на страницах сайта. Компонент статьи состоит из самой статьи, заголовка и метаданных.
  • Удивительная коллекция дополнительных классов для добавления различных фонов к элементам. Возможность применить различные режимы наложения к фоновому изображению, установить фиксированное состояние, изменить позицию...
  • Создавайте красивые уведомительные значки и выводите информацию в навигации или вкладках/табах с количеством доступных единиц. «Значок» можно использовать в качестве счётчика.
  • Компонент «База» предоставляет стили по умолчанию для всех элементов HTML.
  • Создавайте "хлебные крошки" (дублирующее меню), чтобы показать пользователям их местоположение на веб-сайте от некоего начального элемента до того уровня иерархии, который в данный момент просматривает пользователь.
  • Создавайте красивые кнопки, которые могут быть разных стилей и размеров. Компонент «Кнопка» позволяет создать из кнопки выпадающий список, добавить в проект кнопки различной ширины.
  • С компонентом «Карточка» возможно создавать потрясающие макеты разных стилей. Создание карточки. Модификаторы. Разметка. Примеры.
  • Добавляем кнопку закрытия, которую можно комбинировать с различными компонентами UIkit 3.
  • Универсальный вариант для отображения вашего контента в нескольких текстовых колонках, не разбивая его на несколько контейнеров. Текст в несколько колонок / Многоколоночный текст. Адаптивное поведение.
  • Создавайте и стилизуйте блоки с комментариями на сайте. Компонент включает в себя стили для комментариев, например, для раздела блога на вашем сайте.
  • Компонент «Контейнер» позволяет выровнять и центрировать содержимое страницы. Обычно в контейнер обернут основной контент сайта. Модификаторы «Размер».
  • Как создать таймер с UIkit 3. Создание таймера обратного отсчета Countdown.
  • Компонент «Cover» / «Обложка». Охватив весь контейнер, разверните изображения, видео или фреймы, и разместите сверху свой собственный контент. Как растянуть блок на всю высоту экрана.
  • Создавайте списки определений (описаний). Список определений состоит из термина и его описания.
  • Создавайте разделители для разделения контента, горизонтальный или вертикальный. Компонент «Разделитель» позволяет добавлять различные стили.
  • Создание точечной навигации (навигация точками) для работы со слайд-шоу или для прокрутки к различным разделам страницы.
  • Расположите любой элемент в связке с другим, изначально невидимым; отображение в виде выпадения можно настроить как при наведении на вызываемый элемент, так и при клике на него. Как создать «Выпадение».
  • Создание выпадающего списка меню навигации. Размещение сетки Grid и любого контента в выпадающем списке. Различные позиции; использование анимации при раскрытии Dropdown.
  • Компонент Фильтр. Фильтруйте или сортируйте элементы используя метаданные. Любой элемент может быть отфильтрован или отсортирован. Применение. Разметка. Примеры
  • Используйте огромные возможности flexbox при создании потрясающих адаптивных макетов. Как создать разметку и использовать компонент Flex.
  • Создание формы. Модификаторы. Создание сложенной (вертикальной) формы или стильной горизонтальной. Использование кнопки, текста или ссылки в качестве формы выбора. Как вставить иконку в input и сделать её кликабельной.
  • Создайте полностью отзывчивый, плавающий, резиновый макет модульной сетки. Модификаторы. Grid Masonry. Параллакс. Примеры. Использование.
  • Устанавливайте различные стили для заголовков. Модификаторы. Заголовок с разделителем. Вертикально центрированная линия в текстовом заголовке.
  • Компонент «Высота» предлагает три варианта установки высоты: использование вспомогательных классов с фиксированной высотой, в зависимости от области просмотра, путем соответствия высоты различных элементов.
  • Векторные иконки в любом месте вашего контента. Масштабирование какого-либо изображения до размера иконки.
  • Создание навигации, состоящей из иконок. Вертикальная иконочная навигация.
  • Компонент «Изображение» и Lazy loading. Ускоряем время загрузки страницы загружая изображения только когда они входят в область просмотра. Использование атрибута srcset для свойства CSS background-image.
  • Инвертируйте стиль любого компонента, чтобы улучшить видимость объектов на светлом или темном фоне.
  • Добавьте в контент привлекающую подсказку. Метки. Используйте ярлыки для отображения примечаний.
  • Создание оглавления с отточиями. Создавайте оформление, которое выглядит как оглавление в книге. Компонент «Отточие». Точки между словами css; dot leaders css; точки в таблице css; строки с точками до конца строки.
  • Создайте эффектную галерею с использованием красивой анимации. Компонент Lightbox для изображений и видео с широкими возможностями.
  • Устанавливайте различные стили для ссылок.
  • Создавайте красивые списки используя разные стили.
  • Компонент «Margin» позволит задать величину отступа для всех сторон элемента или определить ее только для указанных сторон. Автоматическое добавление внешних отступов.
  • Создайте значок «Маркер», который может отображаться поверх изображений. Вы можете совместить иконку - маркер, всплывающую подсказку и добавить к ним модальное окно.
  • Создавайте модальные диалоговые окна с разными стилями и переходами.
  • Навигация списком с выпадающими подпунктами, различные стили. Создание навигации в стиле многоуровнего меню «Аккордеон». Разделитель между пунктами меню и выезжающая панель Off-canvas.
  • Панель навигации, которую можно использовать в качестве основной навигационной панели по всему сайту. Обширные возможности Navbar.
  • Создавайте переключаемые уведомления; Разметка HTML внутри уведомления / сообщения; Задать уведомлению необходимую позицию и стиль. Автоматически исчезаемые уведомления.
  • Создайте боковую панель Off-canvas. Off-canvas прекрасно подходит для мобильных навигационных меню.
  • Эффект наложения. Руководство по использованию. Модификаторы стиля.
  • Компонент Padding устанавливает внутренние отступы/поля со всех сторон элемента. Добавление и удаление внутренних отступов.
  • Нумерация страниц. Создание пагинации, постраничной навигации по страницам веб-сайта.
  • Компонент «Параллакс». Анимируйте свойства CSS в зависимости от положения прокрутки документа.
  • Создайте область заполнителя, которую можно использовать для загрузки файлов с помощью перетаскивания (drag and drop).
  • Коллекция вспомогательных классов для позиционирования контента.
  • Компонент «Печать». Оптимизируйте свои страницы для удобочитаемой и экономичной печати.
  • Индикатор выполнения, который показывает, как далеко движется процесс.
  • Режим плавной прокрутки на страницах сайта при переходе к различным разделам.
  • Отслеживание прокрутки. Scrollspy. Запускайте события и анимацию при прокрутке вашей страницы.
  • Создание поиска. Кликабельная иконка поиска внутри панели навигации; открытие с использованием наложения или в модальном окне.
  • Горизонтальные разделы макета с различными фонами и стилями.
  • Навигация с кнопками "Предыдущий" и "Следующий" для пролистывания слайд-шоу. Компонент Slidenav.
  • Отзывчивый слайдер, карусель. Компонент Slider является полностью адаптивным и поддерживает сенсорную и swipe-навигацию.
  • Создайте адаптивное слайд-шоу с изображениями и видео. Добавление параллакс-эффектов в слайд-шоу.
  • Компонент «Сортируемые элементы». Создавайте сортируемые grid-сетки и списки, с возможностью менять порядок их элементов.
  • Создайте анимированный загрузчик «Спиннер».
  • Создавайте прилипающие элементы при прокручивании страницы. Липкое поведение с задержкой и анимацией при появлении. Липкий элемент только при прокрутке вверх.
  • Компонент «Суб-навигация». Различные стили для суб-навигации.
  • Масштабируемая векторная графика. Вставляйте встроенные изображения SVG в разметку веб-страницы и стилизуйте их с помощью CSS. SVG-спрайты. Использование «symbol». Анимация линий SVG.
  • Компонент «Переключатель контента» - динамический переход по различным областям контента.
  • Создавайте адаптивные вкладки навигации с разными стилями.
  • Создавайте красивые отзывчивые таблицы с использованием классов-модификаторов.
  • Оформление текста. Коллекция служебных классов для стилизации вашего контента.
  • Гибкая навигация миниатюрами; миниатюры в качестве навигации в адаптивном слайд-шоу.
  • Создайте макеты с различными фонами, которые можно расположить рядом друг с другом, словно плитка.
  • Возможности: скрыть, переключить или изменить внешний вид различного содержимого с помощью переключателя Toggle.
  • Красивые всплывающие подсказки. Различные позиции для Tooltip. Появление с задержкой.
  • Создайте кнопку «Вверх», нажав на которую пользователь автоматически перенаправляется в верхнюю часть страницы.
  • Компонент Transition. Создавайте плавные переходы между двумя состояниями при наведении на элемент.
  • Компонент Upload. Загружайте файлы через элемент формы ввода файла или область заполнителя.
  • Коллекция полезных вспомогательных классов для стилизации вашего контента.
  • Воспроизводите видео, когда оно входит в окно просмотра. Компонент «Видео».
  • Адаптивные классы видимости для отображения или скрытия элементов на разных устройствах.
  • Определите ширину элементов для разных размеров области просмотра.
Документация
Компоненты