Using OKA Design system you need to wrap your complete application in a
<OkaLayout></OkaLayout>
to make it work. Below is a simple Layout to get started place the below code in App.js or App.tsx
<OkaLayout themeBuilder={false}>
<OkaSider>
<OkaSiderItem to="/pathname" title="Some Text" />
<OkaSiderItem to="/pathname" title="some Text">
<OkaSiderSubMenuItem>
<OkaSiderItem to="/pathname" title="Some Text" />
</OkaSiderSubMenuItem>
</OkaSiderItem>
</OkaSider>
<OkaMain>
<OkaHeader titleText="Title Text" showLogo={false}>
<OkaItem display={"flex"} alignX="end" alignY={"center"}>
<OkaHeaderCollapse>
<OkaHeaderMenuItem to="https://bridge.ferrum.network/" title="Bridge Ferrum" target="_blank" />
<OkaHeaderMenuItem to="/global/sizing" title="Sizing" />
<OkaSiderSubMenuItem>
<OkaHeaderMenuItem to="/pathname" title="Some Text" />
</OkaSiderSubMenuItem>
</OkaHeaderMenuItem>
<OkaHeaderMenuItem to="/components/forms" title="Components">
<OkaHeaderSubMenuItem>
<OkaHeaderMenuItem to="/components/forms" title="Forms" />
</OkaHeaderSubMenuItem>
</OkaHeaderMenuItem>
</OkaHeaderCollapse>
</OkaItem>
</OkaHeader>
<OkaContainer type="fluid">
<OkaContainer>
<OkaTypo size={40} weight={500}>
Add you switch/route here
</OkaTypo>
<OkaCardTitle title></OkaCardTitle>
<OkaButton
title="Connect"
btnInfo={
<OkaItem display={"flex"}>
<OkaTruncateText className="oka-ml-1" text={"0x071ef1A1f8B92A2d4E48b35705481c92E64b3d08"} />
</OkaItem>
}
/>
</OkaContainer>
<OkaFooter />
</OkaMain>
</OkaLayout>
Layout Components
- OkaLayout
- OkaContainer
- OkaMain
Header Components
- OkaHeader
- OkaHeaderCollapse
- OkaHeaderMenuItem
- OkaHeaderSubMenuItem
Footer Component
- OkaFooter
Grid Component
- OkaGrid
- OkaGridItem
- OkaCard
SiderBar Components
- OkaSider
- OkaSiderItem
- OkaSiderSubMenuItemem
Drawer Components
- OkaDrawer
Other Useful Component
- OkaTruncateText
- OkaItem
- OkaTypo
- OkaIcon -
- OkaResponseBar
- OkaDivider
- OkaList
- OkaListItem
- OkaLabel
- OkaTooltip
- OkaLink
Card Components
- OkaCardTitle
Button Components
- OkaButton
Dialog Components
- OkaDialog
Form Components
- OkaTextarea
- OkaInputText
- OkaInputRadio
- OkaInputCheckbox
- OkaSelect
- OkaDatepicker
Table Compnent
- OkaTable
Loader Compnent
- OkaLoader
Extra Features
- ThemeBuilder
- OkaThemeProvider