Skip to main content

Радіо

Навігація

Макет застосунку Радіо

Макет застосунку Радіо досить простий:
<!-- Елемент радіо -->
<label class="radio">
  <!-- Поле введення даних радіо -->
  <input type="radio" />
  <!-- Іконка радіо -->
  <i class="icon-radio"></i>
</label>

Радіогрупа/список

Щоб створити радіогрупу/список, нам потрібно використовувати List View з кількома доповненнями: 
<div class="list">
  <ul>
    <!-- Одиночний пункт радіо -->
    <li>
      <label class="item-radio item-content">
        <!-- Поле введення даних радіо -->
        <input type="radio" name="my-radio" value="radio-1" />
        <!-- Іконка радіо  -->
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <!-- Заголовок радіо -->
          <div class="item-title">Books</div>
        </div>
      </label>
    </li>
    <!-- Інший примірник радіо -->
    <li>
      <label class="item-radio item-content">
        <!-- Відмічено за замовчуванням -->
        <input type="radio" name="my-radio" value="radio-2" checked />
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">Music</div>
        </div>
      </label>
    </li>
    ...
  </ul>
</div>
item-content має бути <label> елементом із додатковим класом item-radio

Поле введення даних радіо (<input type="radio" />) має бути першим дочірнім елементом item-content

Піктограма радіо має бути після поля введення даних радіо!

Позиція значка радіо

За замовчуванням піктограма елемента списку радіостанцій відображається в кінці елемента списку в темі iOS і на початку елемента списку в темі MD.

Також можна змінити цю поведінку, щоб вказати положення піктограми елемента списку радіостанцій - на початку або в кінці елемента списку. Для цього нам потрібно додати додатковий item-radio-icon-start або item-radio-icon-end клас до item-radio:

<!-- Додатковий клас «item-radio-icon-start» змусить піктограму радіо відображатися на початку елемента списку для всіх тем -->
<li>
  <!-- Додатковий клас "item-radio-icon-start" -->
  <label class="item-radio item-radio-icon-start item-content">
    <!-- Поле введення даних радіо  -->
    <input type="radio" name="my-radio" value="radio-1" />
    <!-- Іконка радіо -->
    <i class="icon icon-radio"></i>
    <div class="item-inner">
      <!-- Заголовок радіо -->
      <div class="item-title">Books</div>
    </div>
  </label>
</li>

<!-- 
Додатковий клас «item-radio-icon-end» змусить піктограму радіо відображатися в кінці елемента списку для всіх тем
 -->
<li>
  <!-- Додатковий клас "item-radio-icon-end" -->
  <label class="item-radio item-radio-icon-end item-content">
    <!-- Поле введення даних радіо -->
    <input type="radio" name="my-radio" value="radio-1" />
    <!-- Іконка радіо -->
    <i class="icon icon-radio"></i>
    <div class="item-inner">
      <!-- Заголовок радіо-->
      <div class="item-title">Books</div>
    </div>
  </label>
</li>

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  /*
  --t4-radio-active-color: var(--t4-theme-color);
  */
  --t4-radio-border-radius: 50%;
  --t4-radio-extra-margin: 0px;
}
:root .dark,
:root.dark {
  --t4-radio-inactive-color: rgba(255, 255, 255, 0.3);
}
.ios {
  --t4-radio-size: 22px;
  --t4-radio-border-width: 1px;
  --t4-radio-inactive-color: #c7c7cc;
}
.md {
  --t4-radio-size: 20px;
  --t4-radio-border-width: 2px;
  --t4-radio-inactive-color: #6d6d6d;
}

Приклади 

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Radio</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">Inline</div>
    <div class="block block-strong-ios block-outline-ios">
      <p>Lorem <label class="radio"><input type="radio" name="demo-radio-inline"><i class="icon-radio"></i></label>
        ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet
        aliquid eligendi <label class="radio"><input type="radio" name="demo-radio-inline"><i
            class="icon-radio"></i></label> ad delectus impedit tempore nemo, enim vel praesentium consequatur nulla
        mollitia!</p>
    </div>
    <div class="block-title">Radio Group</div>
    <div class="list list-strong-ios list-outline-ios list-dividers-ios">
      <ul>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Books" checked />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Books</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Movies" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Movies</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Food" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Food</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Drinks" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Drinks</div>
            </div>
          </label>
        </li>
      </ul>
    </div>
    <div class="list list-strong-ios list-outline-ios list-dividers-ios">
      <ul>
        <li>
          <label class="item-radio item-radio-icon-end item-content">
            <input type="radio" name="demo-radio-end" value="Books" checked />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Books</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-end item-content">
            <input type="radio" name="demo-radio-end" value="Movies" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Movies</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-end item-content">
            <input type="radio" name="demo-radio-end" value="Food" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Food</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-end item-content">
            <input type="radio" name="demo-radio-end" value="Drinks" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Drinks</div>
            </div>
          </label>
        </li>
      </ul>
    </div>
    <div class="block-title">With Media Lists</div>
    <div class="list media-list list-strong-ios list-outline-ios list-dividers-ios">
      <ul>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-media-radio" value="1" checked />
            <i class="icon icon-radio" checked></i>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Facebook</div>
                <div class="item-after">17:14</div>
              </div>
              <div class="item-subtitle">New messages from John Doe</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-media-radio" value="2" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">John Doe (via Twitter)</div>
                <div class="item-after">17:11</div>
              </div>
              <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-media-radio" value="3" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Facebook</div>
                <div class="item-after">16:48</div>
              </div>
              <div class="item-subtitle">New messages from John Doe</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-media-radio" value="4" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">John Doe (via Twitter)</div>
                <div class="item-after">15:32</div>
              </div>
              <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>

Techno4 Framework