UI komponentlar va variantlar

Tugma, maydon, karta, holatlar, Auto layout, komponent va variantlar

9-sinfUX/UI dizayn va Advanced Front-end6-hafta · 17-dars

Bugun nimalarni o'rganamiz?

Interfeys elementlari

Tugma, maydon, karta

Auto layout

Moslashuvchan element

Komponent va variantlar

Bir marta chizing

Takrorlash

Ikonka uchun qaysi format qulay?

SVG — vektor.

Interfeys elementlari

Tugma, maydon, karta

Tugma holatlari

Tugma holatlari CSS da


.tugma { background: #17e; color: #fff; padding: 12px 24px; border-radius: 8px; }
.tugma:hover { background: #15b; }
.tugma:active { background: #148; }
.tugma:disabled { background: #ccc; color: #666; }

Dizaynda ham har holatni alohida chizing: dasturchi hover va disabled ko'rinishini siz chizmasangiz, o'zi taxmin qiladi.

Mini-test

Tugmaning kursor ustiga kelgandagi holati nima deyiladi?

Hover — kursor ustida.

Auto layout

Moslashuvchan element

Auto layout sozlash

Auto layout → CSS


.tugma {
  display: inline-flex;     /* Hug contents */
  align-items: center;
  gap: 8px;                 /* ikonka va matn orasi */
  padding: 12px 24px;
}
.qidiruv { flex: 1; }       /* Fill container */

Auto layout bilan maket yaratsangiz, kodga o'tkazish ancha oson bo'ladi: Auto layout qiymatlari to'g'ridan-to'g'ri gap va padding ga aylanadi.

Mini-test

Fill container nimani bildiradi?

Fill — ota element ichidagi bo'sh joyni to'ldiradi.

Komponent va variantlar

Bir marta chizing

Komponent yaratish

Komponent nomlari va xossalari


Tugma/Asosiy
  Holat    : oddiy | hover | bosilgan | o'chirilgan
  O'lcham  : kichik | katta
Karta/Kitob
  Holat    : oddiy | tanlangan
  Matn     : nom, muallif (override)

Komponentni yaratgach, uni hech qachon nusxalab «ajratmang» (Detach instance): aks holda bog'lanish uziladi va yangilanishlar kelmaydi.

Mini-test

Main component o'zgarsa, instance larga nima bo'ladi?

Instance lar main componentga bog'liq.

Komponent va instance

Main component

Asl nusxa; o'zgartirilsa hammasi yangilanadi

Instance

Undan olingan nusxa; matn va ikonka o'zgartirilishi mumkin

Bir marta chizing, ko'p marta ishlating.

Atamalar. Bosing

Auto layout

bosing

Elementlarni avtomatik qator/ustunga tizish

Hug contents

bosing

Mazmunga moslashish

Instance

bosing

Komponentdan olingan nusxa

Variant

bosing

Komponentning boshqa holati

Komponent yaratish

1. Element

Tugma, karta chizing.

2. Auto layout

Gap va padding.

3. Komponent

Variantlar qo'shing.

Element holatlari

Holat	Qachon	Ko'rinish
Oddiy (default)	Hech narsa qilinmagan	Asosiy rang
Hover	Kursor ustida	Biroz to'qroq
Bosilgan (pressed)	Bosilganda	Yana to'qroq
O'chirilgan (disabled)	Ishlamaydi	Kulrang
Xato (error)	Noto'g'ri kiritilgan	Qizil chegara

Pastga bosing: holatlar

Kitob kartasi

Karta uchun frame chizing: rasm, nom, muallif va «O'qish» tugmasi.
Auto layout (vertikal, gap 12, padding 16) bering va tugmani komponentga aylantiring.
Kartani komponentga aylantirib, variant Holat = oddiy / tanlangan qo'shing va 3 nusxa joylashtiring.

Tugma yaratish


Har tugmani alohida chizish
Rangni 20 joyda o'zgartirish

Tugma yaratish


Bitta komponent + instance
Rangni bir joyda o'zgartirish

Komponentlar raqamlarda

holat: oddiy, hover, bosilgan, o'chirilgan, xato

— tugma uchun qulay minimal o'lcham

— masofa uchun asos qadam

Komponent — dizayn tizimining g'isht'i.

Amaliy topshiriq 20 daqiqa

OsonHolatlarni sanang: Tugmaning 4 ta holatini yozing.

OsonHover CSS: Tugma hover holatida to'qroq bo'lsin: CSS yozing.

O'rtaAuto layout qiymatlari: Auto layout: gorizontal, gap 8, padding 12/24. CSS ga o'tkazing.

O'rtaHug yoki Fill: Qidiruv maydoni qolgan joyni to'ldirsin: qaysi o'lcham rejimi?

QiyinVariantlar xossalari: Tugma komponenti uchun 2 ta variant xossasini va qiymatlarini yozing.

BonusKarta komponenti: Kitob kartasi komponentining tuzilishini (qatlamlar va xossalar) yozing.

Dars xulosasi

Elementlar

Tugma, maydon, karta va holatlar.

Auto layout

Gap, padding, Hug va Fill.

Komponent

Main, instance va variantlar.

Uyga vazifa: E-kutubxona tugma va kitob kartasi komponentlari.

Keyingi dars: Jamoaviy ishlash va Dev Mode

Sharh, versiya va dasturchiga topshirish

6-hafta · 18-dars