Tworzenie komponentu pływającego przycisku polecenia (FAB)

Podstawowy przegląd sposobów tworzenia komponentów FAB dostosowanych do kolorów, dostosowanych do urządzeń mobilnych i dostępnych.

Adam Argyle

W tym poście chcę podzielić się z Wami swoimi przemyśleniami na temat tworzenia komponentów FAB, które dostosowują się do kolorów, są responsywne i dostępne. Wypróbuj wersję demonstracyjną i wyświetl kod źródłowy.

Jeśli wolisz film, oto wersja tego posta w YouTube:

Omówienie

Przyciski FAB są częściej używane na urządzeniach mobilnych niż na komputerach, ale są powszechne w obu tych scenariuszach. Ułatwiają one dostęp do głównych działań, dzięki czemu są one wygodne i wszechobecne. Ten styl został spopularyzowany przez Material UI, a zalecenia dotyczące jego używania i umieszczania znajdziesz tutaj.

Elementy i style

Kod HTML tych elementów sterujących zawiera element kontenera i co najmniej 1 przycisk. Kontener umieszcza przyciski FAB w widocznym obszarze i zarządza odstępem między nimi. Przyciski mogą być małe lub domyślne, co zapewnia większą różnorodność między działaniami głównymi i dodatkowymi.

Kontener przycisku typu FAB

Ten element może być zwykłym <div>, ale zróbmy przysługę naszym niewidomym użytkownikom i oznaczmy go przydatnymi atrybutami, aby wyjaśnić cel i zawartość tego kontenera.

Markup przycisków typu FAB

Zacznij od klasy .fabs, aby umożliwić stylowanie za pomocą CSS, a następnie dodaj role="group" i aria-label, aby kontener nie był tylko ogólnym kontenerem, ale miał nazwę i cel.

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

Styl przycisku typu FAB

Aby przyciski były wygodne w użyciu, zawsze pozostają w widocznym obszarze. To świetny przykład zastosowania pozycji fixed. W tej pozycji w widoku użyłem pozycji inset-block i inset-inline, aby pozycja pasowała do trybu dokumentu użytkownika, np. od prawej do lewej lub od lewej do prawej. Właściwości niestandardowe są też używane do zapobiegania powtórzeniom i zapewnienia jednakowej odległości od dolnej krawędzi i krawędzi bocznych widoku:

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

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

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

Następnie nadaję kontenerowi wyświetlanie flex i zmieniam kierunek układu na column-reverse. Dzięki temu elementy podrzędne są ułożone jeden na drugim (kolumna) i ich kolejność wizualna jest odwrócona. W efekcie pierwszy element, który można zaznaczyć, jest elementem dolnym, a nie górnym, co jest zgodne z normalnym zachowaniem dokumentu HTML. Odwrócenie kolejności wizualnej ujednolica działanie dla użytkowników z dostępem do wzroku i użytkowników korzystających z klawiatury, ponieważ stylizacja głównego działania jako większa niż małe przyciski wskazuje użytkownikom z dostępem do wzroku, że jest to główne działanie, a użytkownicy korzystający z klawiatury będą mogli je wybrać jako pierwszy element w źródle.

Widok 2 przycisków FAB z przesłonięciem ich układu siatki w DevTools Wyświetla odstęp między nimi za pomocą pasków, a także oblicza ich wysokość i szerokość.

.fabs {
  …

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

Wyśrodkowanie jest obsługiwane za pomocą funkcji place-items, a gap dodaje odstęp między wszystkimi przyciskami FAB umieszczonymi w kontenerze.

Przyciski typu FAB

Czas nadać niektórym przyciskom styl, który sprawi, że będą wyglądać jak pływające nad wszystkim.

Domyślny przycisk FAB

Pierwszym przyciskiem, który należy sformatować, jest przycisk domyślny. Będzie ona stanowić podstawę wszystkich przycisków typu FAB. Później utworzymy wariant, który będzie miał alternatywny wygląd, przy jak najmniejszej możliwej modyfikacji tych stylów bazowych.

Markup przycisku typu FAB

Prawidłowy jest element <button>. Zaczniemy od tego, ponieważ zapewnia ono świetne wrażenia podczas korzystania z myszy, ekranu dotykowego i klawiatury. Najważniejszym aspektem tego znacznika jest ukrycie ikony przed użytkownikami korzystającymi z czytnika ekranu za pomocą atrybutu aria-hidden="true" oraz dodanie niezbędnego tekstu etykiety do znacznika <button>. W takich przypadkach lubię też dodawać etykiety z ikoną title, aby użytkownicy mogli dowiedzieć się, co oznacza dana ikona.

<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>

Styl przycisku typu FAB

Najpierw przekształcimy przycisk w okrągły przycisk z wypełnieniem i silnym cieniem, ponieważ są to pierwsze cechy definiujące przycisk:

.fab {
  --_size: 2rem;

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

Teraz dodamy kolor. Użyjemy strategii, której używaliśmy już wcześniej w wyzwaniach dotyczących interfejsu graficznego. Utwórz wyraźnie nazwany zestaw właściwości niestandardowych, które będą zawierać statycznie jasne i ciemne kolory, a następnie właściwości niestandardowe z dopasowaniem, które będą ustawione na jasne lub ciemne zmienne w zależności od preferencji użytkownika dotyczących kolorów:

.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);
  }
}

