Картки
Макет картки
<div class="card">
<div class="card-header">Header</div>
<div class="card-content">
<!-- вміст картки -->
</div>
<div class="card-footer">Footer</div>
</div>
<div class="card">
<div class="card-header">Header</div>
<div class="card-content card-content-padding">
<!-- вміст картки -->
</div>
<div class="card-footer">Footer</div>
</div>
<div class="card card-outline">
<div class="card-header">Header</div>
<div class="card-content">
<!-- вміст картки -->
</div>
<div class="card-footer">Footer</div>
</div>
● <div class="card">
- Контейнер для карток
○ <div class="card-header">
- Заголовок картки. Здебільшого використовується для відображення назви картки. Необов'язковий
○ <div class="card-footer">
- Нижній колонтитул картки, використовується для додаткової інформації або для спеціальних дій/посилань. Необов'язковий
○ <div class="card-content">
- Основний контейнер для вмісту картки. Обов'язковий
○ <div class="card-content card-content-padding">
- Додаткове заповнення вмісту картки card-content-padding, використовується для додавання додаткового заповнення до вмісту картки card-outline
- додатковий клас, який можна додати до елемента картки, щоб зробити його з контуром
○ no-shadow
- додатковий клас, який можна додати до елемента картки, щоб видалити його тінь
○ no-border
- додатковий клас, який можна додати до елемента картки, щоб видалити його рамку (для картки з контурами)
(display:flex)
, де елементи мають вертикальне вирівнювання по центру. Якщо вам потрібно вирівняти елементи за верхнім або нижнім колонтитулами, ви можете використовувати додаткові класи типографіки typography
, наприклад:
<div class="card-header align-items-flex-start">
- вирівняти елементи заголовка за верхнім рядком заголовка
<div class="card-footer align-items-flex-end">
- вирівняти елементи нижнього колонтитула за нижнім рядком колонтитула
Розширювані картки
Макет розгорнутих карток
<!-- додатковий клас "card-expandable" на картці щоб зроити її розгорнутою -->
<div class="card card-expandable">
<!-- вміст картки -->
<div class="card-content">
<!-- увесь вміст какртки розмістити тут -->
</div>
</div>
● card-expandable
- клас доповнення до елемента картки, щоб зробити його розширюваним
● card-content
- тут єдине місце для розміщення будь-якого вмісту картки
Отже, усі додаткові елементи, як-от card-content-padding, card-header, card-footer
, мають бути розміщені всередині card-content
, коли картку можна розширити.
Розширюваний розмір картки
card-tablet-fullscreen
. В іншому випадку ви можете налаштувати цей розмір за допомогою змінних CSS --t4-card-expandable-tablet-width
і --t4-card-expandable-tablet-height
.
Розширюваний вміст картки (card content
) має ширину "100vw"
у згорнутому (закритому) стані. Це зроблено для покращення продуктивності переходу відкриття/закриття картки, тому вам потрібно подбати про позиціювання її вмісту. Ви можете зробити його ширину вмісту також анімованою та адаптивною, додавши додатковий клас card-expandable-animate-width
до елемента card
, але продуктивність у цьому випадку може бути гіршою.
Приховати елементи під час відкриття/закриття
● card-opened-fade-in
- елемент із таким класом у вмісті картки матиме непрозорість 0, коли картку закрито, і зменшуватиметься до 1, коли картку відкрито.
●card-opened-fade-out
- елемент із таким класом у вмісті картки матиме 1 непрозорість, коли картку закрито, і зменшуватиметься до 0, коли картку відкрито.
Запобігання відкриттю картки
card-prevent-open
:
<div class="card card-expandable">
<div class="card-content">
...
<!-- Додайте до елемента "card-prevent-open" і клікніть на ньому, щоб відкрити розгорнуту картку -->
<a href="#" class="button card-prevent-open">Button</a>
</div>
</div>
Заставка картки, що розгортається
У деяких макетах вам може знадобитися розмістити такий елемент фону у спеціальному місці. У цьому випадку нам потрібно вручну додати цей елемент і вказати його в атрибуті data-backdrop-el
картки:
<div class="block">
<!-- власний елемент фону -->
<div class="card-backdrop custom-backdrop"></div>
<!-- передати свій селектор CSS в атрибут data-backdrop-el -->
<div class="card card-expandable" data-backdrop-el=".custom-backdrop">
...
</div>
</div>
Методи застосунку Картки
app.card.open(el, animate)
- відкрити розширювану картку
● el - HTMLElement or string
(за допомогою селектора CSS). Розширювана картка для відкриття.
● animate - boolean.
Відкриває розгорнуту картку з анімацією. За замовчуванням — true
app.card.close(el, animate)
- закрити розширювану картку
● el - HTMLElement or string
(за допомогою селектора CSS). Розширювана картка для закриття.
● animate - boolean.
Закриває розгорнуту картку з анімацією. За замовчуванням — true
app.card.toggle(el, animate)
- перемкнути розширювану картку
● el - HTMLElement or string
(за допомогою селектора CSS). Розширювана картка для перемикання.
● animate - boolean.
Перемкнути розгорнуту картку з анімацією. За замовчуванням — true
Параметри застосунка Картки
Параметр | За замовчуванням | Опис | Тип |
---|---|---|---|
hideNavbarOnOpen | true | Приховає панель навігації на відкритій картці, що розгортається. | boolean |
hideToolbarOnOpen | true | Приховає панель інструментів на відкритій картці, що розширюється | boolean |
hideStatusbarOnOpen | true | Приховає «Панель стану» (або повністю приховає панель навігації) на відкритій картці, що розширюється. | boolean |
swipeToClose | true | Дозволяє закривати картку, що розширюється, за допомогою свайпу пальцем. | boolean |
backdrop | true | Вмикає розширюваний фоновий шар картки. | boolean |
closeByBackdropClick | true | Якщо ввімкнути цю функцію, картку, що розгортається, буде закрито після клацання на фоні. | boolean |
var app = new Techno4({
card: {
hideNavbarOnOpen: false,
closeByBackdropClick: false,
},
});
data-
, включаючи додатковий атрибут data-animate
:<!-- ця картка відкриється без анімації -->
<div class="card card-expandable" data-animate="false">
...
</div>
<!-- ця картка відкриється без фону -->
<div class="card card-expandable" data-backdrop="false">
...
</div>
Контрольні картки з посиланнями
«card-open»
до будь-якого елемента HTML (бажано для посилання)
● Щоб закрити розширення, нам потрібно додати клас "card-close"
до будь-якого елемента HTML (бажано для посилання)
● Якщо у вас є більше ніж одна розширювана картка в DOM, вам потрібно вказати відповідну картку за допомогою додаткового атрибута data-card=".my-card
у цьому елементі HTML
Події Картки
Події DOM
Подія | Об'єкт | Опис |
---|---|---|
card:beforeopen | Card Element <div class="card"> | Подія буде ініційована безпосередньо перед тим, як картка, що розгортається, почне свою початкову анімацію. event.detail.prevent містить функцію, яка запобігає відкриттю картки під час виклику |
card:open | Card Element <div class="card"> | Подія буде ініційована, коли розгорнута картка почне свою початкову анімацію |
card:opened | Card Element <div class="card"> | Подію буде ініційовано після завершення початкової анімації розгорнутої картки |
card:close | Card Element <div class="card"> | Подія буде ініційована, коли розгорнута картка почне свою анімацію закриття |
card:close | Card Element <div class="card"> | Подія буде ініційована, коли розгорнута картка почне свою анімацію закриття |
card:closed | Card Element <div class="card"> | Подія буде ініційована після того, як розгорнута картка завершить свою анімацію закриття |
Події екземплярів застосунку
Подія | Аргумент | Опис |
---|---|---|
cardBeforeOpen | (el, prevent) | Подія буде ініційована безпосередньо перед тим, як картка, що розгортається, почне свою початкову анімацію. prevent містить функцію, яка запобігатиме відкриттю розширюваної картки під час виклику |
cardOpen | (el) | Подія буде ініційована, коли розгорнута картка почне свою початкову анімацію. В якості аргументу обробник події отримав HTML-елемент картки |
cardOpened | (el) | Подію буде ініційовано після завершення початкової анімації розгорнутої картки. В якості аргументу обробник події отримав HTML-елемент картки |
cardClose | (el) | Подія буде ініційована, коли розгорнута картка почне свою анімацію закриття. В якості аргументу обробник події отримав HTML-елемент картки |
cardClosed | (el) | Подія буде ініційована після того, як розгорнута картка завершить свою анімацію закриття. В якості аргументу обробник події отримав HTML-елемент картки |
Змінні CSS
:root {
--t4-card-margin-horizontal: 16px;
--t4-card-margin-vertical: 16px;
--t4-card-content-padding-horizontal: 16px;
--t4-card-content-padding-vertical: 16px;
--t4-card-border-radius: 4px;
--t4-card-font-size: inherit;
--t4-card-header-text-color: inherit;
--t4-card-header-font-weight: 400;
--t4-card-header-padding-horizontal: 16px;
--t4-card-footer-font-weight: 400;
--t4-card-footer-font-size: inherit;
--t4-card-footer-padding-horizontal: 16px;
--t4-card-expandable-font-size: 16px;
--t4-card-expandable-tablet-width: 670px;
--t4-card-expandable-tablet-height: 670px;
--t4-card-bg-color: #fff;
--t4-card-outline-border-color: rgba(0, 0, 0, 0.12);
--t4-card-header-border-color: rgba(0, 0, 0, 0.1);
--t4-card-footer-border-color: rgba(0, 0, 0, 0.1);
--t4-card-expandable-bg-color: #fff;
}
:root .dark,
:root.dark {
--t4-card-bg-color: #1c1c1d;
--t4-card-expandable-bg-color: #1c1c1d;
--t4-card-outline-border-color: rgba(255, 255, 255, 0.15);
--t4-card-header-border-color: rgba(255, 255, 255, 0.15);
--t4-card-footer-border-color: rgba(255, 255, 255, 0.15);
--t4-card-footer-text-color: rgba(255, 255, 255, 0.55);
}
.ios {
--t4-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
--t4-card-header-font-size: 17px;
--t4-card-header-padding-vertical: 10px;
--t4-card-header-min-height: 44px;
--t4-card-footer-text-color: rgba(0, 0, 0, 0.45);
--t4-card-footer-padding-vertical: 10px;
--t4-card-footer-min-height: 44px;
--t4-card-expandable-margin-horizontal: 20px;
--t4-card-expandable-margin-vertical: 30px;
--t4-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
--t4-card-expandable-border-radius: 15px;
--t4-card-expandable-tablet-border-radius: 5px;
--t4-card-expandable-header-font-size: 27px;
--t4-card-expandable-header-font-weight: bold;
}
.md {
--t4-card-box-shadow: var(--t4-elevation-1);
--t4-card-header-font-size: 16px;
--t4-card-header-padding-vertical: 4px;
--t4-card-header-min-height: 48px;
--t4-card-footer-text-color: rgba(0, 0, 0, 0.54);
--t4-card-footer-padding-vertical: 4px;
--t4-card-footer-min-height: 48px;
--t4-card-expandable-margin-horizontal: 12px;
--t4-card-expandable-margin-vertical: 24px;
--t4-card-expandable-box-shadow: var(--t4-elevation-10);
--t4-card-expandable-border-radius: 8px;
--t4-card-expandable-tablet-border-radius: 4px;
--t4-card-expandable-header-font-size: 24px;
--t4-card-expandable-header-font-weight: 500;
}
.aurora {
--t4-card-border-radius: 8px;
--t4-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
--t4-card-header-font-size: 16px;
--t4-card-header-font-weight: bold;
--t4-card-header-padding-vertical: 8px;
--t4-card-header-min-height: 48px;
--t4-card-footer-text-color: rgba(0, 0, 0, 0.6);
--t4-card-footer-padding-vertical: 8px;
--t4-card-footer-min-height: 48px;
--t4-card-expandable-margin-horizontal: 10px;
--t4-card-expandable-margin-vertical: 20px;
--t4-card-expandable-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
--t4-card-expandable-border-radius: 8px;
--t4-card-expandable-tablet-border-radius: 4px;
--t4-card-expandable-header-font-size: 24px;
--t4-card-expandable-header-font-weight: bold;
}
Приклади
<template>
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">Cards</div>
</div>
</div>
<div class="page-content">
<div class="block-title">Simple Cards</div>
<div class="card">
<div class="card-content card-content-padding">Це проста картка зі звичайним текстом, але картки також можуть
містити власний верхній, нижній колонтитул, список, зображення або будь-який інший елемент.</div>
</div>
<div class="card">
<div class="card-header">Card header</div>
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display
card titles and footers for additional information or just for custom actions.</div>
<div class="card-footer">Card Footer</div>
</div>
<div class="card">
<div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna
justo. </div>
</div>
<div class="block-title">Outline Cards</div>
<div class="card card-outline">
<div class="card-content card-content-padding">This is a simple card with plain text, but cards can also
contain their own header, footer, list view, image, or any other element.</div>
</div>
<div class="card card-outline">
<div class="card-header">Card header</div>
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display
card titles and footers for additional information or just for custom actions.</div>
<div class="card-footer">Card Footer</div>
</div>
<div class="card card-outline">
<div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna
justo. </div>
</div>
<div class="block-title">Styled Cards</div>
<div class="card demo-card-header-pic">
<div style="background-image:url(https://cdn.Techno4.io/placeholder/nature-1000x600-3.jpg)"
class="card-header align-items-flex-end">Journey To Mountains</div>
<div class="card-content card-content-padding">
<p class="date">Posted on January 21, 2015</p>
<p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus
quis nibh hendrerit...</p>
</div>
<div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Read more</a></div>
</div>
<div class="card demo-card-header-pic">
<div style="background-image:url(https://cdn.Techno4.io/placeholder/people-1000x600-6.jpg)"
class="card-header align-items-flex-end">Lorem Ipsum</div>
<div class="card-content card-content-padding">
<p class="date">Posted on January 21, 2015</p>
<p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus
quis nibh hendrerit...</p>
</div>
<div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Read more</a></div>
</div>
<div class="block-title">Facebook Cards</div>
<div class="card demo-facebook-card">
<div class="card-header">
<div class="demo-facebook-avatar"><img src="https://cdn.Techno4.io/placeholder/people-68x68-1.jpg"
width="34" height="34" /></div>
<div class="demo-facebook-name">John Doe</div>
<div class="demo-facebook-date">Monday at 3:47 PM</div>
</div>
<div class="card-content"> <img src="https://cdn.Techno4.io/placeholder/nature-1000x700-8.jpg"
width="100%" /></div>
<div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Comment</a><a href="#"
class="link">Share</a></div>
</div>
<div class="card demo-facebook-card">
<div class="card-header">
<div class="demo-facebook-avatar"><img src="https://cdn.Techno4.io/placeholder/people-68x68-1.jpg"
width="34" height="34" /></div>
<div class="demo-facebook-name">John Doe</div>
<div class="demo-facebook-date">Monday at 2:15 PM</div>
</div>
<div class="card-content card-content-padding">
<p>What a nice photo i took yesterday!</p><img
src="https://cdn.Techno4.io/placeholder/nature-1000x700-8.jpg" width="100%" />
<p class="likes">Likes: 112 Comments: 43</p>
</div>
<div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Comment</a><a href="#"
class="link">Share</a></div>
</div>
<div class="block-title">Cards With List View</div>
<div class="card">
<div class="card-content">
<div class="list links-list no-ios-edges">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">New Releases:</div>
<div class="card-content">
<div class="list media-list no-ios-edges">
<ul>
<li class="item-content">
<div class="item-media">
<img src="https://cdn.Techno4.io/placeholder/fashion-88x88-4.jpg" width="44" />
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Yellow Submarine</div>
</div>
<div class="item-subtitle">Beatles</div>
</div>
</li>
<li class="item-content">
<div class="item-media">
<img src="https://cdn.Techno4.io/placeholder/fashion-88x88-5.jpg" width="44" />
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Don't Stop Me Now</div>
</div>
<div class="item-subtitle">Queen</div>
</div>
</li>
<li class="item-content">
<div class="item-media">
<img src="https://cdn.Techno4.io/placeholder/fashion-88x88-6.jpg" width="44" />
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Billie Jean</div>
</div>
<div class="item-subtitle">Michael Jackson</div>
</div>
</li>
</ul>
</div>
</div>
<div class="card-footer"> <span>January 20, 2015</span><span>5 comments</span></div>
</div>
<div class="block-title">Expandable Cards</div>
<div class="card card-expandable">
<div class="card-content">
<div class="bg-color-red" style="height: 300px">
<div class="card-header text-color-white display-block">Techno4<br />
<small style="opacity: 0.7">Build Mobile Apps</small>
</div>
<a href="#" class="link card-close card-opened-fade-in color-white"
style="position: absolute; right: 15px; top: 15px">
<i class="icon t4-icons">xmark_circle_fill</i>
</a>
</div>
<div class="card-content-padding">
<p>Techno4 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web
apps with iOS or Android (Material) native look and feel. It is also an indispensable prototyping apps
tool to show working app prototype as soon as possible in case you need to.</p>
<p>The main approach of the Techno4 is to give you an opportunity to create iOS and Android
(Material) apps with HTML, CSS and JavaScript easily and clear. Techno4 is full of freedom. It
doesn't limit your imagination or offer ways of any solutions somehow. Techno4 gives you freedom!
</p>
<p>Techno4 is not compatible with all platforms. It is focused only on iOS and Android (Material) to
bring the best experience and simplicity.</p>
<p>Techno4 is definitely for you if you decide to build iOS and Android hybrid app (Cordova or
Capacitor) or web app that looks like and feels as great native iOS or Android (Material) apps.</p>
</div>
</div>
</div>
<div class="card card-expandable">
<div class="card-content">
<div class="bg-color-yellow" style="height: 300px">
<div class="card-header text-color-black display-block">Techno4<br />
<small style="opacity: 0.7">Build Mobile Apps</small>
</div>
<a href="#" class="link card-close card-opened-fade-in color-black"
style="position: absolute; right: 15px; top: 15px">
<i class="icon t4-icons">xmark_circle_fill</i>
</a>
</div>
<div class="card-content-padding">
<p>Techno4 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web
apps with iOS or Android (Material) native look and feel. It is also an indispensable prototyping apps
tool to show working app prototype as soon as possible in case you need to.</p>
<p>The main approach of the Techno4 is to give you an opportunity to create iOS and Android
(Material) apps with HTML, CSS and JavaScript easily and clear. Techno4 is full of freedom. It
doesn't limit your imagination or offer ways of any solutions somehow. Techno4 gives you freedom!
</p>
<p>Techno4 is not compatible with all platforms. It is focused only on iOS and Android (Material) to
bring the best experience and simplicity.</p>
<p>Techno4 is definitely for you if you decide to build iOS and Android hybrid app (Cordova or
Capacitor) or web app that looks like and feels as great native iOS or Android (Material) apps.</p>
</div>
</div>
</div>
</div>
</div>
</template>
<style>
.demo-card-header-pic .card-header {
height: 40vw;
background-size: cover;
background-position: center;
color: #fff;
}
.demo-card-header-pic .card-content-padding .date {
color: #8e8e93;
}
.demo-facebook-card .card-header {
display: block;
padding: 10px;
}
.demo-facebook-card .demo-facebook-avatar {
float: left;
}
.demo-facebook-card .demo-facebook-name {
margin-left: 44px;
font-size: 14px;
font-weight: 500;
}
.demo-facebook-card .demo-facebook-date {
margin-left: 44px;
font-size: 13px;
color: #8e8e93;
}
.demo-facebook-card .card-footer {
background: #fafafa;
}
.demo-facebook-card .card-footer a {
color: #81848b;
font-weight: 500;
}
.demo-facebook-card .card-content img {
display: block;
}
.demo-facebook-card .card-content-padding {
padding: 15px 10px;
}
.demo-facebook-card .card-content-padding .likes {
color: #8e8e93;
}
</style>
Techno4 Framework
- Get Started
- Introduction
- Kitchen Sink
- Installation
- Package Structure
- App HTML Layout
- RTL Layout
- Initialize App
- Events
- Router Component
- Routes
- Store
- App/Core
- Accordion/Collapsible
- Action Sheet
- Area chart
- Autocomplete
- Badge
- Block/Content Block
- Breadcrumbs
- Button
- Calendar/Date Picker
- Cards
- Checkbox
- Chips
- Color Picker
- Contact List
- Data Table
- Dialog
- Floating action button
- Form
- Gauge
- Icons
- Inputs / Form Inputs
- Grid /Layout Grid
- Link
- List Button
- List View
- List Index
- Login Screen
- Menu List
- Messagebar
- Navbar
- Messages
- Notification
- Panel/Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar