Kayan işlem düğmesi (FAB) bileşeni oluşturma

Renk uyarlanabilir, duyarlı ve erişilebilir FAB bileşenleri oluşturmaya ilişkin temel bir genel bakış.

Adam Argyle

Bu yayında, renge göre uyarlanabilen, duyarlı ve erişilebilir FAB bileşenlerinin nasıl oluşturulacağıyla ilgili düşüncelerimi paylaşmak istiyorum. Demoyu deneyin ve kaynağı görüntüleyin.

Videoyu tercih ediyorsanız bu yayının YouTube sürümünü burada bulabilirsiniz:

Genel bakış

FAB'ler mobil cihazlarda masaüstüne göre daha yaygın olsa da her iki senaryoda da yaygındır. Birincil eylemleri göz önünde tutarak uygun ve her yerde kullanılabilir olmalarını sağlarlar. Bu kullanıcı deneyimi stili, Materyal Kullanıcı Arayüzü ile ün kazanmıştır. Kullanım ve yerleştirme önerilerine buradan ulaşabilirsiniz.

Öğeler ve stiller

Bu kontrollerin HTML'si, bir kapsayıcı öğe ve bir veya daha fazla düğmeden oluşan bir kümeyi içerir. Kapsayıcı, FAB'ları görüntü alanı içine yerleştirir ve düğmeler arasındaki boşluğu yönetir. Düğmeler mini veya varsayılan olabilir. Bu da, birincil ve ikincil işlemleri birbirinden güzel bir şekilde ayırmanızı sağlar.

FAB kapsayıcısı

Bu öğe normal bir <div> olabilir ancak görme engelli kullanıcılarımıza bir iyilik yapıp bu kapsayıcının amacını ve içeriğini açıklamak için bazı faydalı özelliklerle etiketleyelim.

FAB işaretlemesi

CSS'nin stil kazandırması için bir .fabs sınıfıyla başlayın. Ardından, yalnızca genel bir kapsayıcı değil, aynı zamanda adlandırılmış ve amaca yönelik bir kapsayıcı olması için role="group" ve aria-label öğelerini ekleyin.

<div class="fabs" role="group" aria-label="Floating action buttons">
  <!-- buttons will go here -->
</div>

FAB stili

FAB'lar, kolaylık sağlamak için her zaman görüntü alanında yer alır. Bu, fixed konumu için harika bir kullanım alanıdır. Bu görüntü alanında inset-block ve inset-inline kullanmayı seçtim. Böylece konum, kullanıcının belge modunu (sağdan sola veya soldan sağa gibi) tamamlayacak. Özel özellikler, tekrarı önlemek ve görüntü alanının alt ve yan kenarlarından eşit mesafe sağlamak için de kullanılır:

.fabs {
  --_viewport-margin: 2.5vmin;

  position: fixed;
  z-index: var(--layer-1);

  inset-block: auto var(--_viewport-margin);
  inset-inline: auto var(--_viewport-margin);
}

Daha sonra, container ekranını flex veriyorum ve düzen yönünü column-reverse olarak değiştiriyorum. Bu işlem, alt öğeleri birbirlerinin (sütun) üzerine yığılır ve ayrıca görsel sıralamalarını tersine çevirir. Bu, ilk odaklanılabilir öğeyi üst öğe yerine alttaki öğe haline getirir. Bu öğe, HTML belgesine göre odağın normal şekilde yerleştirildiği yerdir. Birincil işlemin mini düğmelerden daha büyük olması, gören kullanıcılara bunun birincil işlem olduğunu gösterir ve klavye kullanıcıları bunu kaynaktaki ilk öğe olarak odaklar. Bu nedenle, görsel sıranın tersine çevrilmesi, görmeye devam eden kullanıcılar ve klavye kullanıcıları için deneyimi bir araya getirir.

.fabs {
  …

  display: flex;
  flex-direction: column-reverse;
  place-items: center;
  gap: var(--_viewport-margin);
}

Ortalama işlemi place-items ile gerçekleştirilir ve gap, kapsayıcıya yerleştirilen FAB düğmelerinin arasına boşluk ekler.

FAB düğmeleri

Bazı düğmeleri her şeyin üzerinde kayıyormuş gibi göstermenin zamanı geldi.

Varsayılan FAB

