Skip to main content

Прапорець

Навігація

Макет прапорця

Макет прапорця досить простий:
<!-- checkbox element -->
<label class="checkbox">
  <!-- checkbox input -->
  <input type="checkbox" />
  <!-- checkbox icon -->
  <i class="icon-checkbox"></i>
</label>

Прапорець Група/Список

Щоб створити групу/список прапорців, ми повинні використовувати Перегляд списку з невеликими доповненнями: 
<div class="list">
  <ul>
    <!-- Single checkbox item -->
    <li>
      <label class="item-checkbox item-content">
        <!-- Checkbox input -->
        <input type="checkbox" />
        <!-- Checkbox icon -->
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <!-- Checkbox Title -->
          <div class="item-title">Books</div>
        </div>
      </label>
    </li>
    <!-- Another checkbox item -->
    <li>
      <label class="item-checkbox item-content">
        <!-- Checked by default -->
        <input type="checkbox" checked />
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title">Music</div>
        </div>
      </label>
    </li>
    ...
  </ul>
</div>
item-content має бути <label> елементом із додатковим item-checkbox класом.

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

Значок прапорця має бути після введення прапорця

Невизначений стан

Techno4 поставляється з візуальною підтримкою невизначеного стану прапорця. У HTML неможливо встановити цей стан за допомогою атрибута, його можна встановити лише через JavaScript: 
<input type="checkbox" id="my-checkbox" />

var checkboxEl = document.querySelector('#my-checkbox');
checkboxEl.indeterminate = true;
Або з Dom7
var $checkboxEl = $('#my-checkbox');
$checkboxEl.prop('indeterminate', true);
Але якщо ви використовуєте його з Компонентом маршрутизатора, потім він автоматично виявить цей атрибут і встановить його як властивість елемента, щоб його можна було використовувати в шаблонах: 
<input type="checkbox" {{#if something}}indeterminate{{/if}} id="my-checkbox" />

Положення значка прапорця

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

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

<!-- Additional "item-checkbox-icon-end" class will force checkbox icon to appear in the beginning of the list item for all themes -->
<li>
  <!-- Additional "item-checkbox-icon-end" class -->
  <label class="item-checkbox item-checkbox-icon-end item-content">
    <!-- Checkbox input -->
    <input type="checkbox" />
    <!-- Checkbox icon -->
    <i class="icon icon-checkbox"></i>
    <div class="item-inner">
      <!-- Checkbox Title -->
      <div class="item-title">Books</div>
    </div>
  </label>
</li>

Змінні CSS

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

Приклади 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Checkbox</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="checkbox"><input type="checkbox" /><i class="icon-checkbox"></i></label> ipsum dolor sit
          amet, consectetur adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet aliquid eligendi
          <label class="checkbox"><input type="checkbox" /><i class="icon-checkbox"></i></label> ad delectus impedit
          tempore nemo, enim vel praesentium consequatur nulla mollitia!
        </p>
      </div>
      <div class="block-title">Checkbox Group</div>
      <div class="list list-strong-ios list-outline-ios list-dividers-ios">
        <ul>
          <li>
            <label class="item-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-checkbox" value="Books" checked />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Books</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-checkbox" value="Movies" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Movies</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-checkbox" value="Food" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Food</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-checkbox" value="Drinks" />
              <i class="icon icon-checkbox"></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-checkbox item-checkbox-icon-end item-content">
              <input type="checkbox" name="demo-checkbox" value="Books" checked />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Books</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-checkbox-icon-end item-content">
              <input type="checkbox" name="demo-checkbox" value="Movies" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Movies</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-checkbox-icon-end item-content">
              <input type="checkbox" name="demo-checkbox" value="Food" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Food</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-checkbox-icon-end item-content">
              <input type="checkbox" name="demo-checkbox" value="Drinks" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Drinks</div>
              </div>
            </label>
          </li>
        </ul>
      </div>


      <div class="block-title">Indeterminate State</div>
      <div class="list list-strong-ios list-outline-ios list-dividers-ios">
        <ul>
          <li>
            <label class="item-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-checkbox" checked=${movies.length===2}
                indeterminate=${movies.length===1} @change=${onMoviesChange} />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Movies</div>
              </div>
            </label>
            <ul>
              <li>
                <label class="item-checkbox item-checkbox-icon-start item-content">
                  <input type="checkbox" name="demo-checkbox" value="Movie 1" checked=${movies.indexOf('Movie 1')>= 0}
                  @change=${onMovieChange}
                  />
                  <i class="icon icon-checkbox"></i>
                  <div class="item-inner">
                    <div class="item-title">Movie 1</div>
                  </div>
                </label>
              </li>
              <li>
                <label class="item-checkbox item-checkbox-icon-start item-content">
                  <input type="checkbox" name="demo-checkbox" value="Movie 2" checked=${movies.indexOf('Movie 2')>= 0}
                  @change=${onMovieChange}
                  />
                  <i class="icon icon-checkbox"></i>
                  <div class="item-inner">
                    <div class="item-title">Movie 2</div>
                  </div>
                </label>
              </li>
            </ul>
          </li>
        </ul>
      </div>


      <div class="block-title">With Media Lists</div>
      <div class="list list-strong-ios list-outline-ios list-dividers-ios media-list">
        <ul>
          <li>
            <label class="item-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-media-checkbox" value="1" />
              <i class="icon icon-checkbox"></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-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-media-checkbox" value="2" />
              <i class="icon icon-checkbox"></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-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-media-checkbox" value="3" />
              <i class="icon icon-checkbox"></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-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-media-checkbox" value="4" />
              <i class="icon icon-checkbox"></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>
</template>
<script>
  export default (props, { $update }) => {
    let movies = ['Movie 1'];


    const onMovieChange = (e) => {
      var value = e.target.value;
      if (e.target.checked) {
        movies.push(value);
      } else {
        movies.splice(movies.indexOf(value), 1);
      }
      $update();
    }
    const onMoviesChange = (e) => {
      if (movies.length === 1 || movies.length === 0) {
        movies = ['Movie 1', 'Movie 2'];
      } else if (movies.length === 2) {
        movies = [];
      }
      $update();
    }


    return $render;
  };
</script>

Techno4 Framework