Layout
Order
Storybook
Order
Storybook
The "Order" component allows you to set the order of the elements in a Flexbox layout using the "order" property.
Import
1import { Order } from 'dd360-ds'1import Order from 'dd360-ds/Order'Usage
The "order" property accepts numeric values from 1 to 12, as well as the values "first", "last" and "none". The default value is "none", which means that the order of the element is not modified.
Order 2
Order 1
Order last
Order 3
1import { Order } from "dd360-ds"
2
3<Container className="flex justify-between">
4 <Order order="2">Order 2</Order>
5 <Order order="1">Order 1</Order>
6 <Order order="last">Order last</Order>
7 <Order order="3">Order 3</Order>
8</Container> API Reference
| Name | Types | Default |
|---|---|---|
| "order"* | none 1 2 3 4 5 6 7 8 9 10 11 12 first last | - |
| "children" | ReactNode | - |