import { Navbar } from '@ls-design/ui-react';

<Navbar title="页面标题"></Navbar> <Navbar title="左标题" closehide className="left"></Navbar>

.left {
  text-align: left;
  padding-left: 50px;
}

<Navbar title="页面标题" class="bg" righttext="分享"></Navbar>
<Navbar title="小号图标" class="bg2" iconsize="18" righttext="分享"></Navbar>

.bg {
  background: linear-gradient(to right, #7ec1ff, #2197ff);
  color: #fff;
}
.bg2 {
  background: purple;
  color: #fff;
}

<Navbar title="左侧自定义图标展示">
  <div className="icon" slot="left"></div>
</Navbar>
<Navbar title="左侧文字展示">
  <span slot="left">返回</span>
</Navbar>

<Navbar title="右侧图标展示">
  <div className="icon" slot="right"></div>
</Navbar>
<Navbar right="分享" title="右侧文字展示"></Navbar>

export default () => {
  const onLeftClick = () => {
    Toast.text('返回');
  };

  const onRightClick = () => {
    Toast.text('清除');
  };

  const close = () => {
    Toast.text('close');
  };

  return (
    <Navbar
      right="分享"
      title="Click left or right"
      onLeftclick={onLeftClick}
      onRightclick={onRightClick}
      onClose={close}
    />
  );
};