1 Star 0 Fork 0

LS/ls-design

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
.changeset
.husky
.vscode
bin
configs
packages
core
docs
icons
playground
react-adaptor
reactify
rollup-plugins
ui-lib
scripts
src
components
actionsheet
badge
button
cascade
cell
checkbox
circle
collapse
countdown
datetimepicker
dialog
empty
form
grid
icon
image
imagepreview
input
list
loading
locale
marquee
navbar
index.tsx
style.css
zh-CN-react.md
noticebar
overlay
picker
popover
popup
progress
pullrefresh
radio
rate
sharesheet
skeleton
stepper
steps
sticky
swipe
swipecell
switch
tab
tabbar
tag
textarea
toast
tooltip
upload
virtuallist
index.ts
types
utils
CHANGELOG.md
README.md
babel.config.js
global-css.js
package.json
rollup.config.ts
tsconfig.json
tsconfig.types.json
.dockerignore
.eslintignore
.eslintrc.js
.gitignore
.prettierignore
.prettierrc
LICENSE
README.md
commitlint.config.js
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
turbo.json
克隆/下载
zh-CN-react.md 2.89 KB
一键复制 编辑 原始数据 按行查看 历史

Navbar


简介

顶部导航栏

安装使用

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}
    />
  );
};

Props

参数 说明 类型 默认值
title 标题 string
lefthide 是否隐藏左侧内容 boolean false
closehide 是否隐藏关闭图标 boolean false
right 右侧节点 string
safearea 安全区适配 boolean false
iconsize 默认图标大小 string 24px
onLeftclick 左侧点击事件 () => void
onRightclick 右侧点击事件 () => void
onClose 关闭点击事件 () => void

样式变量

组件提供了以下 CSS变量,可用于自定义样式

名称 说明 默认值
--navbar-title-font-weight 标题自重 600
--navbar-title-color 标题颜色 inherit
--navbar-left-padding 内部图标左间距 16px
--navbar-left-space 关闭图标左间距 40px
--navbar-right-font-size 右侧字体大小 inherit
--navbar-right-color 右侧字体颜色 inherit
--navbar-right-padding 内部图标右间距 16px
--navbar-right-font-weight 右侧字体大小 inherit
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/LShere/ls-design.git
git@gitee.com:LShere/ls-design.git
LShere
ls-design
ls-design
master

搜索帮助