mittwald Flow Logo

Components

IllustratedMessage

Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.GitHub

Keine Apps installiert

Lege deine erste App an, um mit der Arbeit an deiner Webseite loszulegen.

Beispiel

Keine Apps installiert

Lege deine erste App an, um mit der Arbeit an deiner Webseite loszulegen.
import Heading from "@mittwald/flow-react-components/Heading";
import IllustratedMessage from "@mittwald/flow-react-components/IllustratedMessage";
import { IconApp } from "@mittwald/flow-react-components/Icons";
import Text from "@mittwald/flow-react-components/Text";
import Button from "@mittwald/flow-react-components/Button";

<IllustratedMessage>
  <IconApp />
  <Heading>Keine Apps installiert</Heading>
  <Text>
    Lege deine erste App an, um mit der Arbeit an deiner
    Webseite loszulegen.
  </Text>
  <Button>App anlegen</Button>
</IllustratedMessage>

Colors

Negative

Kein Zugriff

Du hast keine Berechtigung, um auf diese Seite zuzugreifen.
import Heading from "@mittwald/flow-react-components/Heading";
import IllustratedMessage from "@mittwald/flow-react-components/IllustratedMessage";
import { IconDanger } from "@mittwald/flow-react-components/Icons";
import Text from "@mittwald/flow-react-components/Text";
import Button from "@mittwald/flow-react-components/Button";

<IllustratedMessage color="danger">
  <IconDanger />
  <Heading>Kein Zugriff</Heading>
  <Text>
    Du hast keine Berechtigung, um auf diese Seite
    zuzugreifen.
  </Text>
  <Button>Zum Dashboard</Button>
</IllustratedMessage>

Dark

Keine Apps installiert

Lege deine erste App an, um mit der Arbeit an deiner Webseite loszulegen.
import Heading from "@mittwald/flow-react-components/Heading";
import IllustratedMessage from "@mittwald/flow-react-components/IllustratedMessage";
import { IconApp } from "@mittwald/flow-react-components/Icons";
import Text from "@mittwald/flow-react-components/Text";
import Button from "@mittwald/flow-react-components/Button";

<IllustratedMessage color="dark">
  <IconApp />
  <Heading>Keine Apps installiert</Heading>
  <Text>
    Lege deine erste App an, um mit der Arbeit an deiner
    Webseite loszulegen.
  </Text>
  <Button>App anlegen</Button>
</IllustratedMessage>

Light

Keine Apps installiert

Lege deine erste App an, um mit der Arbeit an deiner Webseite loszulegen.
import Heading from "@mittwald/flow-react-components/Heading";
import IllustratedMessage from "@mittwald/flow-react-components/IllustratedMessage";
import { IconApp } from "@mittwald/flow-react-components/Icons";
import Text from "@mittwald/flow-react-components/Text";
import Button from "@mittwald/flow-react-components/Button";

<IllustratedMessage color="light">
  <IconApp />
  <Heading>Keine Apps installiert</Heading>
  <Text>
    Lege deine erste App an, um mit der Arbeit an deiner
    Webseite loszulegen.
  </Text>
  <Button>App anlegen</Button>
</IllustratedMessage>

Mit ActionGroup

Keine Apps installiert

Lege deine erste App an, um mit der Arbeit an deiner Webseite loszulegen.
import Heading from "@mittwald/flow-react-components/Heading";
import IllustratedMessage from "@mittwald/flow-react-components/IllustratedMessage";
import { IconApp } from "@mittwald/flow-react-components/Icons";
import Text from "@mittwald/flow-react-components/Text";
import Button from "@mittwald/flow-react-components/Button";
import ActionGroup from "@mittwald/flow-react-components/ActionGroup";

<IllustratedMessage>
  <IconApp />
  <Heading>Keine Apps installiert</Heading>
  <Text>
    Lege deine erste App an, um mit der Arbeit an deiner
    Webseite loszulegen.
  </Text>
  <ActionGroup>
    <Button variant="soft" color="secondary">
      Zurück
    </Button>
    <Button>App anlegen</Button>
  </ActionGroup>
</IllustratedMessage>

Properties

PropertyTypeDefaultDescription
color"light" | "dark" | "danger" | "primary""primary"

The color of the illustrated message.

refLegacyRef<HTMLDivElement>-

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see React Docs

keyKey-
defaultCheckedboolean-
defaultValuestring | number | readonly string[]-
suppressContentEditableWarningboolean-
suppressHydrationWarningboolean-
accessKeystring-
autoCapitalize"none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters"-
autoFocusboolean-
classNamestring-
contentEditableBooleanish | "inherit" | "plaintext-only"-
contextMenustring-
dirstring-
draggableBooleanish-
enterKeyHint"search" | "enter" | "done" | "go" | "next" | "previous" | "send"-
hiddenboolean-
idstring-
langstring-
noncestring-
slotstring-
spellCheckBooleanish-
styleCSSProperties-
tabIndexnumber-
titlestring-
translate"yes" | "no"-
radioGroupstring-
roleAriaRole-
aboutstring-
contentstring-
datatypestring-
inlistany-
prefixstring-
propertystring-
relstring-
resourcestring-
revstring-
typeofstring-
vocabstring-
autoCorrectstring-
autoSavestring-
itemPropstring-
itemScopeboolean-
itemTypestring-
itemIDstring-
itemRefstring-
resultsnumber-
securitystring-
unselectable"off" | "on"-
inputMode"none" | "text" | "search" | "url" | "tel" | "email" | "numeric" | "decimal"-

Hints at the type of data that might be entered by the user while editing the element or its contents @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

isstring-

Specify that a standard HTML element should behave like a defined custom built-in element @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

childrenReactNode-
dangerouslySetInnerHTML{ __html: string | TrustedHTML; }-

Feedback geben