Stil oluşturmak için kullanılan ilk düğme, varsayılan düğmedir. Bu, tüm FAB düğmeleri için temel görevi görür. Daha sonra, bu temel stillerden mümkün olduğunca az değişiklik yaparken alternatif bir görünüm elde eden bir varyant oluşturacağız.

FAB işaretlemesi

<button> öğesi doğru seçimdir. Harika bir fare, dokunma ve klavye kullanıcı deneyimi sunduğu için, bununla başlayacağız. Bu işaretlemenin en önemli özelliği, simgeyi aria-hidden="true" kullanan ekran okuyucu kullanıcılarından gizlemek ve gerekli etiket metnini <button> işaretlemesine eklemektir. Bu gibi durumlarda etiket eklerken, fare kullanıcılarının simgenin neyi iletmeyi beklediği hakkında bilgi alabilmeleri için title eklemeyi de tercih ederim.

<button data-icon="plus" class="fab" title="Add new action" aria-label="Add new action">
  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">...</svg>
</button>

FAB stili

Düğmenin ilk tanımlayıcı özellikleri olan düğme, güçlü gölgesi olan dolgulu yuvarlak bir düğmeye dönüştürelim:

.fab {
  --_size: 2rem;

  padding: calc(var(--_size) / 2);
  border-radius: var(--radius-round);
  aspect-ratio: 1;
  box-shadow: var(--shadow-4);
}

Şimdi renk ekleyelim. Daha önce GUI Meydan Okumalarında kullandığımız bir stratejiyi kullanacağız. Açık ve koyu renkleri statik olarak tutan, açıkça adlandırılmış bir özel özellik grubu ve ardından kullanıcının renklerle ilgili sistem tercihine bağlı olarak açık veya koyu değişken olarak ayarlanacak uyarlanabilir bir özel özellik oluşturun:

.fab {
  …

  /* light button and button hover */
  --_light-bg: var(--pink-6);
  --_light-bg-hover: var(--pink-7);

  /* dark button and button hover */
  --_dark-bg: var(--pink-4);
  --_dark-bg-hover: var(--pink-3);

  /* adaptive variables set to light by default */
  --_bg: var(--_light-bg);

  /* static icon colors set to the adaptive foreground variable */
  --_light-fg: white;
  --_dark-fg: black;
  --_fg: var(--_light-fg);

  /* use the adaptive properties on some styles */
  background: var(--_bg);
  color: var(--_fg);

  &:is(:active, :hover, :focus-visible) {
    --_bg: var(--_light-bg-hover);

    @media (prefers-color-scheme: dark) {
      --_bg: var(--_dark-bg-hover);
    }
  }

  /* if users prefers dark, set adaptive props to dark */
  @media (prefers-color-scheme: dark) {
    --_bg: var(--_dark-bg);
    --_fg: var(--_dark-fg);
  }
}

Ardından, SVG simgelerinin alana sığmasına yardımcı olmak için birkaç stil ekleyin.

.fab {
  …

  & > svg {
    inline-size: var(--_size);
    block-size: var(--_size);
    stroke-width: 3px;
  }
}

Son olarak, etkileşim için kendi görsel geri bildirimimizi eklediğimizden dokunma vurgulamasını düğmeden kaldırın:

.fab {
  -webkit-tap-highlight-color: transparent;
}

Mini FAB

Bu bölümün amacı, FAB düğmesi için bir varyant oluşturmaktır. FAB'lardan bazılarını varsayılan işlemden daha küçük yaparak kullanıcının en sık gerçekleştirdiği işlemi destekleyebiliriz.

Mini FAB işaretlemesi

HTML, FAB ile aynıdır, ancak CSS'yi varyanta bağlamak için ".mini" sınıfı eklenir.

<button data-icon="heart" class="fab mini" title="Like action" aria-label="Like action">
  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">...</svg>
</button>

Mini FAB stili

Özel mülklerin kullanımı sayesinde, gereken tek değişiklik --_size değişkeninde düzenleme yapmaktır.

.fab.mini {
  --_size: 1.25rem;
}

Erişilebilirlik

FAB'larda erişilebilirlik için unutulmaması gereken en önemli nokta, sayfanın klavye akışı içine yerleştirmedir. Bu demo yalnızca FAB'ları içerir. Klavye sırası ve akışı açısından rekabet edilecek hiçbir şey yoktur. Yani, demonun anlamlı bir klavye akışı gösterme fırsatı yoktur. Odaklanmak üzere birbiriyle rekabet eden öğelerin olduğu bir senaryoda, kullanıcının FAB düğmesi akışına girmesinin gerektiği bu akışın neresinde olacağını derinlemesine düşünmenizi öneririm.

