Компоненты UIkit 3
Потрясающая коллекция компонентов UIkit 3 для создания веб-проектов.
-
Красивый адаптивный аккордеон для сайта с анимацией при развертывании. Каждый элемент, при нажатии/клике на заголовок элемента, может быть «развёрнут» или «раскрыт».
-
Компонент «Алерт» - взаимодействие с пользователем. Уведомления на странице. Отображение успешного или положительного сообщения. Как установить уведомление в состояние предупреждения и как отобразить сообщение об ошибке. Как сделать кнопку закрытия...
-
Компонент «Выравнивание» позволит управлять выравниванием встроенных элементов в зависимости от размера области просмотра. Адаптивность при выравнивании элементов.
-
Создание анимации для сайта. Коллекция потрясающих плавных анимаций для использования на вашей веб-странице.
-
Создавайте интересные и невероятные статьи на страницах сайта. Компонент статьи состоит из самой статьи, заголовка и метаданных.
-
Удивительная коллекция дополнительных классов для добавления различных фонов к элементам. Возможность применить различные режимы наложения к фоновому изображению, установить фиксированное состояние, изменить позицию...
-
Создавайте красивые уведомительные значки и выводите информацию в навигации или вкладках/табах с количеством доступных единиц. «Значок» можно использовать в качестве счётчика.
-
Компонент «База» предоставляет стили по умолчанию для всех элементов HTML.
-
Создавайте "хлебные крошки" (дублирующее меню), чтобы показать пользователям их местоположение на веб-сайте от некоего начального элемента до того уровня иерархии, который в данный момент просматривает пользователь.
-
Создавайте красивые кнопки, которые могут быть разных стилей и размеров. Компонент «Кнопка» позволяет создать из кнопки выпадающий список, добавить в проект кнопки различной ширины.
-
С компонентом «Карточка» возможно создавать потрясающие макеты разных стилей. Создание карточки. Модификаторы. Разметка. Примеры.
-
Добавляем кнопку закрытия, которую можно комбинировать с различными компонентами UIkit 3.
-
Универсальный вариант для отображения вашего контента в нескольких текстовых колонках, не разбивая его на несколько контейнеров. Текст в несколько колонок / Многоколоночный текст. Адаптивное поведение.
-
Создавайте и стилизуйте блоки с комментариями на сайте. Компонент включает в себя стили для комментариев, например, для раздела блога на вашем сайте.
-
Компонент «Контейнер» позволяет выровнять и центрировать содержимое страницы. Обычно в контейнер обернут основной контент сайта. Модификаторы «Размер».
-
Как создать таймер с UIkit 3. Создание таймера обратного отсчета Countdown.
-
Компонент «Cover» / «Обложка». Охватив весь контейнер, разверните изображения, видео или фреймы, и разместите сверху свой собственный контент. Как растянуть блок на всю высоту экрана.
-
Создавайте списки определений (описаний). Список определений состоит из термина и его описания.
-
Создавайте разделители для разделения контента, горизонтальный или вертикальный. Компонент «Разделитель» позволяет добавлять различные стили.
-
Создание точечной навигации (навигация точками) для работы со слайд-шоу или для прокрутки к различным разделам страницы.
-
Расположите любой элемент в связке с другим, изначально невидимым; отображение в виде выпадения можно настроить как при наведении на вызываемый элемент, так и при клике на него. Как создать «Выпадение».
-
Создание выпадающего списка меню навигации. Размещение сетки Grid и любого контента в выпадающем списке. Различные позиции; использование анимации при раскрытии Dropdown.
-
Компонент Фильтр. Фильтруйте или сортируйте элементы используя метаданные. Любой элемент может быть отфильтрован или отсортирован. Применение. Разметка. Примеры
-
Используйте огромные возможности flexbox при создании потрясающих адаптивных макетов. Как создать разметку и использовать компонент Flex.
-
Создание формы. Модификаторы. Создание сложенной (вертикальной) формы или стильной горизонтальной. Использование кнопки, текста или ссылки в качестве формы выбора. Как вставить иконку в input и сделать её кликабельной.
-
Создайте полностью отзывчивый, плавающий, резиновый макет модульной сетки. Модификаторы. Grid Masonry. Параллакс. Примеры. Использование.
-
Устанавливайте различные стили для заголовков. Модификаторы. Заголовок с разделителем. Вертикально центрированная линия в текстовом заголовке.
-
Компонент «Высота» предлагает три варианта установки высоты: использование вспомогательных классов с фиксированной высотой, в зависимости от области просмотра, путем соответствия высоты различных элементов.
-
Векторные иконки в любом месте вашего контента. Масштабирование какого-либо изображения до размера иконки.
-
Создание навигации, состоящей из иконок. Вертикальная иконочная навигация.
-
Компонент «Изображение» и Lazy loading. Ускоряем время загрузки страницы загружая изображения только когда они входят в область просмотра. Использование атрибута
srcset
для свойства CSSbackground-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. Загружайте файлы через элемент формы ввода файла или область заполнителя.
-
Коллекция полезных вспомогательных классов для стилизации вашего контента.
-
Воспроизводите видео, когда оно входит в окно просмотра. Компонент «Видео».
-
Адаптивные классы видимости для отображения или скрытия элементов на разных устройствах.
-
Определите ширину элементов для разных размеров области просмотра.