‍

Components

Integrations

InlineCode

InlineCode hebt Code-Beispiele innerhalb eines Fließtextes hervor.
GitHub‍Markdown‍
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

PropertyTypeDefaultDescription
color"default" | "dark" | "light" | "dark-static" | "light-static""default"The color schema of the inline code component.
whiteSpaceWhiteSpaceundefinedThe white-space property of the inline code component.

Accessibility

PropertyTypeDefaultDescription
aria-describedbystring-Identifies the element (or elements) that describes the object. @see aria-labelledby
aria-hiddenBooleanish-Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
aria-labelstring-Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledbystring-Identifies the element (or elements) that labels the current element. @see aria-describedby.

Auf dieser Seite