Overview
Develop
Beispiel
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
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
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
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
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
Property | Type | Default | Description |
---|---|---|---|
color | "light" | "dark" | "danger" | "primary" | "primary" | The color of the illustrated message. |
ref | LegacyRef<HTMLDivElement> | - | Allows getting a ref to the component instance.
Once the component unmounts, React will set |
key | Key | - | |
defaultChecked | boolean | - | |
defaultValue | string | number | readonly string[] | - | |
suppressContentEditableWarning | boolean | - | |
suppressHydrationWarning | boolean | - | |
accessKey | string | - | |
autoCapitalize | "none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters" | - | |
autoFocus | boolean | - | |
className | string | - | |
contentEditable | Booleanish | "inherit" | "plaintext-only" | - | |
contextMenu | string | - | |
dir | string | - | |
draggable | Booleanish | - | |
enterKeyHint | "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | - | |
hidden | boolean | - | |
id | string | - | |
lang | string | - | |
nonce | string | - | |
slot | string | - | |
spellCheck | Booleanish | - | |
style | CSSProperties | - | |
tabIndex | number | - | |
title | string | - | |
translate | "yes" | "no" | - | |
radioGroup | string | - | |
role | AriaRole | - | |
about | string | - | |
content | string | - | |
datatype | string | - | |
inlist | any | - | |
prefix | string | - | |
property | string | - | |
rel | string | - | |
resource | string | - | |
rev | string | - | |
typeof | string | - | |
vocab | string | - | |
autoCorrect | string | - | |
autoSave | string | - | |
itemProp | string | - | |
itemScope | boolean | - | |
itemType | string | - | |
itemID | string | - | |
itemRef | string | - | |
results | number | - | |
security | string | - | |
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 |
is | string | - | 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 |
children | ReactNode | - | |
dangerouslySetInnerHTML | { __html: string | TrustedHTML; } | - |