Элементы контроля Foundation

Кнопки - Button

Кнопки-это удобные инструменты, когда вам нужны некоторые традиционные действия. С этой целью Foundation имеет множество простых в использовании стилей кнопок, которые вы можете настроить или переопределить в соответствии с вашими потребностями.

Основное

Базовая кнопка может быть создана с минимальной разметкой. Поскольку кнопки могут использоваться для многих целей, важно использовать правильный тег.

Используйте тег <a>, если кнопка является ссылкой на другую страницу или ссылкой на якорь внутри страницы. Как правило, якоря не требуют JavaScript для работы.

Используйте тег , если кнопка выполняет действие, которое изменяет что-то на текущей странице. элементы почти всегда требуют JavaScript для работы.

Добавьте атрибут type="button" к <button> элементам, если только кнопка не отправляет форму. В этом случае вы должны добавить класс .submit и убрать type="button"

<!-- Anchors (links) -->
<a href="/about.html" class="button">Learn More</a>
<a href="#features" class="button">View All Features</a>

<!-- Buttons (actions) -->
<button type="button" class="success button">Save</button>
<button type="button" class="alert button">Delete</button>​


Learn More View All Features

Размеры

Дополнительные классы могут быть добавлены к вашей кнопке, чтобы изменить ее размер и форму.

<a class="button tiny" href="#">So Tiny</a>
<a class="button small" href="#">So Small</a>
<a class="button" href="#">So Basic</a>
<a class="button large" href="#">So Large</a>
<a class="button expanded" href="#">Such Expand</a>
<a class="button small expanded" href="#">Wow, Small Expand</a>​


So Tiny So Small So Basic So Large Such Expand Wow, Small Expand

Отзывчивые расширенные кнопки

<a class="button small small-only-expanded" href="#">Wow, Expand only on small viewport</a>
<a class="button small medium-only-expanded" href="#">Expand only on medium viewport</a>
<a class="button small large-only-expanded" href="#">Expand only on large viewport</a>

<a class="button small medium-expanded" href="#">Wow, Expand on medium and larger</a>
<a class="button small large-expanded" href="#">Expand on large and larger</a>

<a class="button small medium-down-expanded" href="#">Expand on medium and smaller</a>
<a class="button small large-down-expanded" href="#">Expand on large and smaller</a>​

Wow, Expand only on small viewport Expand only on medium viewport Expand only on large viewport Wow, Expand on medium and larger Expand on large and larger Expand on medium and smaller Expand on large and smaller

Раскраска

<a class="button primary" href="#">Primary</a>
<a class="button secondary" href="#">Secondary</a>
<a class="button success" href="#">Success</a>
<a class="button alert" href="#">Alert</a>
<a class="button warning" href="#">Warning</a>​

Primary Secondary Success Alert Warning

Полый Стиль

Добавить .hollow класс к кнопке, чтобы придать ей полый стиль.

<button class="hollow button" href="#">Primary</button>
<button class="hollow button secondary" href="#">Secondary</button>
<button class="hollow button success" href="#">Success</button>
<button class="hollow button alert" href="#">Alert</button>
<button class="hollow button warning" href="#">Warning</button>
<button class="hollow button" href="#" disabled>Disabled</button>​


Отключенные кнопки

.disabled класс придаст кнопкам блеклый вид. Класс является чисто визуальным стилем и фактически не отключает элемент управления. Для элементов <button> можно добавить атрибут .disabled как для отключения, так и для стилизации. Если вы хотите отключить ссылку, вам следует добавить атрибут .aria-disabled, чтобы пометить его как отключенный для вспомогательных технологий.


<a class="button disabled" href="#" aria-disabled>Disabled</a>
<button type="button" class="button primary" disabled>Disabled</button>
<button type="button" class="button secondary" disabled>Disabled</button>
<button type="button" class="button success" disabled>Disabled</button>
<button type="button" class="button alert" disabled>Disabled</button>
<button type="button" class="button warning" disabled>Disabled</button>​


Disabled

Группа кнопок

Добавить .button - сгруппируйте класс в контейнер, а внутри него разместите любое количество кнопок. Кнопки разделены небольшой рамкой.

<div class="button-group">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>​


Слайдер JavaScript

Этот удобный ручной ползунковый слайдер идеально подходит для установки определенных значений в пределах диапазона.

<div class="grid-x grid-margin-x">
  <div class="cell small-10">
    <div class="slider" data-slider data-initial-start="50" data-step="5">
      <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
      <span class="slider-fill" data-slider-fill></span>
    </div>
  </div>
  <div class="cell small-2">
    <input type="number" id="sliderOutput2">
  </div>
</div>​



Радиопереключатель

Вы также можете использовать <input type= "radio" > вместо флажка, чтобы создать ряд опций.


<div class="switch">
  <input class="switch-input" id="exampleRadioSwitch1" type="radio" checked name="testGroup">
  <label class="switch-paddle" for="exampleRadioSwitch1">
    <span class="show-for-sr">Bulbasaur</span>
  </label>
</div>​