Następnie dodaj style, aby ikony SVG pasowały do przestrzeni.

.fab {
  …

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

Na koniec usuń podświetlenie przycisku po kliknięciu, ponieważ dodaliśmy własną wizualną informację zwrotną dotyczącą interakcji:

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

Miniprzycisk typu FAB

Celem tej sekcji jest utworzenie wariantu przycisku FAB. Dzięki temu, że niektóre przyciski FAB są mniejsze niż domyślne działanie, możemy promować działanie, które użytkownik wykonuje najczęściej.

Znacznik miniprzycisku typu FAB

Kod HTML jest taki sam jak w przypadku przycisku FAB, ale dodajemy klasę „.mini”, aby umożliwić użyciu kodu CSS tej opcji.

<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>
Styl miniprzycisku typu FAB

Dzięki zastosowaniu właściwości niestandardowych jedyną wymaganą zmianą jest dostosowanie zmiennej --_size.

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

Zrzut ekranu z 2 ułożonymi w wielokrotnym użyciu przyciskami FAB. Górny przycisk jest mniejszy niż dolny.

Ułatwienia dostępu

Najważniejszym elementem, o którym należy pamiętać w przypadku ułatwień dostępu w przypadku przycisków FAB, jest ich umieszczenie w ramach przepływu klawiatury na stronie. W tym demo są tylko przyciski FAB. Nie ma nic, z czym można by porównać kolejność i przebieg obsługi klawiatury, co oznacza, że nie można zaprezentować prawidłowego przebiegu obsługi klawiatury. W sytuacji, gdy elementy konkurują o uwagę użytkownika, warto dokładnie przemyśleć, w jakim momencie użytkownik powinien zobaczyć przycisk FAB.

Przykład interakcji z klawiaturą

Gdy użytkownik skupi się na kontenerze przycisku szybkiego dostępu, dodaliśmy już elementy role="group" i aria-label="floating action buttons", które informują użytkowników czytnika ekranu o tym, na czym się skupiają. Strategicznie umieściłem domyślny przycisk FAB, aby użytkownicy najpierw widzieli główne działanie. Następnie użyj flex-direction: column-reverse;, aby wizualnie uporządkować przycisk główny na dole, w pobliżu palców użytkownika, aby był łatwo dostępny. To miła niespodzianka, ponieważ domyślny przycisk jest dobrze widoczny i znajduje się na pierwszym miejscu dla użytkowników korzystających z klawiatury, co zapewnia im bardzo podobne wrażenia.

Na koniec pamiętaj, aby ukryć ikony przed użytkownikami korzystającymi z czytników ekranu i podać etykietę przycisku, aby nie było to zagadką. Zostało to już zrobione w pliku HTML za pomocą atrybutu aria-hidden="true" w elementach <svg> i aria-label="Some action" w elementach <button>.

Animacja

Aby poprawić wrażenia użytkowników, możesz dodać różne typy animacji. Podobnie jak w przypadku innych wyzwań dotyczących interfejsu użytkownika, skonfigurujemy kilka właściwości niestandardowych, aby przechowywać intencję ograniczonego i pełnego ruchu. Domyślnie stylizacja zakłada, że użytkownik chce ograniczyć ruch, a następnie za pomocą zapytania o multimedia prefers-reduced-motion zmienia wartość przejścia na pełny ruch.

strategia ograniczania animacji z właściwościami niestandardowymi,

W tym kodzie CSS są tworzone 3 właściwości niestandardowe: --_motion-reduced, --_motion-ok i --_transition. Pierwsze 2 zmiennych zawierają odpowiednie przejścia w zależności od preferencji użytkownika, a ostatnia zmienna --_transition zostanie ustawiona odpowiednio na --_motion-reduced lub --_motion-ok.

.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);
  }
}

Po wprowadzeniu tych zmian można wprowadzić zmiany w elementach box-shadow, background-color, transform i outline-offset, aby użytkownik otrzymał odpowiedni komunikat w interfejsie.

Następnie dodaj trochę więcej uroku do stanu :active, dostosowując translateY. Dzięki temu przycisk będzie miał ładny efekt naciśnięcia:

.fab {
  …

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

Na koniec wprowadź zmiany w ikonach SVG w przyciskach:

.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);
    }
  }
}

Podsumowanie

Teraz, gdy już wiesz, jak to zrobić, jak Ty to zrobisz? 🙂

Zróżnicujemy nasze podejścia i poznamy wszystkie sposoby tworzenia stron internetowych.

Utwórz wersję demonstracyjną, wyślij mi linki, a ja dodam je do sekcji z remiksami społeczności.

Remiksy społeczności

Na razie jest tu pusto.

Zasoby