Tes styleguide

This is the SmartNav component

Package version

npm i module-tsl-ui-smart-nav --save

5.4.15

imports

import { SmartNav } from 'module-tsl-ui-smart-nav';

@import '~module-tsl-ui-smart-nav/smart-nav';

example for desktop (editable)

<div className="smart-nav--inline-wrapper" style={{ backgroundColor: '#FAFAFA', padding: 60, paddingBottom: 200 }}>
  <Popover
    content={<SmartNav menu={[
  {
    label: 'SPaG',
    children: [
      {
        label: 'Year 4',
        children: [
          { label: 'Conjunction and clauses' },
          { label: 'Adjectives' },
          { label: 'Adverbs' },
          { label: 'Logarithms rules' },
          { label: 'Differential of a function' },
        ],
      },
      {
        label: 'Year 2',
        children: [{ label: 'Alphabet' }, { label: 'Colors' }, { label: 'Painting' }],
      },
    ],
  },
  {
    label: 'Numbers',
    children: [{ label: 'Difference' }, { label: 'Addition' }],
  },
]} initialTitle="Topics" resetAll="All elements" keepOpen disableFullScreen />}
    placement="bottom"
  >
    <Button>Navigate!</Button>
  </Popover>
</div>

example for mobile (editable)

<div style={{ backgroundColor: '#FAFAFA', padding: 10 }}>
  <SmartNav
    menu={[
  {
    label: 'SPaG',
    children: [
      {
        label: 'Year 4',
        children: [
          { label: 'Conjunction and clauses' },
          { label: 'Adjectives' },
          { label: 'Adverbs' },
          { label: 'Logarithms rules' },
          { label: 'Differential of a function' },
        ],
      },
      {
        label: 'Year 2',
        children: [{ label: 'Alphabet' }, { label: 'Colors' }, { label: 'Painting' }],
      },
    ],
  },
  {
    label: 'Numbers',
    children: [{ label: 'Difference' }, { label: 'Addition' }],
  },
]}
    initialTitle="Topics"
    resetAll="All elements"
    onDone={checkedItems => console.log(checkedItems)}
  />
</div>

Props

We couldn't detect props! Check if __docgenInfo is correctly defined

storybook

View SmartNav storybook stories