logoAnt Design Plus

ScrollableBar

Example Usage

import { ScrollableBar } from '@alitajs/antd-plus';

Demo

SyntaxError: No-Inline evaluations must call `render`.
Basic Simple

Simplest of usage.

expand codeexpand code
const Example = () => {
  return (
    <ScrollableBar 
      key="ScrollableBar-01"
      style={{
        width: 400
      }}
    >
      <ScrollableBar.Item key="item-01">
        helloworld1
      </ScrollableBar.Item>
      <ScrollableBar.Item key="item-02">
        helloworld2
      </ScrollableBar.Item>
      <ScrollableBar.Item key="item-03">
        helloworld3
      </ScrollableBar.Item>
      <ScrollableBar.Item key="item-04">
        helloworld4
      </ScrollableBar.Item>
      <ScrollableBar.Item key="item-05">
        helloworld5
      </ScrollableBar.Item>
      <ScrollableBar.Item key="item-06">
        helloworld6
      </ScrollableBar.Item>
      <ScrollableBar.Item key="item-07">
        helloworld7
      </ScrollableBar.Item>
    </ScrollableBar>
  )
}

render(
  <Example />
)
SyntaxError: No-Inline evaluations must call `render`.
SyntaxError: No-Inline evaluations must call `render`.
Basic Simple

Simplest of usage.

expand codeexpand code
const Example = () => {
  return (
    <ScrollableBar 
      key="ScrollableBar-02"
      activeKey="05"
      className="scrollable-bar-demo-02"
      style={{
        width: 400
      }}
    >
      <ScrollableBar.Item key="01">
        helloworld1
      </ScrollableBar.Item>
      <ScrollableBar.Item key="02">
        helloworld2
      </ScrollableBar.Item>
      <ScrollableBar.Item key="03">
        helloworld3
      </ScrollableBar.Item>
      <ScrollableBar.Item key="04">
        helloworld4
      </ScrollableBar.Item>
      <ScrollableBar.Item key="05">
        helloworld5
      </ScrollableBar.Item>
      <ScrollableBar.Item key="06">
        helloworld6
      </ScrollableBar.Item>
      <ScrollableBar.Item key="07">
        helloworld7
      </ScrollableBar.Item>
    </ScrollableBar>
  )
}

render(
  <Example />
)
SyntaxError: No-Inline evaluations must call `render`.

API#

ScrollableBar#