Иди на текст

Компоненте

Компонента = поновно употребљив UI елемент

Зашто су важне:

  • Направиш једном, користиш на више места
  • Промениш на једном месту → аутоматски се мења свуда
  • Конзистентност дизајна
  • Убрзава значајно рад...

Терминологија:

  • Main Component (Master) - оригинал, главна компонента
  • Instance - инстанца, копија компоненте која је повезана са Main-ом
  • Property - опција која мења изглед (нпр. боја дугмета)
  • Variant - различита верзија компоненте

Креирање компоненте

Корак 1: Креирај основно дугме

  1. Користи дугме из Вежбе 1 (са Auto Layout-ом)
  2. Текст: "Дугме", Padding: 24px х 12px
  3. Fill: #4A90E2, Corner radius: 8px

Корак 2: Направи компоненту

  1. Селектуј дугме
  2. Притисни Ctrl + Alt + K (или кликни икону дијаманта у toolbar-у)
  3. Дугме је сада компонента! Види се љубичасти оквир.
  4. Преименуј у "Button/Primary"

Корак 3: Креирај инстанце

  1. Копирај компоненту (Ctrl + C)
  2. Залепи је 3 пута (Ctrl + V)
  3. Види се да су љубичасте са празним дијамантом = инстанце

Корак 4: Промени текст на инстанцама

  1. Double-click у текст прве инстанце
  2. Промени у "Купи сада"
  3. Друга инстанца: "Сазнај више"
  4. Трећа инстанца: "Контактирај нас"

Корак 5: Промени главну компоненту

  1. Нађи Main Component (љубичаста са пуним дијамантом)
  2. Промени боју у #2ECC71 (зелена)
  3. Све инстанце су аутоматски промениле боју!

Варијанте компоненти

Корак 1: Креирај Primary дугме (Main Component)

  1. Креирај дугме са Auto Layout-ом
  2. Текст: "Дугме"
  3. Fill: #4A90E2, Text color: #FFFFFF
  4. Направи компоненту (Ctrl + Alt + K)

Корак 2: Дуплирај за варијанту два

  1. Копирај Main Component
  2. Промени:
  3. Fill: #FFFFFF
  4. Stroke: 2px, #4A90E2
  5. Text color: #4A90E2

Корак 3: Дуплирај за варијанту три

  1. Копирај Main Component
  2. Промени:
  3. Fill: #E74C3C (црвена)
  4. Text color: #FFFFFF

Корак 4: Комбинуј у варијанте

  1. Селектуј сва 3 дугмета (држи Shift)
  2. Десни клик → "Combine as variants"
  3. Направио си Component Set!

Корак 5: Преименуј варијанте

  1. Селектуј прву варијанту
  2. У Design panel-у види "Properties"
  3. Кликни на "Property 1" → преименуј у "Tip"
  4. Кликни на "Default" → преименуј у "Prva"
  5. Понови за остале: "Druga", "Treca"

Корак 6: Користи варијанте

  1. Креирај instance (Ctrl + C, Ctrl + V)
  2. Селектуј instance
  3. У Design panel-у види dropdown "Tip"
  4. Мењај између Prva, Druga, Treca

Додај Size варијанту

  1. Вратиш се на Component Set
  2. Дуплирај све 3 варијанте
  3. Код нових промени padding на 16px х 8px (мање дугме)
  4. Селектуј све
  5. У Properties додај нову: "Velicina"
  6. Преименуј у "Veliko" и "Malo"

Сада имаш

  • Tip: Prva, Druga, Treca
  • Velicina: Veliko, Malo
  • Укупно: 6 варијанти (3 × 2)