Skip to content

Commit f3c592b

Browse files
Mash707Mash707
committed
converted examples
1 parent 12b4917 commit f3c592b

File tree

4 files changed

+45
-36
lines changed

4 files changed

+45
-36
lines changed

‎packages/react-core/src/layouts/Flex/examples/Flex.md‎

Lines changed: 3 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -113,53 +113,20 @@ The flex layout provides two ways of spacing its direct children.
113113

114114
### Column layout
115115

116-
```js
117-
import { Flex, FlexItem } from '@patternfly/react-core';
116+
```ts file="FlexColumnLayout.tsx"
118117

119-
<Flex direction={{ default: 'column' }}>
120-
<FlexItem>Flex item</FlexItem>
121-
<FlexItem>Flex item</FlexItem>
122-
<FlexItem>Flex item</FlexItem>
123-
</Flex>;
124118
```
125119

126120
### Stacking elements
127121

128-
```js
129-
import { Flex, FlexItem } from '@patternfly/react-core';
122+
```ts file="FlexStackingElements.tsx"
130123

131-
<Flex direction={{ default: 'column' }}>
132-
<Flex>
133-
<FlexItem>Flex item</FlexItem>
134-
<FlexItem>Flex item</FlexItem>
135-
<FlexItem>Flex item</FlexItem>
136-
</Flex>
137-
<Flex>
138-
<FlexItem>Flex item</FlexItem>
139-
<FlexItem>Flex item</FlexItem>
140-
</Flex>
141-
<Flex>
142-
<FlexItem>Flex item</FlexItem>
143-
</Flex>
144-
</Flex>;
145124
```
146125

147126
### Nesting elements in columns
148127

149-
```js
150-
import { Flex, FlexItem } from '@patternfly/react-core';
128+
```ts file="FlexNestingInColumns.tsx"
151129

152-
<Flex>
153-
<Flex direction={{ default: 'column' }}>
154-
<FlexItem>Flex item</FlexItem>
155-
<FlexItem>Flex item</FlexItem>
156-
<FlexItem>Flex item</FlexItem>
157-
</Flex>
158-
<Flex direction={{ default: 'column' }}>
159-
<FlexItem>Flex item</FlexItem>
160-
<FlexItem>Flex item</FlexItem>
161-
</Flex>
162-
</Flex>;
163130
```
164131

165132
## Responsive layout modifiers

‎packages/react-core/src/layouts/Flex/examples/FlexColumnLayout.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Flex, FlexItem } from '@patternfly/react-core';
2+
3+
export const FlexColumnLayout: React.FunctionComponent = () => (
4+
<Flex direction={{ default: 'column' }}>
5+
<FlexItem>Flex item</FlexItem>
6+
<FlexItem>Flex item</FlexItem>
7+
<FlexItem>Flex item</FlexItem>
8+
</Flex>
9+
);

‎packages/react-core/src/layouts/Flex/examples/FlexNestingInColumns.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Flex, FlexItem } from '@patternfly/react-core';
2+
3+
export const FlexNestingInColumns: React.FunctionComponent = () => (
4+
<Flex>
5+
<Flex direction={{ default: 'column' }}>
6+
<FlexItem>Flex item</FlexItem>
7+
<FlexItem>Flex item</FlexItem>
8+
<FlexItem>Flex item</FlexItem>
9+
</Flex>
10+
<Flex direction={{ default: 'column' }}>
11+
<FlexItem>Flex item</FlexItem>
12+
<FlexItem>Flex item</FlexItem>
13+
</Flex>
14+
</Flex>
15+
);

‎packages/react-core/src/layouts/Flex/examples/FlexStackingElements.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Flex, FlexItem } from '@patternfly/react-core';
2+
3+
export const FlexStackingElements: React.FunctionComponent = () => (
4+
<Flex direction={{ default: 'column' }}>
5+
<Flex>
6+
<FlexItem>Flex item</FlexItem>
7+
<FlexItem>Flex item</FlexItem>
8+
<FlexItem>Flex item</FlexItem>
9+
</Flex>
10+
<Flex>
11+
<FlexItem>Flex item</FlexItem>
12+
<FlexItem>Flex item</FlexItem>
13+
</Flex>
14+
<Flex>
15+
<FlexItem>Flex item</FlexItem>
16+
</Flex>
17+
</Flex>
18+
);

0 commit comments

Comments
 (0)