Skip to main content

Кнопка

Навігація

Кнопка

Techno4 постачається з купою готових до використання кнопок. Все, що вам потрібно зробити, це додати відповідні класи до ваших посилань або submit/button входів:

Макет кнопок

Макет кнопок досить простий. Просто додайте клас button до посилань або submit/button входів: 
<!-- посилання як кнопка -->
<a class="button">Button</a>

<!-- <button> as button -->
<button class="button">Button</button>

<!-- <input type="submit"> as button -->
<input type="submit" class="button" value="Button" />

Класи модифікаторів кнопок

У Techno4 існує безліч різних кнопок. Різні стилі кнопок, досягнуті додатковими класами модифікаторів та їх комбінаціями:
Клас модифікаторОписТип
button-fill
Заповнена кнопка
CSS Class
button-fill-ios
Кнопка матиме заповнений стиль лише в темі iOS
CSS Class
button-fill-md
Кнопка матиме заповнений стиль лише в темі MD
CSS Class
button-fill-aurora
Кнопка матиме заповнений стиль лише в темі Aurora
CSS Class
button-round
Заокруглена кнопка
CSS Class
button-round-ios
Кнопка буде округленою лише в темі iOS
CSS Class
button-round-md
Кнопка буде закруглена лише в темі MD
CSS Class
button-round-aurora
Кнопка буде закруглена лише в темі Aurora
CSS Class
button-small
Маленька кнопка
CSS Class
button-small-ios
Кнопка буде маленькою лише в темі iOS
CSS Class
button-small-md
Кнопка буде маленькою лише в темі MD
CSS Class
button-small-aurora
Кнопка буде маленькою лише в темі Aurora
CSS Class
button-large
Велика кнопка
CSS Class
button-large-ios
Кнопка буде великою лише в темі iOS
CSS Class
button-large-md
Кнопка буде великою лише в темі MD
CSS Class
button-large-aurora
Кнопка буде великою лише в темі Aurora
CSS Class
button-raised
Піднята кнопка
CSS Class
button-raised-ios
Піднята кнопка лише в темі iOS
CSS Class
button-raised-md
Піднята кнопка лише в темі MD
CSS Class
button-raised-aurora
Піднята кнопка лише в темі Aurora
CSS Class
button-outline
Контур кнопки
CSS Class
button-outline-ios
Кнопка з контуром лише в темі iOS
CSS Class
button-outline-md
Кнопка з контуром лише в темі MD
CSS Class
button-outline-aurora
Кнопка з контуром лише в темі Aurora
CSS Class
button-active
Активний/вибраний стан кнопки. Для використання всередині Segmented
CSS Class
button-preloader
Потрібно додати до кнопки з попереднім завантажувачем, щоб кнопки завантажувалися
CSS Class
button-loading
Керує станом кнопки, щоб показати/приховати попередній завантажувач і приховати/показати текст кнопки (перевести кнопку в стан завантаження). button-preloader слід також додати до кнопки
CSS Class
color-[color]
Кнопка кольору, де [color] є одним із кольорів за замовчуванням
CSS Class
І, звичайно, ми можемо змішувати ці класи:
<!-- кругла кнопка -->
<a class="button button-round">Button</a>

<!--кругла і заповнена кнопка -->
<a class="button button-round button-fill">Button</a>

<!-- пілнята, кругла , заповнена, велика  кнопка -->
<a class="button button-raised button-round button-fill button-large">Button</a>

<!-- маленька червона кнопка -->
<a class="button button-small color-red">Button</a>

Кнопка попереднього завантаження

Є можливість створити динамічну кнопку попереднього завантаження. Така кнопка повинна мати Preloader всередині та текст кнопки, обгорнутий тегом <span>, і додатковий клас button-preloader:
<button class="button button-preloader">
  <span class="preloader"></span>
  <span>Load</span>
</button>
А щоб показати попередній завантажувач, нам потрібно додати додатковий клас button-loading (він покаже внутрішній попередній завантажувач і приховає текст кнопки):
<button class="button button-preloader button-loading">
  <span class="preloader"></span>
  <span>Load</span>
</button>

Сегментований контроль

Сегментований елемент керування — це лінійний набір із двох або більше сегментів (buttons), кожен із яких функціонує як взаємовиключна кнопка. Усередині елемента керування всі кнопки мають однакову ширину. Сегментовані елементи керування часто використовуються для відображення різних переглядів (перемикання вкладок).

Макет сегментованого елемента

Макет сегментованого елемента керування досить простий, лише <div> із класом segmented навколо кнопок:
<div class="segmented">
  <a class="button button-active">Tab 1</a>
  <a class="button">Tab 2</a>
</div>
Segmented "strong" вимагає додаткового елемента для правильного відображення активного стану:
<div class="segmented segmented-strong">
  <a class="button button-active">Tab 1</a>
  <a class="button">Tab 2</a>
  <!-- Додатковий елемент вимагається в segmented strong -->
  <span class="segmented-highlight"></span>
