Skip to content

Files

Failed to load latest commit information.

Latest commit

 Cannot retrieve latest commit at this time.

History

History
 
 

chrome

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
stories
stories
 
 
.size-snapshot.json
.size-snapshot.json
 
 
README.md
README.md
 
 
package.json
package.json
 
 
tsconfig.build.json
tsconfig.build.json
 
 
yarn.lock
yarn.lock
 
 

README.md

@zendeskgarden/react-chrome npm version

Collection of elements relating to the Chrome component within the Garden Design System

Installation

npm install @zendeskgarden/react-chrome

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming

Usages

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Chrome, Nav, NavItem, ... } from '@zendeskgarden/react-chrome';
import ConnectIcon from '@zendeskgarden/icons/src/26/relationshape-connect.svg';

<ThemeProvider>
  <Chrome>
    <Nav isExpanded>
      <NavItem hasLogo product="connect" title="Zendesk Connect">
        <NavItemIcon>
          <ConnectIcon />
        </NavItemIcon>
        <NavItemText>Zendesk Connect</NavItemText>
      </NavItem>
      <NavItem isCurrent>
        <NavItemIcon>
          <HomeIcon />
        </NavItemIcon>
        <NavItemText>Home</NavItemText>
      </NavItem>
    </Nav>
    <SubNav>
      <SubNavItem isCurrent>
        <SubNavItemText>Subnav 1</SubNavItemText>
      </SubNavItem>
      ...
    </SubNav>
    <Body>
      <Header>
        ...
      </Header>
      <Content>
        <Main>
          Lorem ipsum...
        </Main>
      </Content>
    </Body>
  </Chrome>
</ThemeProvider>