NavBar导航栏 - 图1

NavBar 导航栏

左侧渲染

  1. import { NavBar, Icon } from 'zarm';
  2. ReactDOM.render(
  3. <NavBar
  4. left={
  5. <Icon
  6. type="arrow-left"
  7. theme="success"
  8. onClick={() => window.history.back()}
  9. />
  10. }
  11. title="这是标题"
  12. />
  13. , mountNode);

右侧渲染

  1. import { NavBar, Icon } from 'zarm';
  2. ReactDOM.render(
  3. <NavBar
  4. title="这是标题这是标题这是标题"
  5. right={
  6. <Icon
  7. type="question-round"
  8. theme="success"
  9. onClick={() => window.alert('click icon')}
  10. />
  11. }
  12. />
  13. , mountNode);

复数渲染

  1. import { NavBar, Icon } from 'zarm';
  2. ReactDOM.render(
  3. <NavBar
  4. left={
  5. <Icon
  6. type="arrow-left"
  7. theme="success"
  8. onClick={() => window.history.back()}
  9. />
  10. }
  11. title="这是标题"
  12. right={
  13. <>
  14. <Icon type="add" theme="success" onClick={() => alert('click icon1')} style={{ marginRight: 16 }} />
  15. <Icon
  16. type="question-round"
  17. theme="success"
  18. onClick={() => alert('click icon2')}
  19. />
  20. </>
  21. }
  22. />
  23. , mountNode);

API

属性类型默认值说明
titleReactNode-标题渲染
leftReactNode-导航栏左侧渲染
rightReactNode-导航栏右侧渲染