Тесты - Утилита : Utility - Примеры Вёрстка UIkit 3

Panel

Тесты легкие и заостренные, словно ракета, поэтому они подходят нам по всем параметрам. Тесты – это сила.

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

Panel Scrollable

Overflow Auto

Табличный заголовок	Табличный заголовок	Табличный заголовок	Табличный заголовок	Табличный заголовок	Табличный заголовок
Табличный подвал	Табличный подвал	Табличный подвал	Табличный подвал	Табличный подвал	Табличный подвал
Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы
Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы
Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы

Pre scrollable

<div uk-grid>
    <div class="uk-width-1-2">...</div><div class="uk-width-1-2">...</div><div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

Overflow Auto JS

Некоторый контент перед переполнением авто-контейнера.

Какой-то контент после переполнения авто-контейнера.

Некий контент перед переполнением авто-контейнера.

Какой-то контент после переполнения авто-контейнера.

Параметры JavaScript

Опция	Значение	По умолчанию	Описание
`selContainer`	CSS selector	`.uk-modal`	Элемент контейнера, который обеспечивает высоту.
`selContent`	CSS selector	`.uk-modal-dialog`	Элемент, который оборачивает внутреннее содержимое, чтобы обеспечить его высоту.

Отзывчивые объекты

JS Responsive Width (Iframe)

Отзывчивая высота (изображение)

Box-shadows

Hover

Small

Medium

Large

XLarge

Box-shadow Bottom

Drop Cap

Буквица символизирует, что времена изменились. Занимать место в головах людей, владеть их вниманием – вот что определяет важность букв в современном обществе. Сейчас происходит самое важное – вы захотели изменить свою жизнь и наполнить ее буквицей. Это уже произошло. Это мы уже выяснили. А вот занять мужскими делами – вполне. Я то могу сколько угодно говорить об этом. Жизнь без Буквы – ничто. Видите ли, в Древней Элладе всё это было совершенно иначе. В Элладе каждый эллин культивировал Буквицу сам.

Обратите внимание на работу со вспомогательным классами и событием. Безусловно хотелось бы все сделать проще и менее запутанно, на самом деле это возможно, если, например отказаться от обратной анимации, а просто закрывать подсказку одним махом. Фиксированная позиция будет влиять на что-то вообще левое, например, на ввод в инпуте на странице при чем только в кириллической раскладке. Давайте сделаем небольшой пример, того как все это можно связать вместе и заставить работать на благо человечества. Нажатие пальцем на экране смартфона. Создание сайта, работающего как приложение, может быть достаточно интересной идеей. Разумеется, что это не абсолютное решение и всем без исключения его советовать не стоит.

Логотип

Текстовый логотип

Изображение

+ Inverse Image