diff --git a/src/config.json b/src/config.json index 0d12890fdf4962202ae20557088ae85bc22f498a..b7f1e9a88e352bcd8ee9b50cebc860416769f8dc 100644 --- a/src/config.json +++ b/src/config.json @@ -211,7 +211,28 @@ }, { "name": "导航组件", - "packages": [] + "packages": [ + { + "version": "1.0.0", + "name": "NavBar", + "type": "component", + "cName": "导航组件", + "desc": "提供导航功能。", + "sort": 1, + "show": true, + "author": "dsj" + }, + { + "version": "1.0.0", + "name": "Tabbar", + "type": "component", + "cName": "标签栏组件", + "desc": "底部导航常用场景", + "sort": 2, + "show": true, + "author": "dsj" + } + ] }, { "name": "数据录入", diff --git a/src/packages/navbar/demo.tsx b/src/packages/navbar/demo.tsx new file mode 100644 index 0000000000000000000000000000000000000000..823772f69112c68ace36ec644196fb1ed51e0a79 --- /dev/null +++ b/src/packages/navbar/demo.tsx @@ -0,0 +1,40 @@ +import React from 'react' +import { NavBar } from './navbar' + +const NavBarDemo = () => { + return ( + <> +
+

基础用法

+ alert('标题')} + onClickBack={(e) => alert('返回')} + onClickIcon={(e) => alert('icon')} + > + alert('标题')} + onClickBack={(e) => alert('返回')} + onClickClear={(e) => alert('清空')} + > + alert('标题')} + onClickBack={(e) => alert('返回')} + onClickClear={(e) => alert('编辑')} + onClickIcon={(e) => alert('icon')} + > +
+ + ) +} + +export default NavBarDemo diff --git a/src/packages/navbar/doc.md b/src/packages/navbar/doc.md new file mode 100644 index 0000000000000000000000000000000000000000..a7be5c9588346503de97d178fcdab4bb3b315356 --- /dev/null +++ b/src/packages/navbar/doc.md @@ -0,0 +1,98 @@ +# Navbar 头部导航 + +### 介绍 + + +提供导航功能。 + +### 安装 + +```javascript + + + +``` + +### 代码示例 + +### 基本用法 + +```html + alert('标题')} + onClickBack={(e) => alert('返回')} + onClickIcon={(e) => alert('icon')} + > + alert('标题')} + onClickBack={(e) => alert('返回')} + onClickClear={(e) => alert('清空')} + > + alert('标题')} + onClickBack={(e) => alert('返回')} + onClickClear={(e) => alert('编辑')} + onClickIcon={(e) => alert('icon')} + > + +``` + +### 设置slot:tabs可以增加tab + +```html + + + +``` + +### 多tab切换导航及增加右侧按钮 + +```html + + + + + +``` + +### Prop + +| 字段 | 说明 | 类型 | 默认值 | +|-----------------|------------------------------------------------------------------------------------------------|---------|---------| +| title | 标题名称 | String | - | +| desc | 右侧描述 | String | - | +| left-show | 是否展示左侧箭头 | Boolean | false | +| icon | 左侧 [图标名称](#/icon) 或图片链接 | String | - | +| tit-icon | 标题带icon | String | - | + +### Event +| 名称 | 说明 | 回调参数 | +|-------|----------|-------------| +| onClickTitle | 点击页面标题事件 | event:Event | +| onClickClear | 点击右侧文案事件 | event:Event | +| onClickBack | 点击返回上一页事件 | event:Event | +| onClickIcon | 点击右侧icon事件 | event:Event | \ No newline at end of file diff --git a/src/packages/navbar/index.ts b/src/packages/navbar/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..51e46b23d329174ef72235639d1cf7c2a05f8722 --- /dev/null +++ b/src/packages/navbar/index.ts @@ -0,0 +1,2 @@ +import { NavBar } from './navbar' +export default NavBar diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss new file mode 100644 index 0000000000000000000000000000000000000000..3e71864ce098c2bbafb0d07a4fd164d049c54af9 --- /dev/null +++ b/src/packages/navbar/navbar.scss @@ -0,0 +1,34 @@ +.nut-navbar { + position: relative; + display: flex; + justify-content: space-around; + align-items: center; + height: 44px; + padding: 13px 16px; + background: #fff; + box-shadow: 0 1px 7px 0 #edeef1; + font-size: 14px; + color: #666; + margin-bottom: 20px; + &__back { + padding: 0 16px; + &:before { + content: '\e673'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + &__icon { + display: flex; + margin-left: 16px; + .nut-icon:before { + max-width: 100%; + } + } + &__title { + flex: 1; + text-align: center; + } +} diff --git a/src/packages/navbar/navbar.tsx b/src/packages/navbar/navbar.tsx new file mode 100644 index 0000000000000000000000000000000000000000..5839eb0fb0052aabf11160e1fcbb08e3c876b41f --- /dev/null +++ b/src/packages/navbar/navbar.tsx @@ -0,0 +1,65 @@ +import React, { FunctionComponent } from 'react' +import Icon from '../icon' +import bem from '@/utils/bem' +import './navbar.scss' + +export interface NavBarProps { + title: string + desc: string + leftShow: boolean + icon: string + titIcon: string + onClickTitle: (e: React.MouseEvent) => void + onClickIcon: (e: React.MouseEvent) => void + onClickBack: (e: React.MouseEvent) => void + onClickClear: (e: React.MouseEvent) => void +} +const defaultProps = { + title: '', + desc: '', + leftShow: false, + icon: '', + titIcon: '', +} as NavBarProps +export const NavBar: FunctionComponent> = (props) => { + const { + desc, + icon, + title, + titIcon, + leftShow, + onClickTitle, + onClickIcon, + onClickBack, + onClickClear, + } = { + ...defaultProps, + ...props, + } + const b = bem('navbar') + return ( +
+ {leftShow && ( + onClickBack(e)} + > + )} +
onClickTitle(e)}> + {title} + {titIcon && } +
+
onClickClear(e)}> + {desc} +
+ {icon && ( +
onClickIcon(e)}> + +
+ )} +
+ ) +} + +NavBar.defaultProps = defaultProps +NavBar.displayName = 'NutNavBar' diff --git a/src/packages/tabbar/demo.tsx b/src/packages/tabbar/demo.tsx new file mode 100644 index 0000000000000000000000000000000000000000..b9dceb46e9a55696cc0fad331c461d4d3b8dc1c1 --- /dev/null +++ b/src/packages/tabbar/demo.tsx @@ -0,0 +1,67 @@ +import React from 'react' +import { Tabbar, TabbarProps } from './tabbar' +//@ts-ignore todo.. +const { TabbarItem } = Tabbar +const TabbarDemo = () => { + return ( + <> +
+

