{"componentChunkName":"component---src-templates-components-tsx","path":"/components/scrollable-bar","webpackCompilationHash":"1daf920fd56dc476eb98","result":{"data":{"markdownRemark":{"description":{"descriptionHtml":"","apiHtml":"

API#

\n

ScrollableBar#

"},"tableOfContents":"","frontmatter":{"title":{"zh_CN":"ScrollableBar","en_US":"ScrollableBar"},"order":1,"type":"Basic Components"},"fields":{"path":"/components/scrollable-bar/index.en-US.md","slug":"/components/scrollable-bar","modifiedTime":1576230292798}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":{"zh_CN":"SendCode","en_US":"SendCode"},"order":1,"subtitle":"发送验证码组件","type":"基础组件"},"fields":{"slug":"/components/send-code-cn","path":"/components/send-code/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"SendCode","en_US":"SendCode"},"order":1,"subtitle":"Send verification code component","type":"Basic Components"},"fields":{"slug":"/components/send-code","path":"/components/send-code/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ScrollableBar","en_US":"ScrollableBar"},"order":1,"subtitle":"滚动条","type":"基础组件"},"fields":{"slug":"/components/scrollable-bar-cn","path":"/components/scrollable-bar/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ScrollableBar","en_US":"ScrollableBar"},"order":1,"subtitle":"ScrollableBar","type":"Basic Components"},"fields":{"slug":"/components/scrollable-bar","path":"/components/scrollable-bar/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FullScreen","en_US":"FullScreen"},"order":3,"subtitle":"全屏组件","type":"基础组件"},"fields":{"slug":"/components/full-screen-cn","path":"/components/full-screen/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FullScreen","en_US":"FullScreen"},"order":3,"subtitle":"Full Screen","type":"Basic Components"},"fields":{"slug":"/components/full-screen","path":"/components/full-screen/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FitText","en_US":"FitText"},"order":2,"subtitle":"适应文本","type":"基础组件"},"fields":{"slug":"/components/fit-text-cn","path":"/components/fit-text/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FitText","en_US":"FitText"},"order":2,"subtitle":"Adaptive Text","type":"Basic Components"},"fields":{"slug":"/components/fit-text","path":"/components/fit-text/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ErrorBoundary","en_US":"ErrorBoundary"},"order":5,"subtitle":null,"type":"基础组件"},"fields":{"slug":"/components/error-boundary-cn","path":"/components/error-boundary/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ErrorBoundary","en_US":"ErrorBoundary"},"order":5,"subtitle":null,"type":"Basic Components"},"fields":{"slug":"/components/error-boundary","path":"/components/error-boundary/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ButtonList","en_US":"ButtonList"},"order":4,"subtitle":"适应文本","type":"基础组件"},"fields":{"slug":"/components/button-list-cn","path":"/components/button-list/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ButtonList","en_US":"ButtonList"},"order":4,"subtitle":"Button Group","type":"Basic Components"},"fields":{"slug":"/components/button-list","path":"/components/button-list/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"Authorized","en_US":"Authorized"},"order":5,"subtitle":"权限组件","type":"业务组件"},"fields":{"slug":"/components/authorized-cn","path":"/components/authorized/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"Authorized","en_US":"Authorized"},"order":5,"subtitle":"Authorized Component","type":"Business Components"},"fields":{"slug":"/components/authorized","path":"/components/authorized/index.en-US.md"}}}]},"demos":{"edges":[{"node":{"content":{"content":{"zh-CN":"\n

基础样例

\n","en-US":"\n

Simplest of usage.

\n"},"highlightedCode":"
const Example = () => {\n  return (\n    <ScrollableBar \n      key=\"ScrollableBar-01\"\n      style={{\n        width: 400\n      }}\n    >\n      <ScrollableBar.Item key=\"item-01\">\n        helloworld1\n      </ScrollableBar.Item>\n      <ScrollableBar.Item key=\"item-02\">\n        helloworld2\n      </ScrollableBar.Item>\n      <ScrollableBar.Item key=\"item-03\">\n        helloworld3\n      </ScrollableBar.Item>\n      <ScrollableBar.Item key=\"item-04\">\n        helloworld4\n      </ScrollableBar.Item>\n      <ScrollableBar.Item key=\"item-05\">\n        helloworld5\n      </ScrollableBar.Item>\n      <ScrollableBar.Item key=\"item-06\">\n        helloworld6\n      </ScrollableBar.Item>\n      <ScrollableBar.Item key=\"item-07\">\n        helloworld7\n      </ScrollableBar.Item>\n    </ScrollableBar>\n  )\n}\n\nrender(\n  <Example />\n)
"},"code":"\"use strict\";\n\nvar Example = function Example() {\n return React.createElement(ScrollableBar, {\n key: \"ScrollableBar-01\",\n style: {\n width: 400\n }\n }, React.createElement(ScrollableBar.Item, {\n key: \"item-01\"\n }, \"helloworld1\"), React.createElement(ScrollableBar.Item, {\n key: \"item-02\"\n }, \"helloworld2\"), React.createElement(ScrollableBar.Item, {\n key: \"item-03\"\n }, \"helloworld3\"), React.createElement(ScrollableBar.Item, {\n key: \"item-04\"\n }, \"helloworld4\"), React.createElement(ScrollableBar.Item, {\n key: \"item-05\"\n }, \"helloworld5\"), React.createElement(ScrollableBar.Item, {\n key: \"item-06\"\n }, \"helloworld6\"), React.createElement(ScrollableBar.Item, {\n key: \"item-07\"\n }, \"helloworld7\"));\n};\n\nrender(React.createElement(Example, null));","frontmatter":{"title":{"zh_CN":"基础样例","en_US":"Basic Simple"},"cols":null,"order":0,"subtitle":null,"type":null},"fields":{"slug":"/components/scrollable-bar/demo/simple","path":"/components/scrollable-bar/demo/simple.md"}}},{"node":{"content":{"content":{"zh-CN":"\n

切换选择

\n","en-US":"\n

Simplest of usage.

\n"},"highlightedCode":"
const Example = () => {\n  return (\n    <ScrollableBar \n      key=\"ScrollableBar-02\"\n      activeKey=\"05\"\n      className=\"scrollable-bar-demo-02\"\n      style={{\n        width: 400\n      }}\n    >\n      <ScrollableBar.Item key=\"01\">\n        helloworld1\n      </ScrollableBar.Item>\n      <ScrollableBar.Item key=\"02\">\n        helloworld2\n      </ScrollableBar.Item>\n      <ScrollableBar.Item key=\"03\">\n        helloworld3\n      </ScrollableBar.Item>\n      <ScrollableBar.Item key=\"04\">\n        helloworld4\n      </ScrollableBar.Item>\n      <ScrollableBar.Item key=\"05\">\n        helloworld5\n      </ScrollableBar.Item>\n      <ScrollableBar.Item key=\"06\">\n        helloworld6\n      </ScrollableBar.Item>\n      <ScrollableBar.Item key=\"07\">\n        helloworld7\n      </ScrollableBar.Item>\n    </ScrollableBar>\n  )\n}\n\nrender(\n  <Example />\n)
\n"},"code":"\"use strict\";\n\nvar Example = function Example() {\n return React.createElement(ScrollableBar, {\n key: \"ScrollableBar-02\",\n activeKey: \"05\",\n className: \"scrollable-bar-demo-02\",\n style: {\n width: 400\n }\n }, React.createElement(ScrollableBar.Item, {\n key: \"01\"\n }, \"helloworld1\"), React.createElement(ScrollableBar.Item, {\n key: \"02\"\n }, \"helloworld2\"), React.createElement(ScrollableBar.Item, {\n key: \"03\"\n }, \"helloworld3\"), React.createElement(ScrollableBar.Item, {\n key: \"04\"\n }, \"helloworld4\"), React.createElement(ScrollableBar.Item, {\n key: \"05\"\n }, \"helloworld5\"), React.createElement(ScrollableBar.Item, {\n key: \"06\"\n }, \"helloworld6\"), React.createElement(ScrollableBar.Item, {\n key: \"07\"\n }, \"helloworld7\"));\n};\n\nrender(React.createElement(Example, null));","frontmatter":{"title":{"zh_CN":"作为切换选择","en_US":"Basic Simple"},"cols":null,"order":0,"subtitle":null,"type":null},"fields":{"slug":"/components/scrollable-bar/demo/select-item","path":"/components/scrollable-bar/demo/select-item.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/components/scrollable-bar","demo":"/scrollable-bar/demo/"}}}