Шаблон PEAK (от YOOtheme)

размер шрифта уменьшить размер шрифта увеличить размер шрифта
Печать
Эл. почта

Оцените материал

(6 голосов)

yoo_peak

Кнопки

Добавление класса uk-button и модификатор uk-button-default к элементам <a> или <button> активирует стиль кнопки по умолчанию. Чтобы добавить кнопке неактивное состояние, используйте атрибут disabled.

Ссылка

<div uk-margin>
<a class="uk-button uk-button-default" href="#">Ссылка</a> 
<button class="uk-button uk-button-default">Кнопка</button> 
<button class="uk-button uk-button-default" disabled="disabled">Неактивная кнопка</button>
</div>

Внимание Если вы используете несколько кнопок подряд, добавьте к ним верхний отступ, чтобы они корректно отображались при переносе строки. Для этого задайте атрибут uk-margin из компонента Margin к их родительскому элементу.

Модификаторы стилей:

Класс	Описание
`uk-button-default`	Стандартный стиль кнопки.
`uk-button-primary`	Используется для стандартных действий.
`uk-button-success`	Используется для важных кнопок.
`uk-button-danger`	Кнопка для блоков с ошибками.

<div uk-margin>
<button class="uk-button uk-button-default">Default</button> 
<button class="uk-button uk-button-primary">Primary</button> 
<button class="uk-button uk-button-success">Success</button> 
<button class="uk-button uk-button-danger">Danger</button>
</div>

Предупреждения

Для установки этого компонента, добавить uk-alert класс для блочного элемента.

Info message

Success message: uk-alert-success

Warning message: uk-alert-warning

Danger message: uk-alert-danger

<p class="uk-alert">Info message</p>
<p class="uk-alert uk-alert-success">Success message: uk-alert-success</p>
<p class="uk-alert uk-alert-warning">Warning message: uk-alert-warning</p>
<p class="uk-alert uk-alert-danger">Danger message: uk-alert-danger</p>

Применить кнопку закрыть, добавить uk-alert-close класс <button> или <a> элемент внутри окно с предупреждением. Чтобы разрешить JavaScript Для кнопки закрыть, просто добавьте data-uk-alert атрибут в окно с предупреждением.

Кнопка "закрыть"

<p class="uk-alert uk-alert-danger" data-uk-alert><a class="uk-alert-close uk-close"></a>Кнопка "закрыть"</p>

Цитаты

Тег blockquote предназначен для выделения длинных цитат внутри документа. Обычно содержимое этого тега выровнивается отступами со всех сторон и используется наклонный текст.

Лев Николаевич Толстой

Переключатель

- Первый блок
- Второй блок
- Третий блок

<ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#subnav-pill-content-1'}">
<li class="uk-active" aria-expanded="true"><a href="#">Пункт 1</a></li>
<li aria-expanded="false" class=""><a href="#">Пункт 2</a></li>
<li aria-expanded="false"><a href="#">Пункт 3</a></li>
</ul>
<ul id="subnav-pill-content-1" class="uk-switcher">
<li class="uk-active" aria-hidden="false">Первый блок</li>
<li aria-hidden="true" class="">Второй блок</li>
<li aria-hidden="true">Третий блок</li>
</ul>

Панели

Простая
Простая панель с классом uk-panel-box

Первичная
Первичная панель с классом uk-panel-box-primary

Вторичная
Вторичная панель с классом uk-panel-box-secondary

Панель с тизером класс uk-panel-teaser

<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-2 uk-row-first">
<div class="uk-panel uk-panel-box">
<h3 class="uk-panel-title"><i class="uk-icon-user"></i> Простая</h3>
Простая панель с классом <code>uk-panel-box</code>
</div>
</div>
<div class="uk-width-medium-1-2">
<div class="uk-panel uk-panel-box uk-panel-box-primary">
<h3 class="uk-panel-title"><i class="uk-icon-home"></i> Первичная</h3>
Первичная панель с классом <code>uk-panel-box-primary</code>
</div>
</div>
<div class="uk-width-medium-1-2">
<div class="uk-panel uk-panel-box uk-panel-box-secondary">
<h3 class="uk-panel-title" tid="ch3_90"><i class="uk-icon-bookmark"></i> Вторичная</h3>
Вторичная панель с классом <code>uk-panel-box-secondary</code>
</div>
</div>
<div class="uk-width-medium-1-2">
<div class="uk-panel uk-panel-box">
 <div class="uk-panel-teaser"><img src="/images/joomla/placeholder_800x280.svg" alt="" width="800" height="280" />
 </div>
 <p>Панель с тизером класс <code>uk-panel-teaser</code></p>
