oka-design-system

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
oka-design-system
0.2.04 months ago4 months agoMinified + gzip package size for oka-design-system in KB

Readme

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 ```
<OkaSiderItem to="/pathname" title="Some Text" />
<OkaSiderItem to="/pathname" title="some Text">
<OkaSiderSubMenuItem>
<OkaSiderItem to="/pathname" title="Some Text" />
</OkaSiderSubMenuItem>
</OkaSiderItem>
<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 />
``` 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