mittwald Flow Logo

Components

Flex

Flex ordnet Components innerhalb eines Flex-Containers an. Sie ermöglicht eine flexible, CSS-Flexbox-basierte Ausrichtung und Verteilung von Inhalten.GitHub

Playground

Schließe die Components, die in einem Flex-Container dargestellt werden sollen, mit <Flex /> ein.

import {
  LayoutCard,
  Flex,
} from "@mittwald/flow-react-components";

<Flex gap="m" justify="center">
  <LayoutCard />
  <LayoutCard />
  <LayoutCard />
</Flex>

Anwendungsbeispiele

ListItem

In diesem Beispiel nutzen wir <Flex /> innerhalb einer List. Das ermöglicht es uns, gezielt den Content des ListItems zu platzieren – in diesem Fall den zweiten Text in der rechten unteren Ecke.

import {
  Avatar,
  Content,
  Flex,
  Heading,
  IconExtension,
  Text,
  typedList,
} from "@mittwald/flow-react-components";

export default () => {
  const List = typedList<{ text: string }>();

  return (
    <List.List
      defaultViewMode="tiles"
      aria-label="Extensions"
    >
      <List.StaticData
        data={[
          { text: "Meine Extension" },
          {
            text: "Meine andere Extension mit einen deutlich längeren Namen",
          },
        ]}
      />
      <List.Item
        showTiles
        showList={false}
        textValue={(i) => i.text}
      >
        {(i) => (
          <List.ItemView>
            <Avatar>
              <IconExtension />
            </Avatar>
            <Heading>{i.text}</Heading>

            <Content>
              <Flex justify="end" align="end" grow>
                <Text>Kostenlos</Text>
              </Flex>
            </Content>
          </List.ItemView>
        )}
      </List.Item>
    </List.List>
  );
}

LayoutCard

Hier benutzen wir <Flex /> innerhalb einer LayoutCard. Dadurch können wir den Button gezielt unten anordnen.

Labore, similique. Earum, quas in. At dolorem corrupti blanditiis nulla deserunt laborum! Corrupti delectus aspernatur nihil nulla obcaecati ipsam porro sequi rem? Quam.
import {
  Button,
  Flex,
  LayoutCard,
  Text,
} from "@mittwald/flow-react-components";

<LayoutCard style={{ minHeight: 300 }}>
  <Text>
    Labore, similique. Earum, quas in. At dolorem corrupti
    blanditiis nulla deserunt laborum! Corrupti delectus
    aspernatur nihil nulla obcaecati ipsam porro sequi rem?
    Quam.
  </Text>
  <Flex align="end" grow>
    <Button color="accent">Install</Button>
  </Flex>
</LayoutCard>

Overview