### Design Token Examples: Naming and Values Source: https://mittwald.github.io/flow/02-foundations/01-design/01-design-tokens Provides concrete examples of Design Tokens, including their structured names and corresponding values. These examples demonstrate how the naming schema translates into specific design properties like colors and sizes. ```text hosting-blue-800 Der Token `hosting-blue-800` definiert eine spezifische Color. Der Name der Farbe `hosting-blue` gibt den **Context** an. Die Zahl `800` ist die **Clarification** , die die Abstufung der Farbe definiert und auf den genauen Farbwert `#0054F5` im Designsystem verweist. primary-solid-background-color-default Dieser Token definiert die primäre Hintergrundfarbe einer „Solid“-Variante. `primary` gibt als Context an, dass es sich um eine primäre Farbe handelt. Die Common Unit `solid-background-color` verdeutlicht, dass die Farbe als Hintergrundfarbe in der „Solid“-Variante verwendet wird. Die **Clarification** `default` gibt an, dass der Token für den Default-State verwendet wird. alert-info-outline-border-color-default Dieser Token definiert eine Designentscheidung für eine spezifische Component, in diesem Fall einen Alert. `alert` liefert den **Context** und stellt klar, dass der Token nur für diese Komponente verwendet wird. `info-outline-border-color` als **Common Unit** kategorisiert den Token weiter ein: Er wird für die Border-Color eines Alerts in der „Info“- und „Outline“-Variante verwendet. `default` gibt als **Clarification** an, dass der Token für den Default-State genutzt wird. ``` -------------------------------- ### Display List with ActionGroup for Existing Content Source: https://mittwald.github.io/flow/02-foundations/04-ui-patterns/02-anlegeprozess Once content exists, navigation is handled via a list. The ActionGroup component, typically located in the header of the list, provides functionality to start the creation process for new items. This example shows a list of projects with an 'Anlegen' (Create) button. ```html Tarif bestellenAnlegen List ##### Café-Gebäck-Haus Space-Server: Mein Server ##### Steelwork proSpace ##### UtopiaVRSchule proSpace lite ##### IT-Profis-Website Space-Server: Mein Server Showing 4 of 4 Code anzeigen ``` -------------------------------- ### Install Flow Stylesheet via NPM Source: https://mittwald.github.io/flow/01-get-started/stylesheet This command installs the Flow stylesheet library using NPM. Ensure you have Node.js and NPM (or Yarn) installed on your system. This is the primary method for obtaining the stylesheet. ```bash yarn add @mittwald/flow-stylesheet ``` -------------------------------- ### Markdown Syntax Examples (Markdown) Source: https://mittwald.github.io/flow/03-components/content/markdown/overview This section provides examples of various Markdown syntaxes supported by the Markdown component. It covers headings, bold and italic text, unordered and ordered lists, blockquotes, links, inline code, and code blocks. Each example illustrates how to format text for different elements. ```markdown # Heading Level 1 ## Heading Level 2 ### Heading Level 3 #### Heading Level 4 ##### Heading Level 5 ###### Heading Level 6 ``` ```markdown **Bold text** and *italic text*. ``` ```markdown * Unordered list item 1 * Unordered list item 2 * Unordered list item 3 ``` ```markdown 1. Ordered list item 1 2. Ordered list item 2 3. Ordered list item 3 ``` ```markdown > This is a quote ``` ```markdown [mittwald.de](http://mittwald.de) ``` ```markdown `127.0.0.1` ``` ```json { "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698", "name": "My Project" } ``` -------------------------------- ### Design Token Naming Schema Example Source: https://mittwald.github.io/flow/02-foundations/01-design/01-design-tokens Illustrates the three-level naming schema for Design Tokens: Context, Common Unit, and Clarification. This structure ensures tokens are understandable and self-explanatory. ```text Context Einordnung z. B. Farbe, Component Common Unit Kategorie z. B. Variante, Sizing, Styling Clarification Spezifizierung z. B. Farbwert, State ``` -------------------------------- ### Global Token Examples: Name and Value Source: https://mittwald.github.io/flow/02-foundations/01-design/01-design-tokens Shows examples of Global Tokens, which are foundational elements of the design system. This table lists token names and their corresponding values, such as colors and spacing units. ```text Token-Name| Wert ---|--- hosting-blue--800| #0054F5 size--s| 8px ``` -------------------------------- ### Install Flow React Components using Yarn Source: https://mittwald.github.io/flow/01-get-started/installation Installs the Flow React Component Library using the Yarn package manager. This command adds the necessary package and its dependencies to your project. ```bash yarn add @mittwald/flow-react-components ``` -------------------------------- ### ComboBox with ContextualHelp Source: https://mittwald.github.io/flow/03-components/form-controls/combo-box/overview This example demonstrates integrating ContextualHelp with a ComboBox. The ContextualHelp component can be used to provide more detailed information than what fits in a FieldDescription, offering an interactive way for users to get help. ```jsx import { ComboBox, ContextualHelp, Label, Option, } from "@mittwald/flow-react-components"; Hier können Sie Ihre Domain eingeben oder auswählen. ``` -------------------------------- ### Basic Navigation with Links - React Source: https://mittwald.github.io/flow/03-components/navigation/navigation/overview Demonstrates the basic usage of the Navigation component from @mittwald/flow-react-components. It includes multiple Link elements for navigation within an application. Ensure the @mittwald/flow-react-components library is installed. ```jsx import { Link, Navigation, } from "@mittwald/flow-react-components"; Apple mittwald Adobe Google ``` -------------------------------- ### Render AlertBadge in React Source: https://mittwald.github.io/flow/03-components/status/alert-badge/overview Demonstrates how to import and render the AlertBadge component in a React application. It shows a basic usage example with text content. ```jsx import { AlertBadge } from "@mittwald/flow-react-components"; Archiviert ``` -------------------------------- ### Display Inline Code Snippet with React Source: https://mittwald.github.io/flow/03-components/content/inline-code/overview This snippet shows how to use the InlineCode component from '@mittwald/flow-react-components' to display a command like 'yarn start' within a Text component. It's a basic example of integrating inline code into React applications. ```jsx import { InlineCode, Text, } from "@mittwald/flow-react-components"; Gib yarn start ein um deine App zu starten. ``` -------------------------------- ### Context Menu for Creating Different Element Types Source: https://mittwald.github.io/flow/02-foundations/04-ui-patterns/02-anlegeprozess When a list contains various element types (e.g., Domain, Subdomain, vHost), the creation button opens a context menu. This menu allows the user to select the specific type of element they wish to create, ensuring the correct creation process is initiated. This example illustrates the initial step for creating a domain. ```html Hinzufügen List ##### mjaofd6.project.space Projekt-Domain Kein Ziel ``` -------------------------------- ### Implement Section with Actions Source: https://mittwald.github.io/flow/03-components/structure/section Demonstrates using the Section component with action elements like Links, Switches, or Buttons in the top-right corner. It shows examples for activating/deactivating features or migrating data. ```jsx import { Button, Section, SectionAction, Switch, Text, } from "@mittwald/flow-react-components";
} > Lasse den Autoresponder für dich arbeiten. Er kann automatisch auf eingehende E-Mails antworten.
``` ```jsx import { AlertBadge, Badge, Button, Section, SectionAction, Text, } from "@mittwald/flow-react-components";
} > Projektname Dolce Vita Short-ID p-lol3qe Projektdomain p-lol3qe.project.space
``` ```jsx import { AlertBadge, Badge, Button, Section, SectionAction, Text, } from "@mittwald/flow-react-components";
Deaktiviert } > Projektname Dolce Vita Short-ID p-lol3qe Projektdomain p-lol3qe.project.space
``` -------------------------------- ### Import Flow Stylesheet in Project Entrypoint Source: https://mittwald.github.io/flow/01-get-started/stylesheet This import statement adds the Flow component styles to your project. Place this line in your application's main entry point file to ensure styles are loaded globally. It assumes the stylesheet is installed via NPM. ```javascript import "@mittwald/flow-stylesheet/css"; ``` -------------------------------- ### MarkdownEditor in a Chat Interface Example Source: https://mittwald.github.io/flow/03-components/form-controls/markdown-editor/overview Presents an example of using the MarkdownEditor within a chat interface. This snippet focuses on the input field for sending messages. ```javascript import { MarkdownEditor } from "@mittwald/flow-react-components"; function ChatInput() { const handleSendMessage = (message) => { console.log("Sending message:", message); // Logic to send message }; return (
{ if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSendMessage(e.target.value); e.target.value = ''; // Clear input after sending } }} />
); } ``` -------------------------------- ### FileCard with ContextMenu Integration Source: https://mittwald.github.io/flow/03-components/upload/file-card/overview This example shows how to embed a ContextMenu within the FileCard to group important user interactions. The ContextMenu can contain various actions related to the file. ```jsx {/* Context menu items */} ``` -------------------------------- ### Display IllustratedMessage for Empty State Source: https://mittwald.github.io/flow/02-foundations/04-ui-patterns/02-anlegeprozess When no elements have been created, an IllustratedMessage component is displayed to guide the user. It typically includes text and a prominent Call to Action (CTA) button to initiate the creation of the first element. This is common in project overviews or lists where initial content is absent. ```html Code anzeigen ``` -------------------------------- ### FileCard with Progress Bar for Upload Status Source: https://mittwald.github.io/flow/03-components/upload/file-card/overview This example shows how to integrate a ProgressBar into the FileCard to visualize the progress of an ongoing operation, such as a file upload. This provides visual feedback to the user. ```jsx ``` -------------------------------- ### Applying Combined Variant Button Styles Source: https://mittwald.github.io/flow/01-get-started/stylesheet Illustrates how to combine multiple variant classes to style a button. This example applies both an accent and a size modifier to the base button class, allowing for fine-grained control over the button's appearance. This adheres to the component-based styling approach. ```html ``` -------------------------------- ### Basic Tabs Implementation with React Source: https://mittwald.github.io/flow/03-components/navigation/tabs Demonstrates the basic usage of the Tabs component from '@mittwald/flow-react-components'. It shows how to define multiple tabs, each with a title and content sections. The example utilizes various Flow React components like Section, Heading, TextField, LabeledValue, Text, and Switch. ```jsx import { Header, Heading, Label, LabeledValue, Section, Switch, Tab, Tabs, TabTitle, Text, TextField, } from "@mittwald/flow-react-components"; Allgemein
Allgemein
Speicherplatz
Speicherplatz 2.4 GB
Spamschutz
Spamschutz Spamfilter
Der Spamfilter schützt dich vor ungewollten E-Mails. Niemand will Müll in seinem Postfach, daher empfehlen wir den Spamschutz immer aktiviert zu lassen.
``` -------------------------------- ### Integrate TextField with React Hook Form in React Source: https://mittwald.github.io/flow/03-components/form-controls/text-field/overview Provides an example of integrating the TextField component with React Hook Form for efficient form handling, including state management, validation, and submission. This snippet assumes React Hook Form is installed and configured. ```jsx import { useForm } from 'react-hook-form'; import { TextField, Label } from '@mittwald/flow-react-components'; function MyForm() { const { register, handleSubmit } = useForm(); const onSubmit = data => console.log(data); return (
); } ``` -------------------------------- ### Display IllustratedMessage with Icon, Heading, Text, and Button Source: https://mittwald.github.io/flow/03-components/content/illustrated-message/overview This snippet shows how to render an IllustratedMessage component, which includes an Icon, Heading, Text, and a Button. It's used to inform users when no applications are installed and provides a call to action to create the first app. ```jsx import { Button, Heading, IconApp, IllustratedMessage, Text, } from "@mittwald/flow-react-components"; Keine Apps installiert Lege deine erste App an, um mit der Arbeit an deiner Webseite loszulegen. ``` -------------------------------- ### Styling an Alert Component with Composition Source: https://mittwald.github.io/flow/01-get-started/stylesheet This example shows how to style a composite alert component. It utilizes base classes for elements like headings (`flow--heading`) and icons (`flow--icon`), along with specialized classes for the alert context (`flow--alert--heading`). This demonstrates composition and context-specific styling within the Flow system. ```jsx import ExampleSvg from "@/content/01-get-started/stylesheet/examples/components/ExampleSvg"; ``` -------------------------------- ### Basic Flex Container Layout with LayoutCards Source: https://mittwald.github.io/flow/03-components/structure/flex/overview Demonstrates how to use the Flex component to arrange multiple LayoutCard components within a flex container. It showcases the 'gap', 'justify' props for controlling spacing and alignment. This example requires importing Flex and LayoutCard from '@mittwald/flow-react-components'. ```jsx import { LayoutCard, Flex, } from "@mittwald/flow-react-components"; ``` -------------------------------- ### Basic Action with Button - React Source: https://mittwald.github.io/flow/03-components/actions/action/overview This example demonstrates how to use the Action component to wrap a Button. It associates an asynchronous function (sleep) with the action, allowing for control over the button's states and feedback. ```jsx import { Action, Button, } from "@mittwald/flow-react-components"; import { sleep } from "@/content/03-components/actions/action/examples/lib"; ``` -------------------------------- ### Add FieldDescription to ComboBox Source: https://mittwald.github.io/flow/03-components/form-controls/combo-box/overview This example shows how to enhance the ComboBox with a FieldDescription component. The FieldDescription provides additional guidance or information to the user regarding the input requirements of the ComboBox, appearing below it. ```jsx import { ComboBox, FieldDescription, Label, Option, } from "@mittwald/flow-react-components"; Weitere Informationen ``` -------------------------------- ### FileCard in Failed State Source: https://mittwald.github.io/flow/03-components/upload/file-card/overview This example shows how to display the FileCard in a 'failed' state using the 'isFailed' property. This is useful for indicating errors, such as a failed file upload, and can include supplementary information in the subtitle. ```jsx ``` -------------------------------- ### Combining Heading with Icon in React Source: https://mittwald.github.io/flow/03-components/content/heading Shows how to integrate an '' component with a '' component to visually enhance the heading. This combination is used to support the heading with a decorative icon. The example indicates where the Icon component would be placed. ```jsx /* Assuming Icon component is imported and available */ import { Heading, Icon } from "@mittwald/flow-react-components"; {/* Replace 'some-icon-name' with an actual icon name */} Personal Informationen ``` -------------------------------- ### ActionGroup Usage with Buttons and ModalTrigger Source: https://mittwald.github.io/flow/03-components/actions/action-group/develop Demonstrates how to use the ActionGroup component to group buttons and a ModalTrigger. It includes an example of wrapping modal content with Suspense to prevent rerendering issues that could affect button order. ```jsx ... ``` -------------------------------- ### Combining Heading with Badge/AlertBadge in React Source: https://mittwald.github.io/flow/03-components/content/heading Demonstrates how to use '' or '' components alongside a '' component. The '' is used to highlight important meta-information within a section, while '' is for indicating a status. The examples show potential placements for these badge types. ```jsx /* Assuming Badge and AlertBadge components are imported */ import { Heading, Badge, AlertBadge } from "@mittwald/flow-react-components"; E-Mail-Adresse New {/* Example with Badge */} Speicherplatz voll Full {/* Example with AlertBadge */} ``` -------------------------------- ### IllustratedMessage with ActionGroup for Multiple Actions Source: https://mittwald.github.io/flow/03-components/content/illustrated-message/overview This example demonstrates combining the IllustratedMessage component with an ActionGroup to present multiple action buttons. It's useful when users need to perform different actions based on the message, such as navigating back or creating an app. ```jsx import { ActionGroup, Button, Heading, IconApp, IllustratedMessage, Text, } from "@mittwald/flow-react-components"; Keine Apps installiert Lege deine erste App an, um mit der Arbeit an deiner Webseite loszulegen. ``` -------------------------------- ### Customize DonutChart Units (Gigabyte) Source: https://mittwald.github.io/flow/03-components/data-visualisation/donut-chart/overview Shows how to customize the unit displayed in the DonutChart using the `formatOptions` property. This example displays the value in Gigabytes. The `formatOptions` property accepts configurations similar to `Intl.NumberFormat`. ```jsx import { DonutChart } from "@mittwald/flow-react-components"; ``` -------------------------------- ### FileCard with Delete Button Functionality Source: https://mittwald.github.io/flow/03-components/upload/file-card/overview This example shows how to add a delete button to the FileCard, allowing for immediate file removal. The 'delete' functionality is integrated directly into the component's props or children. ```jsx ``` -------------------------------- ### Basic SegmentedControl Example Source: https://mittwald.github.io/flow/03-components/form-controls/segmented-control/overview Demonstrates the basic usage of the SegmentedControl component to display selectable options. It requires importing Label, Segment, and SegmentedControl from '@mittwald/flow-react-components'. The `defaultValue` prop sets the initially selected option. ```jsx import { Label, Segment, SegmentedControl, } from "@mittwald/flow-react-components"; SSH-Key Passwort ``` -------------------------------- ### Use CodeBlock Component with JSON Source: https://mittwald.github.io/flow/03-components/content/code-block/overview This React example shows how to import and use the CodeBlock component. It sets the 'language' to 'json' and passes the JSON string to the 'code' prop. The code string is escaped for proper rendering within JSX. ```javascript import { CodeBlock } from "@mittwald/flow-react-components"; ``` -------------------------------- ### MarkdownEditor Integration with React Hook Form Source: https://mittwald.github.io/flow/03-components/form-controls/markdown-editor/overview Shows how to integrate the MarkdownEditor with React Hook Form for form handling and validation. This example assumes the existence of form submission logic. ```javascript import { useForm } from "react-hook-form"; import { MarkdownEditor } from "@mittwald/flow-react-components"; function MyForm() { const { register, handleSubmit } = useForm(); const onSubmit = (data) => console.log(data); return (
); } ``` -------------------------------- ### Highlight Words in Headings with Color Component (React) Source: https://mittwald.github.io/flow/03-components/content/color/overview This example shows how to use the Color Component to emphasize specific words within a heading. This is useful for drawing attention to key terms. Ensure sufficient contrast between text and background. ```jsx import { Color, Heading, } from "@mittwald/flow-react-components"; ## mStudio Extension selber entwickeln selber ``` -------------------------------- ### Display JSON Code with Line Numbers Source: https://mittwald.github.io/flow/03-components/content/code-block/overview This example illustrates how to display a JSON code block with line numbers enabled. By setting the 'showLineNumbers' property to true, each line of code will be prefixed with its corresponding number. Note that line numbers are for display only and are not part of the copied code. ```json 1{ 2 "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698", 3 "name": "My Project" 4} ``` -------------------------------- ### DatePicker Integration with React Hook Form Source: https://mittwald.github.io/flow/03-components/form-controls/date-picker/overview Provides an example of integrating the DatePicker component with React Hook Form for form management and validation. This snippet assumes prior setup of React Hook Form in the project. ```jsx import { DatePicker, Label, } from "@mittwald/flow-react-components"; import { useForm, Controller } from "react-hook-form"; function MyForm() { const { control, handleSubmit } = useForm(); const onSubmit = (data) => console.log(data); return (
( )} /> ); } ``` -------------------------------- ### Configure Custom Column Breakpoints and Gaps Source: https://mittwald.github.io/flow/03-components/structure/column-layout/overview Illustrates how to define custom column layouts for different breakpoints (s, m, l) and apply custom row and column gaps. This example shows inherited values from smaller breakpoints to larger ones. ```javascript import { ColumnLayout, Label, TextField, } from "@mittwald/flow-react-components"; ``` -------------------------------- ### Basic Link Usage with Flow React Components Source: https://mittwald.github.io/flow/03-components/navigation/link/overview Demonstrates the fundamental usage of the Link component from `@mittwald/flow-react-components`. This component is used to navigate users to different pages, initiate downloads, or link to anchor points on the same page. It requires importing the `Link` component. ```javascript import { Link } from "@mittwald/flow-react-components"; Zum Dashboard ``` -------------------------------- ### Import Flow React Components Styles Source: https://mittwald.github.io/flow/01-get-started/installation Imports all necessary styles for the Flow React Component Library into your project's entry point. This ensures that all components are styled correctly. ```javascript import "@mittwald/flow-react-components/all.css"; ``` -------------------------------- ### Implement Autocomplete with TextField Source: https://mittwald.github.io/flow/03-components/form-controls/autocomplete/overview This example demonstrates how to use the Autocomplete component with a TextField to provide email suggestions. It uses React's useState hook to manage the input value and generates suggestion options based on the current input. The Autocomplete component wraps the TextField and renders the generated options. ```javascript import { Option, Label, TextField, Autocomplete, } from "@mittwald/flow-react-components"; import { useState } from "react"; export default () => { const [input, setInput] = useState(""); const generateSuggestItems = () => { return [ "example.com", "test.org", "email.net", "mail.com", ] .map((d) => { const email = `${input.split("@")[0]}@${d}`; return ( ); }) .filter(() => input); }; return ( {generateSuggestItems()} ); } ``` -------------------------------- ### Adding Contextual Help to React Select Component Source: https://mittwald.github.io/flow/03-components/form-controls/select/overview Explains how to integrate `ContextualHelp` with the `Select` component to provide supplementary information or guidance to the user on demand. This improves user experience by offering help without cluttering the interface. It requires importing `ContextualHelp`. ```jsx ``` -------------------------------- ### Using Flex within a List Item for Content Placement Source: https://mittwald.github.io/flow/03-components/structure/flex/overview Illustrates using the Flex component inside a list item to precisely position content. Specifically, it places the second text element in the bottom-right corner of the list item. This example involves importing Flex. ```jsx // Assumed context: This code snippet is part of a larger list item structure // where Flex is used to control the layout of its children. // The actual implementation of the list item is not fully provided. {/* Content for the first part of the list item */} {/* ... */} {/* Content to be placed in the bottom-right corner */} Kostenlos ``` -------------------------------- ### Display JSON Code with Syntax Highlighting Source: https://mittwald.github.io/flow/03-components/content/code-block/guidelines Demonstrates how to use the CodeBlock component to display a JSON object with syntax highlighting. This is useful for presenting configuration or data structures clearly. Ensure the content is a valid JSON string. ```json { "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698", "name": "My Project" } ``` -------------------------------- ### Link with Download Icon using Flow React Components Source: https://mittwald.github.io/flow/03-components/navigation/link/overview Shows how to create a download link by using the `download` property on the Link component. This automatically appends the `IconDownload` next to the link text, indicating to the user that clicking the link will initiate a file download. ```javascript import { Link } from "@mittwald/flow-react-components"; Rechnung herunterladen ``` -------------------------------- ### Using Flex within LayoutCard for Button Placement Source: https://mittwald.github.io/flow/03-components/structure/flex/overview Shows how to use the Flex component within a LayoutCard to position elements, such as a button, at the bottom. This example highlights Flex's ability to control element positioning within a card-like structure. It assumes Flex and LayoutCard are available. ```jsx // Assumed context: This code snippet is part of a LayoutCard component. // Flex is used to arrange elements within the card, specifically positioning // a button at the bottom. {/* Other content of the LayoutCard */} ``` -------------------------------- ### Display Notification using useNotificationController Hook Source: https://mittwald.github.io/flow/03-components/status/notification-provider/overview Notifications are displayed using the `useNotificationController()` hook, which provides an `add()` method. This method accepts a Notification component as an argument. The example shows how to trigger a warning notification with a title and text when a button is pressed. Dependencies include Button, Heading, Notification, Text, and useNotificationController from the Flow React Components library. ```jsx import { Button, Heading, Notification, Text, useNotificationController, } from "@mittwald/flow-react-components"; export default () => { const controller = useNotificationController(); return ( ); } ``` -------------------------------- ### Render Markdown within a Message Component Source: https://mittwald.github.io/flow/03-components/chat/message/overview This example shows how to integrate Markdown content within the Message component using the `` component. This allows for rich text formatting, such as bold and italics, to be rendered directly in the message content. Ensure the `Markdown` component is imported from `@mittwald/flow-react-components`. ```jsx import { Align, Avatar, Button, Content, ContextMenu, ContextMenuTrigger, Header, Initials, MenuItem, Message, Text, Markdown } from "@mittwald/flow-react-components";
Lorem ipsum dolor sit amet, consetetur **sadipscing elitr** , sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed _diam voluptua_. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum _**dolor sit amet**_. ``` -------------------------------- ### Import and Use React Icon Component Source: https://mittwald.github.io/flow/03-components/content/icon/overview Demonstrates how to import and use the `IconHome` component from the `@mittwald/flow-react-components` library to display an icon. This is the primary method for integrating predefined icons. ```jsx import { IconHome } from "@mittwald/flow-react-components"; ``` -------------------------------- ### Display ContextualHelp with Trigger and Content in React Source: https://mittwald.github.io/flow/03-components/overlays/contextual-help Demonstrates how to render a ContextualHelp component using ContextualHelpTrigger, Button, Heading, Text, and Link from @mittwald/flow-react-components. This component displays additional information when triggered by user interaction. ```jsx import { Button, ContextualHelp, ContextualHelpTrigger, Heading, Link, Text, } from "@mittwald/flow-react-components"; ); } ``` -------------------------------- ### Disabled FileField Example Source: https://mittwald.github.io/flow/03-components/form-controls/file-field/overview Illustrates how to disable the FileField component, making it non-interactive. This is useful when the file upload functionality is temporarily unavailable. The component can be re-enabled once the condition preventing its use is resolved. ```jsx ``` -------------------------------- ### Applying Base and Specialized Button Styles Source: https://mittwald.github.io/flow/01-get-started/stylesheet Demonstrates how to apply styles to a button component. It shows the use of a base class (e.g., `flow--button`) along with a specialized class (e.g., `flow--button--accent`) to modify its appearance. This pattern is key for customizing components. ```html ``` -------------------------------- ### Render a Rating Component - React Source: https://mittwald.github.io/flow/03-components/content/rating/overview This snippet demonstrates how to import and render the Rating component using React. It takes a 'value' prop to set the number of stars to display. Ensure you have the '@mittwald/flow-react-components' package installed. ```javascript import { Rating } from "@mittwald/flow-react-components"; ``` -------------------------------- ### SegmentedControl with React Hook Form Integration Source: https://mittwald.github.io/flow/03-components/form-controls/segmented-control/overview Shows how to integrate `SegmentedControl` with React Hook Form for form management. This example includes a 'Speichern' (Save) button, implying form submission logic. ```jsx
Lastschrift Rechnung
``` -------------------------------- ### DateRangePicker with React Hook Form Integration Source: https://mittwald.github.io/flow/03-components/form-controls/date-range-picker/overview Illustrates the integration of the DateRangePicker component with React Hook Form for managing form logic and validation. This example focuses on combining the picker with form submission. ```jsx import { DateRangePicker, Label, } from "@mittwald/flow-react-components"; import { useForm, Controller } from "react-hook-form"; function MyForm() { const { handleSubmit, control } = useForm(); const onSubmit = (data) => console.log(data); return (
( )} /> ); } ``` -------------------------------- ### Implement Basic Table with Header and Body - React Source: https://mittwald.github.io/flow/03-components/structure/table/overview Demonstrates how to create a basic table structure using the Table, TableHeader, TableColumn, TableBody, TableRow, and TableCell components. This is useful for displaying structured data with defined columns and rows. It requires importing necessary components from '@mittwald/flow-react-components'. ```jsx import { InlineCode, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, } from "@mittwald/flow-react-components"; Name Type Default Description color primary | accent | secondary | danger primary The color of the button variant plain | solid | soft solid The variant of the button size m | s m The size of the button
``` -------------------------------- ### NumberField with React Hook Form Integration Source: https://mittwald.github.io/flow/03-components/form-controls/number-field/overview This snippet illustrates how to integrate the NumberField component with React Hook Form for managing form state, validation, and submission. It shows a basic example with a submit button. ```jsx import { Button, FieldDescription, Label, NumberField, } from "@mittwald/flow-react-components"; import { useForm } from "react-hook-form"; function MyForm() { const { register } = useForm(); return (
Bitte geben Sie Ihr Alter ein.
); } ``` -------------------------------- ### Responsive Image Implementation with srcSet Source: https://mittwald.github.io/flow/03-components/content/image/overview Explains the use of the `srcSet` attribute for providing images in different resolutions suitable for various screen sizes and pixel densities. This allows for automatic selection of the appropriate image variant. ```html Responsive Image ``` -------------------------------- ### Create a TextField with Label and FieldDescription in React Source: https://mittwald.github.io/flow/03-components/form-controls/text-field/overview Demonstrates the basic usage of the TextField component, including how to associate a Label and a FieldDescription for user guidance. This is useful for creating input fields where clear instructions or context are necessary. ```jsx import { FieldDescription, Label, TextField, } from "@mittwald/flow-react-components"; Beginnt mit https:// ``` -------------------------------- ### Create a Basic Button with onPress Handler Source: https://mittwald.github.io/flow/03-components/actions/button/overview Demonstrates how to render a simple Button component and attach an onPress event handler to it. This handler will be executed when the button is clicked, triggered by mouse, keyboard, or touch. ```javascript import { Button } from "@mittwald/flow-react-components"; ``` -------------------------------- ### Checkbox Integration with React Hook Form Source: https://mittwald.github.io/flow/03-components/form-controls/checkbox Provides an example of integrating the Checkbox component with React Hook Form for managing form state. This allows for easy handling of checkbox values within a form submission. ```jsx import { Checkbox } from "@mittwald/flow-react-components"; import { useForm, Controller } from "react-hook-form"; function MyForm() { const { handleSubmit, control } = useForm(); const onSubmit = (data) => console.log(data); return (
( Ich stimme den AGBs zu und bestätige, dass ich die Datenschutzhinweise zur Kenntnis genommen habe. )} /> ); } ```