Skip to main content

Кнопка списку

Навігація

Макет кнопки списку

Кнопка «Список» — це спрощений елемент посилання на список, корисний у випадку, якщо вам потрібно запустити прості дії, які самостійно пояснюються:
<li>
  <a class="list-button">List Button 1</a>
</li>
<li>
  <a class="list-button">List Button 2</a>
</li>
Основний підхід Techno4 Framework полягає в тому, щоб надати вам можливість легко та зрозуміло створювати програми для iOS та Android за допомогою HTML, CSS та JavaScript. Techno4 Framework повний свободи. Він не обмежує вашу уяву і не пропонує шляхів будь-яких рішень. Techno4 Framework дає вам свободу!

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  --t4-list-inset-side-margin: 16px;
  --t4-list-item-padding-horizontal: 16px;
  --t4-list-item-padding-vertical: 8px;
  --t4-list-media-item-padding-horizontal: 16px;
  --t4-list-item-text-max-lines: 2;
  --t4-list-chevron-icon-font-size: 20px;
  --t4-list-item-media-margin: 16px;
  --t4-list-item-title-font-size: inherit;
  --t4-list-item-title-font-weight: 400;
  --t4-list-item-title-line-height: inherit;
  --t4-list-item-title-white-space: nowrap;
  --t4-list-item-subtitle-font-weight: 400;
  --t4-list-item-subtitle-line-height: inherit;
  --t4-list-item-text-font-weight: 400;
  --t4-list-item-after-font-weight: 400;
  --t4-list-item-after-line-height: inherit;
  --t4-list-item-header-font-size: 12px;
  --t4-list-item-header-font-weight: 400;
  --t4-list-item-header-line-height: 1.2;
  --t4-list-item-footer-font-size: 12px;
  --t4-list-item-footer-font-weight: 400;
  --t4-list-item-footer-line-height: 1.2;
  /*
  --t4-list-button-text-color: var(--t4-theme-color);
  */
  --t4-list-button-font-size: inherit;
  --t4-list-button-font-weight: 400;
  --t4-list-button-text-align: center;
  --t4-list-group-title-line-height: inherit;
  --t4-menu-list-font-size: 14px;
  --t4-menu-list-item-title-font-size: 14px;
  --t4-menu-list-item-title-font-weight: 500;
  --t4-menu-list-item-subtitle-font-size: 14px;
  --t4-menu-list-item-text-font-size: 14px;
  --t4-menu-list-item-after-font-size: 14px;
  --t4-list-outline-border-color: rgba(0, 0, 0, 0.22);
  --t4-list-chevron-icon-color: rgba(0, 0, 0, 0.2);
}
:root .dark,
:root.dark {
  --t4-list-button-border-color: rgba(255, 255, 255, 0.15);
  --t4-list-outline-border-color: rgba(255, 255, 255, 0.15);
  --t4-list-group-title-border-color: rgba(255, 255, 255, 0.15);
  --t4-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
}
.ios {
  --t4-list-in-list-padding-left: 30px;
  --t4-list-inset-border-radius: 8px;
  --t4-list-margin-vertical: 35px;
  --t4-list-font-size: 17px;
  --t4-list-chevron-icon-area: 20px;
  --t4-list-item-title-text-color: inherit;
  --t4-list-item-subtitle-text-color: inherit;
  --t4-list-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
  --t4-list-item-subtitle-font-size: 15px;
  --t4-list-item-text-font-size: 15px;
  --t4-list-item-text-line-height: 21px;
  --t4-list-item-after-font-size: inherit;
  --t4-list-item-after-padding: 5px;
  --t4-list-item-min-height: 44px;
  --t4-list-item-media-icons-margin: 5px;
  --t4-list-media-item-padding-vertical: 10px;
  --t4-list-media-item-title-font-weight: 600;
  --t4-list-button-border-color: rgba(0, 0, 0, 0.22);
  /*
  --t4-list-button-pressed-bg-color: rgba(var(--t4-theme-color-rgb), .15);
  */
  --t4-list-group-title-border-color: rgba(0, 0, 0, 0.22);
  --t4-list-group-title-height: 31px;
  --t4-list-group-title-font-size: inherit;
  --t4-list-group-title-font-weight: 400;
  --t4-menu-list-offset: 8px;
  --t4-menu-list-border-radius: 8px;
  --t4-menu-list-item-bg-color: transparent;
  --t4-menu-list-item-text-color: inherit;
  --t4-menu-list-item-min-height: 44px;
  --t4-list-item-border-color: rgba(0, 0, 0, 0.22);
  --t4-list-outline-inset-border-color: rgba(0, 0, 0, 0.22);
  --t4-list-strong-bg-color: #fff;
  --t4-list-item-after-text-color: rgba(0, 0, 0, 0.45);
  --t4-list-item-header-text-color: inherit;
  --t4-list-item-footer-text-color: rgba(0, 0, 0, 0.45);
  --t4-list-item-text-text-color: rgba(0, 0, 0, 0.45);
  --t4-list-group-title-text-color: rgba(0, 0, 0, 0.45);
  --t4-list-group-title-bg-color: #t4t4t4;
  --t4-menu-list-item-selected-text-color: var(--t4-theme-color);
  --t4-menu-list-item-selected-bg-color: rgba(var(--t4-theme-color-rgb), 0.15);
}
.ios .dark,
.ios.dark {
  --t4-list-item-border-color: rgba(255, 255, 255, 0.15);
  --t4-list-outline-inset-color: rgba(255, 255, 255, 0.15);
  --t4-list-strong-bg-color: #1c1c1d;
  --t4-list-item-after-text-color: rgba(255, 255, 255, 0.55);
  --t4-list-item-header-text-color: rgba(255, 255, 255, 0.55);
  --t4-list-item-footer-text-color: rgba(255, 255, 255, 0.55);
  --t4-list-item-text-text-color: rgba(255, 255, 255, 0.55);
  --t4-list-group-title-text-color: rgba(255, 255, 255, 0.55);
  --t4-list-group-title-bg-color: #232323;
  --t4-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);
  --t4-menu-list-item-selected-text-color: inherit;
  --t4-menu-list-item-selected-bg-color: var(--t4-theme-color);
}
.md {
  --t4-list-in-list-padding-left: 24px;
  --t4-list-inset-border-radius: 16px;
  --t4-list-margin-vertical: 32px;
  --t4-list-font-size: 16px;
  --t4-list-chevron-icon-area: 26px;
  --t4-list-item-subtitle-font-size: 14px;
  --t4-list-item-text-font-size: 14px;
  --t4-list-item-text-line-height: 20px;
  --t4-list-item-after-font-size: 14px;
  --t4-list-item-after-padding: 8px;
  --t4-list-item-min-height: 48px;
  --t4-list-item-media-icons-margin: 8px;
  --t4-list-media-item-padding-vertical: 12px;
  --t4-list-media-item-title-font-weight: 500;
  --t4-list-button-border-color: transparent;
  /*
  --t4-list-button-pressed-bg-color: transparent;
  */
  --t4-list-group-title-border-color: transparent;
  --t4-list-group-title-height: 48px;
  --t4-list-group-title-font-size: 16px;
  --t4-list-group-title-font-weight: 400;
  --t4-menu-list-offset: 16px;
  --t4-menu-list-border-radius: 999px;
  --t4-menu-list-item-min-height: 56px;
  --t4-list-link-pressed-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --t4-list-outline-inset-border-color: var(--t4-md-outline);
  --t4-list-item-border-color: var(--t4-md-outline);
  --t4-list-item-title-text-color: var(--t4-md-on-surface);
  --t4-list-item-subtitle-text-color: var(--t4-md-on-surface);
  --t4-list-group-title-bg-color: var(--t4-md-surface-2);
  --t4-list-group-title-text-color: var(--t4-md-on-surface-variant);
  --t4-list-strong-bg-color: var(--t4-md-surface-1);
  --t4-list-item-after-text-color: var(--t4-md-on-surface-variant);
  --t4-list-item-text-text-color: var(--t4-md-on-surface-variant);
  --t4-list-item-header-text-color: var(--t4-md-on-surface-variant);
  --t4-list-item-footer-text-color: var(--t4-md-on-surface-variant);
  --t4-menu-list-item-text-color: var(--t4-md-on-surface-variant);
  --t4-menu-list-item-bg-color: var(--t4-md-surface-1);
  --t4-menu-list-item-selected-text-color: var(--t4-md-on-secondary-container);
  --t4-menu-list-item-selected-bg-color: var(--t4-md-secondary-container);
}

Приклади 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Кнопка списку</div>
      </div>
    </div>

    <div class="page-content">
      <div class="list inset list-strong list-dividers-ios">
        <ul>
          <li><a class="list-button">Кнопка списку 1</a></li>
          <li><a class="list-button">Кнопка списку 2</a></li>
          <li><a class="list-button">Кнопка списку 2</a></li>
        </ul>
      </div>
      <div class="list inset list-strong">
        <ul>
          <li><a class="list-button color-red">Велика червона кнопка</a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

Techno4 Framework