Дополнительные компоненты

Набор дополнительных и полезных компонентов, которые не включены в базовую сброку фреймворка 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, а также минимизированной версии.

Перейти к тестам