基础用法

+ { + alert(idx) + }} + > + + + + + + + +

自定义选中

+ + + + + + + + +

徽标提示

+ + + + + + + + +

自定义颜色

+ + + + + + + +

三个icon的tabbar

+ + + + + +

固定底部，可自由跳转

+ + + + + + + +
+ + ) +} + +export default TabbarDemo diff --git a/src/packages/tabbar/doc.md b/src/packages/tabbar/doc.md new file mode 100644 index 0000000000000000000000000000000000000000..682dd310dea8ce5d23c8ed9547bb21eae912483d --- /dev/null +++ b/src/packages/tabbar/doc.md @@ -0,0 +1,33 @@ +# Tabbar组件 + +### 介绍 + +基于 xxxxxxx + +### 安装 + + + +## 代码演示 + +### 基础用法1 + + + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | +|--------------|----------------------------------|--------|------------------| +| name | 图标名称或图片链接 | String | - | +| color | 图标颜色 | String | - | +| size | 图标大小，如 '20px' '2em' '2rem' | String | - | +| class-prefix | 类名前缀，用于使用自定义图标 | String | 'nutui-iconfont' | +| tag | HTML 标签 | String | 'i' | + +### Events + +| 事件名 | 说明 | 回调参数 | +|--------|----------------|--------------| +| click | 点击图标时触发 | event: Event | diff --git a/src/packages/tabbar/index.ts b/src/packages/tabbar/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..c210f9c9465400880552e7ad9d072bac2e3ce54d --- /dev/null +++ b/src/packages/tabbar/index.ts @@ -0,0 +1,2 @@ +import { Tabbar } from './tabbar' +export default Tabbar diff --git a/src/packages/tabbar/tabbar.scss b/src/packages/tabbar/tabbar.scss new file mode 100644 index 0000000000000000000000000000000000000000..bf0c6f608e3ceefc7e4df5499eaabd44d0bb4fdd --- /dev/null +++ b/src/packages/tabbar/tabbar.scss @@ -0,0 +1,20 @@ +.nut-tabbar { + border: 0px; + border-bottom: 1px solid $tabbar-border-color; + border-top: 1px solid $tabbar-border-color; + width: 100%; + display: flex; + height: 50px; + box-sizing: border-box; + background: $white; + + &:last-child { + border-right: 0; + } + &__bottom { + position: fixed; + bottom: 0px; + left: 0px; + z-index: 888; + } +} diff --git a/src/packages/tabbar/tabbar.tsx b/src/packages/tabbar/tabbar.tsx new file mode 100644 index 0000000000000000000000000000000000000000..bc1b95ca8445e24415fb1997222fd8c9d65d921c --- /dev/null +++ b/src/packages/tabbar/tabbar.tsx @@ -0,0 +1,64 @@ +import React, { FunctionComponent, ReactComponentElement, useState } from 'react' +import './tabbar.scss' +import bem from '@/utils/bem' +import { TabbarItem } from '../tabbaritem/tabbarItem' + +export interface TabbarProps { + visible: number | string + bottom: boolean + type: string + size: string + unactiveColor: string + activeColor: string + tabSwitch: (child: React.ReactElement, active: number) => void +} +const defaultProps = { + visible: 0, + bottom: false, + type: '', + size: '', + unactiveColor: '', + activeColor: '', + tabSwitch: () => {}, +} as TabbarProps + +export const Tabbar: FunctionComponent> = (props) => { + const { children, visible, bottom, activeColor, unactiveColor, tabSwitch } = { + ...defaultProps, + ...props, + } + + const b = bem('tabbar') + + const [selectIndex, setSelectIndex] = useState(visible) + + const handleClick = (idx: number) => { + setSelectIndex(idx) + } + + return ( +
+ {React.Children.map(children, (child, idx) => { + if (!React.isValidElement(child)) { + return null + } + const childProps = { + ...child.props, + active: idx === selectIndex, + index: idx, + unactiveColor: unactiveColor, + activeColor: activeColor, + handleClick: () => { + handleClick(idx) + tabSwitch(child, idx) + }, + } + return React.cloneElement(child, childProps) + })} +
+ ) +} +//@ts-ignore todo... +Tabbar.TabbarItem = TabbarItem +Tabbar.defaultProps = defaultProps +Tabbar.displayName = 'NutTabbar' diff --git a/src/packages/tabbaritem/tabbarItem.scss b/src/packages/tabbaritem/tabbarItem.scss new file mode 100644 index 0000000000000000000000000000000000000000..e4cd2118d6193e96d9f23ad54309d96617f3bd4c --- /dev/null +++ b/src/packages/tabbaritem/tabbarItem.scss @@ -0,0 +1,60 @@ +.nut-tabbar-item { + flex: 1; + text-align: center; + text-decoration: none; + color: $primary-color; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + &--unactive { + color: $black; + } + + &__icon-box { + padding: 0px; + display: inline-block; + position: relative; + + &__tips { + position: absolute; + background: $tabbar-active-color; + border: 1px solid $white; + border-radius: 7px; + text-align: center; + top: -2px; + right: -7px; + box-shadow: 0 0 0 1px $white; + font-size: $font-size-1; + color: $white; + z-index: 1; + } + + &__num { + line-height: 1; + font-size: $font-size-0; + color: $white; + padding: 1px 2px 2px 3px; + } + + &__nums { + line-height: 1; + font-size: $font-size-0; + color: $white; + padding: 2px 1px 2px 2px; + } + &_icon { + display: block; + background-size: 100% 100%; + background-position: center center; + } + &--nav-word { + font-size: $font-size-0; + display: block; + } + &--big-word { + font-size: $font-size-large; + line-height: 1; + } + } +} diff --git a/src/packages/tabbaritem/tabbarItem.tsx b/src/packages/tabbaritem/tabbarItem.tsx new file mode 100644 index 0000000000000000000000000000000000000000..cbdd75c8590d9c94e260ee62b2516cd648b8a4fd --- /dev/null +++ b/src/packages/tabbaritem/tabbarItem.tsx @@ -0,0 +1,67 @@ +import React, { FunctionComponent, useEffect } from 'react' +import './tabbaritem.scss' +import bem from '@/utils/bem' +import Icon from '../icon' + +export interface TabbarItemProps { + tabTitle: string + icon: string + href: string + num: string | number + active: boolean + activeColor: string + unactiveColor: string + index: number + handleClick: (idx: number) => void +} +const defaultProps = { + tabTitle: '', + icon: '', + href: '', + num: '', + active: false, + activeColor: '', + unactiveColor: '', + index: 0, + handleClick: (idx) => {}, +} as TabbarItemProps + +export const TabbarItem: FunctionComponent> = (props) => { + const { tabTitle, icon, href, num, active, activeColor, unactiveColor, index, handleClick } = { + ...defaultProps, + ...props, + } + const b = bem('tabbar-item') + const bIcon = bem('tabbar-item__icon-box') + + useEffect(() => { + if (active && href) { + window.location.href = href + } + }, [active]) + + return ( +
{ + handleClick(index) + }} + > +
+ {num && num <= 99 &&
{num}
} + {num && num >= 100 &&
99+
} + {icon && ( +
+ +
+ )} +
+ {tabTitle} +
+
+
+ ) +}