Дополнительные компоненты
Набор дополнительных и полезных компонентов, которые не включены в базовую сброку фреймворка UIkit 2.
UIkit 2 расширяет функциональные возможности дополнительными компонентами, которые не включены в базовую структуру. Современные "полезности" включают в себя такие вещи, как лайтбокс для изображений и видео, адаптивное слайд-шоу, выпадающий список выбора даты и другие.
Использование
После загрузки коллекции UIkit 2, вы можете найти все дополнительные компоненты в соответствующих папках /css
и /js
:
/css
/components
<!-- Компонент с основным стилем -->
autocomplete.css
autocomplete.min.css
<!-- Компонент с градиентным стилем -->
autocomplete.gradient.css
autocomplete.gradient.min.css
<!-- Почти плоский стиль UIkit 2 -->
autocomplete.almost-flat.css
autocomplete.almost-flat.min.css
...
/js
/components
autocomplete.js
autocomplete.min.js
...
Чтобы использовать один из этих компонентов, все, что вам нужно сделать, это добавить CSS и JavaScript необходимого компонента в заголовок вашего документа.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок</title>
<link rel="stylesheet" href="uikit.min.css" />
<script src="jquery.js"></script>
<script src="uikit.min.js"></script>
<!-- Autocomplete CSS -->
<link rel="stylesheet" href="components/autocomplete.css">
<!-- Autocomplete Javascript -->
<script src="components/autocomplete.js"></script>
</head>
<body>
</body>
</html>
UIkit 2 предоставляет тестовые страницы компонентов. Каждая из страниц содержит примеры ее компонента и дает обзор возможностей, которые поддерживаются "из коробки".
В распакованном zip-файле вы найдете готовые к использованию CSS, JavaScript и файлы шрифтов для вашего проекта. Базовый фреймворк UIkit почти не имеет стиля, чтобы сохранить его легким. Дополнительно, вместе с темой по умолчанию, две темы оформления с градиентом и почти плоским стилем. Каждый стиль поставляется в виде отдельного файла CSS, а также минимизированной версии.