Kullanıcı FAB kapsayıcısına odaklandıktan sonra, ekran okuyucu kullanıcılarına odaklandıkları öğenin içeriği hakkında bilgi veren role="group" ve aria-label="floating action buttons" özelliklerini ekledik. Stratejik olarak ilk önce varsayılan FAB'yi yerleştirdim; böylece kullanıcılar ilk önce birincil işlemi bulur. Ardından flex-direction: column-reverse; ile en alttaki birincil düğmeyi kullanıcının parmaklarına yakın olacak şekilde görsel olarak sıralıyorum. Bu iyi bir kazanç, çünkü varsayılan düğme görsel olarak belirgin ve klavye kullanıcılarına da ilk sırada geliyor, bu da onlara çok benzer deneyimler sunuyor.

Son olarak, simgelerinizi ekran okuyucu kullanıcılarından gizlemeyi ve gizem olmaması için onlara düğme için bir etiket sağlamayı unutmayın. Bu işlem HTML'de zaten <svg> için aria-hidden="true" ve <button>'lerde aria-label="Some action" ile yapıldı.

Animasyonlar

Kullanıcı deneyimini geliştirmek için çeşitli animasyon türleri eklenebilir. Diğer GUI Yarışmalarında olduğu gibi, daha az hareket ve eksiksiz bir hareket deneyimi isteğini koruyabilmek için birkaç özel özellik oluşturacağız. Varsayılan olarak stiller kullanıcının daha az hareket istediğini varsayar ve prefers-reduced-motion medya sorgusu kullanıldığında geçiş değeri tam hareketli olarak değiştirilir.

Özel özellikler içeren azaltılmış hareket stratejisi

Şu CSS'de üç özel özellik oluşturulur: --_motion-reduced, --_motion-ok ve --_transition. Kullanıcının tercihi doğrultusunda ilk iki uygun geçiş geçişi, son değişken --_transition ise sırasıyla --_motion-reduced veya --_motion-ok olarak ayarlanır.

.fab {
  /* box-shadow and background-color can safely be transitioned for reduced motion users */
  --_motion-reduced:
    box-shadow .2s var(--ease-3),
    background-color .3s var(--ease-3);

  /* add transform and outline-offset for users ok with motion */
  --_motion-ok:
    var(--_motion-reduced),
    transform .2s var(--ease-3),
    outline-offset 145ms var(--ease-2);

  /* default the transition styles to reduced motion */
  --_transition: var(--_motion-reduced);

  /* set the transition to our adaptive transition custom property*/
  transition: var(--_transition);

  /* if motion is ok, update the adaptive prop to the respective transition prop */
  @media (prefers-reduced-motion: no-preference) {
    --_transition: var(--_motion-ok);
  }
}

Yukarıdaki bilgiler sağlandıktan sonra box-shadow, background-color, transform ve outline-offset üzerinde yapılan değişikliklerin geçişi gerçekleştirilebilir. Böylece kullanıcılara etkileşimlerinin alındığına dair olumlu bir kullanıcı arayüzü geri bildirimi sağlanır.

Ardından, biraz ayarlama yaparak :active durumuna biraz daha renk katın translateY. Böylece düğme, basılmış güzel bir efekt oluşturur:

.fab {
  …

  &:active {
    @media (prefers-reduced-motion: no-preference) {
      transform: translateY(2%);
    }
  }
}

Son olarak, düğmelerdeki SVG simgelerindeki değişiklikleri değiştirin:

.fab {
  …

  &[data-icon="plus"]:hover > svg {
    transform: rotateZ(.25turn);
  }

  & > svg {
    @media (prefers-reduced-motion: no-preference) {
      will-change: transform;
      transition: transform .5s var(--ease-squish-3);
    }
  }
}

Sonuç

Nasıl yaptığımı artık bildiğine göre siz de nasıl yapardınız? 🙂

Yaklaşımlarımızı çeşitlendirelim ve web'de geliştirme yapmanın tüm yollarını öğrenelim.

Bir demo oluşturun, bana tweet atın bağlantıları, aşağıdaki topluluk remiksleri bölümüne ekleyeceğim.

Topluluk remiksleri

Henüz burada görülecek bir şey yok.

Kaynaklar

• GitHub'daki kaynak kodu