Flex

Die Flex Komponente dient dazu Elemente innerhalb eines Flex-Containers anzuordnenGitHub

Overview

Develop

Playground

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

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

Anwendungsbeispiele

Im ListItem

Hier wird die Flex Component dazu genutzt Inhalt in der unteren rechten Ecke zu platzieren.

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">
      <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>
  );
}

In LayoutCard

Hier wird die Flex Component dazu genutzt einen Button unten in einer LayoutCard zu platzieren

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>

Properties

Property	Type	Default	Description
`direction`	FlexDirection	"row"	The flexDirection value of the element.
`align`	"start" \| "end" \| "center"	"start"	The alignItems value of the element.
`justify`	"start" \| "end" \| "center"	"start"	The justifyContent value of the element.
`gap`	"s" \| "m" \| "l" \| "xs" \| "xl"	-	The gap size of the element.
`columnGap`	"s" \| "m" \| "l" \| "xs" \| "xl"	-	The columnGap size of the element.
`rowGap`	"s" \| "m" \| "l" \| "xs" \| "xl"	-	The rowGap size of the element.
`grow`	boolean	-	Whether the element should grow.
`wrap`	FlexWrap	"nowrap"	The flexWrap value of the element.
`children`	ReactNode	-
`className`	string	-	The elements class name.

Feedback geben