</div>

Класи сегментованих модифікаторів

Окрім кнопок, сегментовані елементи керування також підтримують декілька додаткових класів для стилізації:
Клас модифікаторОписТип
segmented-round
Округлі сегментовані елементи керування
CSS Class
segmented-round-ios
Округлі сегментовані елементи керування в темі iOS
CSS Class
segmented-round-md
Округлі сегментовані елементи керування в темі MD
CSS Class
segmented-round-aurora
Округлі сегментовані елементи керування в темі Aurora
CSS Class
segmented-raised
Підняті сегментовані елементи керування
CSS Class
segmented-raised-ios
Підняті сегментовані елементи керування в темі iOS
CSS Class
segmented-raised-md
Підняті сегментовані елементи керування в темі MD
CSS Class
segmented-raised-aurora
Підняті сегментовані елементи керування в темі Aurora
CSS Class
segmented-strong
Strong сегментовані елементи керування
CSS Class
segmented-strong-ios
Strong сегментовані елементи керування в темі iOS
CSS Class
segmented-strong-md
Strong сегментовані елементи керування в темі MD
CSS Class
segmented-strong-aurora
Strong сегментовані елементи керування в темі Aurora
CSS Class

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  --t4-button-font-size: 14px;
  --t4-button-min-width: 32px;
  --t4-button-bg-color: transparent;
  --t4-button-border-width: 0px;
  --t4-button-text-transform: uppercase;
  --t4-button-large-text-transform: uppercase;
  --t4-button-small-text-transform: uppercase;
  --t4-button-small-outline-border-width: 2px;
  /*
  --t4-button-text-color: var(--t4-theme-color);
  --t4-button-pressed-bg-color: rgba(var(--t4-theme-color-rgb), .15);
  --t4-button-pressed-text-color: var(--t4-button-text-color, var(--t4-theme-color));
  --t4-button-border-color: var(--t4-theme-color);
  --t4-button-fill-text-color: #fff;
  --t4-button-fill-bg-color: var(--t4-theme-color);
  --t4-button-outline-border-color: var(--t4-theme-color);
  --t4-button-padding-vertical: 0px;
  */
  --t4-button-outline-border-width: 2px;
  --t4-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --t4-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.23);
  --t4-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
  --t4-segmented-strong-padding: 2px;
  --t4-segmented-strong-between-buttons: 4px;
  --t4-segmented-strong-button-font-weight: 500;
  --t4-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  --t4-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
  --t4-segmented-strong-button-text-color: #000;
  --t4-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
  --t4-segmented-strong-button-hover-bg-color: rgba(0, 0, 0, 0.04);
  --t4-segmented-strong-button-active-text-color: #000;
  --t4-segmented-strong-button-active-bg-color: #fff;
}
:root .dark,
:root.dark {
  --t4-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
  --t4-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
  --t4-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
  --t4-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
  --t4-segmented-strong-button-text-color: #fff;
  --t4-segmented-strong-button-active-text-color: #fff;
}
.ios {
  --t4-button-height: 28px;
  --t4-button-padding-horizontal: 10px;
  --t4-button-border-radius: 5px;
  --t4-button-font-weight: 600;
  --t4-button-letter-spacing: 0;
  /*
  --t4-button-fill-pressed-bg-color: var(--t4-theme-color-tint);
  */
  --t4-button-large-height: 44px;
  --t4-button-large-font-size: 17px;
  --t4-button-large-font-weight: 500;
  --t4-button-small-height: 26px;
  --t4-button-small-font-size: 13px;
  --t4-button-small-font-weight: 600;
  --t4-segmented-strong-button-text-transform: none;
  --t4-segmented-strong-button-active-font-weight: 600;
}
.md {
  --t4-button-height: 36px;
  --t4-button-padding-horizontal: 8px;
  --t4-button-border-radius: 4px;
  --t4-button-font-weight: 500;
  --t4-button-letter-spacing: 0.05em;
  /*
  --t4-button-fill-pressed-bg-color: var(--t4-theme-color-shade);
  */
  --t4-button-large-height: 48px;
  --t4-button-large-font-size: 14px;
  --t4-button-large-font-weight: 500;
  --t4-button-small-height: 28px;
  --t4-button-small-font-size: 14px;
  --t4-button-small-font-weight: 500;
  --t4-segmented-strong-button-text-transform: uppercase;
  --t4-segmented-strong-button-active-font-weight: 500;
}
.aurora {
  /*
  --t4-button-hover-bg-color: rgba(var(--t4-theme-color-rgb), .07);
  --t4-button-fill-hover-bg-color: var(--t4-theme-color-tint);
  */
  --t4-button-height: 36px;
  --t4-button-min-width: 24px;
  --t4-button-padding-horizontal: 10px;
  --t4-button-border-radius: 8px;
  --t4-button-font-weight: 600;
  --t4-button-letter-spacing: 0em;
  /*
  --t4-button-fill-pressed-bg-color: var(--t4-theme-color-shade);
  */
  --t4-button-large-height: 48px;
  --t4-button-large-font-size: 16px;
  --t4-button-large-font-weight: 600;
  --t4-button-small-height: 28px;
  --t4-button-small-font-size: 14px;
  --t4-button-small-font-weight: 600;
  --t4-segmented-strong-button-text-transform: uppercase;
  --t4-segmented-strong-button-active-font-weight: 600;
}

