Novel Planetary Movement

    oka-design-system
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    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

    Keywords

    none

    Install

    npm i oka-design-system

    DownloadsWeekly Downloads

    0

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    556 kB

    Total Files

    234

    Last publish

    Collaborators

    • magrafay