React
Is new design vision part implemented using new tokens?
Up to date
Resources
Example
import { Body, Button, Divider, IconButton, Link, MewsLogo, SidePanel, Stack, Tag, Title } from '@optimus-web/core';
import { IconName } from '@optimus-web/icons';
export const MyMenuListComponent = () => {
const [opened, setOpened] = useState(false);
return (
<>
<Button onClick={() => setOpened(true)}>Click me</Button>
<SidePanel
onClose={() => setOpened(false)}
opened={opened}
title="The Grand Mews Hotel"
width="medium"
headerActions={
<IconButton variant="tertiary" size="small" icon={IconName.Edit} />
}
actions={
<Stack spacing="100" alignment="end">
<Button variant="primary" size="medium" icon={IconName.ExternalLink} iconPosition="right">
Go to property
</Button>
</Stack>
}
content={
<Stack spacing="200" vertical>
<MewsLogo size="large" />
<Body>
The Grand Mews Hotel is a lifestyle hotel that offers 59 rooms (including 4 junior suites and 3 luxury
suites), a chill-out lounge with several “Living Spaces”,a spa, and a state-of-the-art restaurant and bar
with an unbeatable rooftop terrace.
</Body>
<Stack vertical spacing="200">
<Stack spacing="200">
<Body>Type</Body>
<Link standalone underline={false}>
Hotel
</Link>
</Stack>
<Divider />
<Stack spacing="200">
<Body>Location</Body>
<Link standalone underline={false}>
Prague
</Link>
</Stack>
<Divider />
<Stack spacing="200">
<Body>Region</Body>
<Link standalone underline={false}>
Central Europe
</Link>
</Stack>
<Divider />
<Stack spacing="200">
<Body>Brand</Body>
<Link standalone underline={false}>
Mews
</Link>
</Stack>
<Divider />
<Stack spacing="200">
<Body>Employees</Body>
<Link standalone underline={false}>
38
</Link>
</Stack>
</Stack>
<Title level={3}>Tags</Title>
<Stack spacing="50" wrap>
<Tag variant="basicSubtle">Luxury</Tag>
<Tag variant="basicSubtle">Five stars</Tag>
<Tag variant="basicSubtle">SPA</Tag>
<Tag variant="basicSubtle">Terrace</Tag>
<Tag variant="basicSubtle">Restuarant</Tag>
<Tag variant="basicSubtle">Rooftop bar</Tag>
<Tag variant="basicSubtle">Lounge</Tag>
</Stack>
</Stack>
}
/>
</>
);
};
API
|
Name |
Description |
Type |
Default |
|---|---|---|---|
|
onClose |
Collapses the Side Panel |
() => void |
- |
|
title |
Defines the title of the Side Panel |
ReactNode |
undefined |
|
tag? |
Defines the Menu List |
{ text: string; variant: TagVariant } |
undefined |
|
content |
Defines the main content of the Side Panel |
ReactNode |
undefined |
|
actions? |
Defines the actions section at the bottom of the Side Panel |
ReactNode |
undefined |
|
opened |
|
boolean |
undefined |
|
portalContainerId? |
Defines the name of the portal |
string |
undefined |
|
headerActions |
Defines the actions at the top of the Side Panel |
ReactNode |
undefined |
|
width |
Defines the width of the Side Panel |
Size |
undefined |
|
loading? |
|
boolean |
undefined |
|
Wrapper? |
Workaround for react hook form content |
React.FC<React.PropsWithChildren<{}>> |
Fragment |