Приклади 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Buttons</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Usual Buttons</div>
      <div class="block block-strong">
        <div class="row">
          <button class="button col">Button</button>
          <button class="button col">Button</button>
          <button class="button col button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Fill Buttons</div>
      <div class="block block-strong">
        <div class="row">
          <button class="col button button-fill">Button</button>
          <button class="col button button-fill">Button</button>
          <button class="col button button-fill button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Outline Buttons</div>
      <div class="block block-strong">
        <div class="row">
          <button class="col button button-outline">Button</button>
          <button class="col button button-outline">Button</button>
          <button class="col button button-outline button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Raised Buttons</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-raised">Button</button>
          <button class="col button button-raised button-fill">Fill</button>
          <button class="col button button-outline button-raised">Outline</button>
        </p>
        <p class="row">
          <button class="col button button-raised button-round">Round</button>
          <button class="col button button-raised button-fill button-round">Fill</button>
          <button class="col button button-outline button-round button-raised">Outline</button>
        </p>
      </div>
      <div class="block-title">Segmented</div>
      <div class="block block-strong">
        <p class="segmented segmented-raised">
          <button class="button">Button</button>
          <button class="button">Button</button>
          <button class="button button-active">Active</button>
        </p>
        <p class="segmented segmented-strong">
          <button class="button">Button</button>
          <button class="button">Button</button>
          <button class="button button-active">Active</button>
          <span class="segmented-highlight"></span>
        </p>
        <p class="segmented">
          <button class="button button-outline">Outline</button>
          <button class="button button-outline">Outline</button>
          <button class="button button-outline button-active">Active</button>
        </p>
        <p class="segmented segmented-raised segmented-round">
          <button class="button button-round">Button</button>
          <button class="button button-round">Button</button>
          <button class="button button-round button-active">Active</button>
        </p>
        <p class="segmented segmented-round">
          <button class="button button-round button-outline">Outline</button>
          <button class="button button-round button-outline">Outline</button>
          <button class="button button-round button-outline button-active">Active</button>
        </p>
      </div>
      <div class="block-title">Large Buttons</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-large">Button</button>
          <button class="col button button-large button-fill">Fill</button>
        </p>
        <p class="row">
          <button class="col button button-large button-raised">Raised</button>
          <button class="col button button-large button-raised button-fill">Raised Fill</button>
        </p>
      </div>
      <div class="block-title">Small Buttons</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-small">Button</button>
          <button class="col button button-small button-outline">Outline</button>
          <button class="col button button-small button-fill">Fill</button>
        </p>
        <p class="row">
          <button class="col button button-small button-round">Button</button>
          <button class="col button button-small button-round button-outline">Outline</button>
          <button class="col button button-small button-round button-fill">Fill</button>
        </p>
      </div>
      <div class="block-title">Preloader Buttons</div>
      <div class="block block-strong">
        <button class="button button-large button-fill button-preloader ${isLoading ? 'button-loading' : ''}"
          @click=${load}>
          <span class="preloader"></span>
          <span>Load</span>
        </button>
      </div>
      <div class="block-title">Color Buttons</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button color-red">Red</button>
          <button class="col button color-green">Green</button>
          <button class="col button color-blue">Blue</button>
        </p>
        <p class="row">
          <button class="col button color-pink">Pink</button>
          <button class="col button color-yellow">Yellow</button>
          <button class="col button color-orange">Orange</button>
        </p>
        <p class="row">
          <button class="col button color-gray">Gray</button>
          <button class="col button color-black">Black</button>
        </p>
      </div>
      <div class="block-title">Color Fill Buttons</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-fill color-red">Red</button>
          <button class="col button button-fill color-green">Green</button>
          <button class="col button button-fill color-blue">Blue</button>
        </p>
        <p class="row">
          <button class="col button button-fill color-pink">Pink</button>
          <button class="col button button-fill color-yellow">Yellow</button>
          <button class="col button button-fill color-orange">Orange</button>
        </p>
        <p class="row">
          <button class="col button button-fill color-gray">Gray</button>
          <button class="col button button-fill color-black">Black</button>
          <button class="col button button-fill color-white text-color-black">White</button>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $update }) => {
    let isLoading = false;

    const load = () => {
      isLoading = true;
      $update();
      setTimeout(() => {
        isLoading = false;
        $update();
      }, 3000);
    }

    return $render;
  }
</script>