‍

Components

Integrations

InlineCode

InlineCode hebt Code-Beispiele innerhalb eines Fließtextes hervor.
Gib yarn start ein um deine App zu starten.
import {
  InlineCode,
  Text,
} from "@mittwald/flow-react-components";

<Text>
  Gib <InlineCode>yarn start</InlineCode> ein um deine App
  zu starten.
</Text>

Best Practices

  • Setze InlineCode sparsam ein. Zu viele InlineCodes machen einen Text unleserlich.
  • Nutze InlineCode nur für kurze Beispiele. Für längere Code-Beispiele eignet sich der CodeBlock‍.

Color

Zusätzlich zur Standard-Color kann InlineCode in Light und Dark dargestellt werden, wenn die Standard-Color auf farbigen oder dekorativen Hintergründen keinen ausreichenden Kontrast (mind. 4,5:1) bietet. Wann welche Color passt, beschreibt Color‍.

Gib yarn start ein um deine App zu starten.
Gib yarn start ein um deine App zu starten.

Properties

PropertyTypeDescription
color
default (default) | dark | light | dark-static | light-static
The color schema of the inline code component.
whiteSpace
WhiteSpacedefault: undefined
The white-space property of the inline code component.

Accessibility

PropertyTypeDescription
aria-describedby
string
Identifies the element (or elements) that describes the object. @see aria-labelledby
aria-hidden
Booleanish
Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
aria-label
string
Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledby
string
Identifies the element (or elements) that labels the current element. @see aria-describedby.

Auf dieser Seite