</div>
</div>
</div>

Обложка

<div class="uk-cover-container uk-height-medium">
<img src="/images/joomla/placeholder_800x280.svg" alt="" uk-cover />
</div>

Наложение

Заголовок

Основной текст информационного блока

<div class="uk-overlay">
<img src="/images/joomla/placeholder_800x280.svg" alt="" >
<div class="uk-overlay-panel">
<h3>Заголовок</h3>
<p>Основной текст информационного блока</p>
</div>
</div>

Картинки

uk-thumbnail-medium

uk-thumbnail-small

uk-thumbnail-mini

<div class="uk-thumbnail uk-thumbnail-medium"><a href="/templates/yoo_peak/template_preview.png" title="" data-lightbox="on" data-spotlight="on"><img class="padded" src="/templates/yoo_peak/template_preview.png" alt="" /></a>
<div class="uk-thumbnail-caption"><code>uk-thumbnail-medium</code></div>
</div>
<div class="uk-thumbnail uk-thumbnail-small"><a href="/templates/yoo_peak/template_preview.png" title="" data-lightbox="on" data-spotlight="on"><img class="padded" src="/templates/yoo_peak/template_preview.png" alt="" /></a>
<div class="uk-thumbnail-caption"><code>uk-thumbnail-small</code></div>
</div>
<div class="uk-thumbnail uk-thumbnail-mini"><a href="/templates/yoo_peak/template_preview.png" title="" data-lightbox="on" data-spotlight="on"><img class="padded" src="/templates/yoo_peak/template_preview.png" alt="" /></a>
<div class="uk-thumbnail-caption"><code>uk-thumbnail-mini</code></div>
</div>

Иконки

Для установки этого компонента, добавить любой uk-icon-* класс к <i> или <span> элементу.

Краткий обзор uk-icon-* (полный список классов - Шрифт Awesome)

