• Start
  • Blogg
  • Kom igång
  • Riktlinjer
  • Komponenter
  • Changelog
  • Tillgänglighet
  • Statistik
  • Inställningar

Riktlinjer

Riktlinjer

​
​

Inga resultat hittade, prova med andra sökvillkor.

Personlighet

Filosofi
Principer

Identitet

Bildmanér
Färger
Ikonografi
Logotyp
Rörelse
Typografi
UX-writing

Layout

Angränsande ytor
Anpassning av komponenter
Avstånd
Brytpunkter
Grid
Layout
Layoutregioner
Säkert område

Mönster

Destruktiva val
Elevation
Hjälp
Inloggning
Landningssidor
Launch screen
Mörkt läge
Navigering
Offline
Onboarding
Progress
Prominens
Sök
Textinmatning
Tomma tillstånd
Validering

Produkter och tjänster

Chattbot och chatt
Digitala skärmar
Html-mejl
Kläder

Interaktionstillstånd

Interaktionstillstånd

Interaction states are visual representations used to communicate the status of an element.

A loading state communicates the content of the element has not fully loaded yet.

A loading state communicates the content of the element has not fully loaded yet.

A disabled state communicates when a component or element isn’t interactive.

A disabled state communicates when a component or element isn’t interactive.

An enabled state communicates an interactive element.

An enabled state communicates an interactive element.

A hover state communicates when a user has placed a cursor above an interactive element.

A hover state communicates when a user has placed a cursor above an interactive element.

A pressed state communicates a user tap.

A pressed state communicates a user tap.

A focus visible state communicates when an element matches the :focus pseudo-class and the user agent determines via heuristics that the focus should be made evident on the element.

A focus visible state communicates when an element matches the :focus pseudo-class and the user agent determines via heuristics that the focus should be made evident on the element.

A success state communicates a correct user input.

A success state communicates a correct user input.

An error state communicates a user or system mistake.

An error state communicates a user or system mistake.

An activated state communicates a highlighted destination, whether initiated by the user or by default.

An activated state communicates a highlighted destination, whether initiated by the user or by default.

About focus indicators – for developers

In most cases the correct focus indicators are set automatically but there might be instances when you need to set focus-visible styles manually. For example, if there are elements or components that need to be able to recieve focus and they are used within a container that has overflow set to hidden or scroll. There are two mixins in the theme that can help you with this:

Kodexempel

Relaterade riktlinjer

  • Fokusmarkering