React
Is new design vision part implemented using new tokens?
Update required
Resources
Example
import {
Avatar,
Badge,
IconButton,
MewsLogo,
SearchInputField,
Stack
} from '@optimus-web/core';
<Appbar
leftSide={
<Stack itemAlignment="center">
<IconButton
icon={IconName[opened ? 'MenuArrowLeft' : 'MenuArrowRight']}
onClick={() => setOpened(!opened)}
variant="ghost"
iconSize="medium"
aria-label={opened ? 'Close' : 'Open'}
/>
<Stack spacing="200" itemAlignment="center">
<MewsLogo />
<SearchInputField
onSearch={() => {}}
onChange={(event: ChangeEvent<HTMLInputElement> | MouseEvent, value: InputValue) =>
setSearch(value)
}
name="search"
placeholder="Search within..."
value={search}
aria-label="Search"
/>
</Stack>
</Stack>
}
rightSide={
<Stack spacing="200" itemAlignment="center">
<Stack spacing="100" itemAlignment="center">
<IconButton
iconSize="medium"
variant="ghost"
icon={IconName.Timeline}
aria-label="timeline"
/>
<IconButton iconSize="medium" variant="ghost" icon={IconName.Add} aria-label="add" />
<IconButton iconSize="medium" variant="ghost" icon={IconName.Show} aria-label="Read" />
<Badge content="23" offset={18}>
<IconButton
iconSize="medium"
variant="ghost"
icon={IconName.Notifications}
aria-label="notifications"
/>
</Badge>
<Badge content="5" offset={18}>
<IconButton
iconSize="medium"
variant="ghost"
icon={IconName.Message}
aria-label="Messages"
/>
</Badge>
<AppbarDivider />
<Badge offset={16}>
<IconButton
iconSize="medium"
variant="ghost"
icon={IconName.HelpCenter}
aria-label="Help"
/>
</Badge>
<Badge content="3" offset={18}>
<IconButton
iconSize="medium"
variant="ghost"
icon={IconName.Megaphone}
aria-label="News"
/>
</Badge>
</Stack>
<Avatar src="https://picsum.photos/id/1027/50" size="small" />
</Stack>
}
/>
API
|
Name |
Description |
Type |
Default |
|---|---|---|---|
|
hasBorder? |
Determines if the Appbar should have a border |
boolean |
|
|
leftSide? |
Content to be displayed on the left side of the Appbar |
ReactNode |
|
|
rightActions? |
Additional actions to be displayed on the right side of the Appbar |
ReactNode |
|
|
rightSide? |
Content to be displayed on the right side of the Appbar |
ReactNode |
|
|
small? |
Determines if the Appbar should be displayed in a small size |
boolean |
|