adjust
anchor
archive
area-chart
arrows
arrows-h
arrows-v
asterisk
at
automobile (alias)
balance-scale
ban
bank (alias)
bar-chart
bar-chart-o (alias)
barcode
bars
battery-empty (alias)
battery-0
battery-quarter (alias)
battery-1
battery-half (alias)
battery-2
battery-three-quarters (alias)
battery-3
battery-full (alias)
battery-4
bed
beer
bell
bell-o
bell-slash
bell-slash-o
bicycle
binoculars
birthday-cake
bluetooth
bluetooth-b
bolt
bomb
book
bookmark
bookmark-o
briefcase
bug
building
building-o
bullhorn
bullseye
bus
cab (alias)
calculator
calendar
calendar-check-o
calendar-minus-o
calendar-o
calendar-plus-o
calendar-times-o
camera
camera-retro
car
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
cart-arrow-down
cart-plus
cc
certificate
check
check-circle
check-circle-o
check-square
check-square-o
child
circle
circle-o
circle-o-notch
circle-thin
clock-o
clone
close (alias)
cloud
cloud-download
cloud-upload
code
code-fork
coffee
cog
cogs
comment
comment-o
commenting
commenting-o
comments
comments-o
compass
copyright
creative-commons
credit-card
credit-card-alt
crop
crosshairs
cube
cubes
cutlery
dashboard (alias)
database
desktop
diamond
dot-circle-o
download
edit (alias)
ellipsis-h
ellipsis-v
envelope
envelope-o
envelope-square
eraser
exchange
exclamation
exclamation-circle
exclamation-triangle
external-link
external-link-square
eye
eye-slash
eyedropper
fax
female
fighter-jet
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-movie-o (alias)
file-pdf-o
file-photo-o (alias)
file-picture-o (alias)
file-powerpoint-o
file-sound-o (alias)
file-video-o
file-word-o
file-zip-o (alias)
film
filter
fire
fire-extinguisher
flag
flag-checkered
flag-o
flash (alias)
flask
folder
folder-o
folder-open
folder-open-o
frown-o
futbol-o
gamepad
gavel
gear (alias)
gears (alias)
genderless (alias)
gift
glass
globe
graduation-cap
group (alias)
hand-lizard-o
hand-stop-o (alias)
hand-paper-o
hand-peace-o
hand-pointer-o
hand-grab-o (alias)
hand-rock-o
hand-scissors-o
hand-spock-o
hdd-o
hashtag
headphones
heart
heart-o
heartbeat
history
home
hotel (alias)
hourglass
hourglass-o
hourglass-1 (alias)
hourglass-start
hourglass-2 (alias)
hourglass-half
hourglass-3 (alias)
hourglass-end
i-cursor
image (alias)
inbox
industry
info
info-circle
institution (alias)
key
keyboard-o
language
laptop
leaf
legal (alias)
lemon-o
level-down
level-up
life-bouy (alias)
life-buoy (alias)
life-ring
life-saver (alias)
lightbulb-o
line-chart
location-arrow
lock
magic
magnet
mail-forward (alias)
mail-reply (alias)
mail-reply-all (alias)
male
map
map-marker
map-o
map-pin
map-signs
meh-o
microphone
microphone-slash
minus
minus-circle
minus-square
minus-square-o
mobile
mobile-phone (alias)
money
moon-o
mortar-board (alias)
motorcycle
mouse-pointer
music
navicon (alias)
newspaper-o
object-group
object-ungroup
paint-brush
paper-plane
paper-plane-o
paw
pencil
pencil-square
pencil-square-o
percent
phone
phone-square
photo (alias)
picture-o
pie-chart
plane
plug
plus
plus-circle
plus-square
plus-square-o
power-off
print
puzzle-piece
qrcode
question
question-circle
quote-left
quote-right
random
recycle
refresh
registered
remove (alias)
reorder (alias)
reply
reply-all
retweet
road
rocket
rss
rss-square
search
search-minus
search-plus
send (alias)
send-o (alias)
server
share
share-alt
share-alt-square
share-square
share-square-o
shield
ship
shopping-bag
shopping-basket
shopping-cart
sign-in
sign-out
signal
sitemap
sliders
smile-o
soccer-ball-o (alias)
sort
sort-alpha-asc
sort-alpha-desc
sort-amount-asc
sort-amount-desc
sort-asc
sort-desc
sort-down (alias)
sort-numeric-asc
sort-numeric-desc
sort-up (alias)
space-shuttle
spinner
spoon
square
square-o
star
star-half
star-half-empty (alias)
star-half-full (alias)
star-half-o
star-o
sticky-note
sticky-note-o
street-view
suitcase
sun-o
support (alias)
tablet
tachometer
tag
tags
tasks
taxi
television
terminal
thumb-tack
thumbs-down
thumbs-o-down
thumbs-o-up
thumbs-up
ticket
times
times-circle
times-circle-o
tint
toggle-down (alias)
toggle-left (alias)
toggle-off
toggle-on
toggle-right (alias)
toggle-up (alias)
trademark
trash
trash-o
tree
trophy
truck
tty
tv (alias)
umbrella
university
unlock
unlock-alt
unsorted (alias)
upload
usb
user
user-plus
user-secret
user-times
users
video-camera
volume-down
volume-off
volume-up
warning (alias)
wheelchair
wifi
wrench

https://3uikit.ru/ - документация для UIkit на русском

http://getuikit.ru/docs/2.26.4/core.html - документация для UIkit на русском

Опубликовано в Шаблоны

Теги

Другие материалы в этой категории: « Работа с шаблоном Vertex (от Shape5)

Добавить комментарий

JComments

Наверх