-
-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(badge): complete badge component
- Loading branch information
1 parent
547a77c
commit cd5a84e
Showing
13 changed files
with
282 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| .bigbear-badge{ | ||
| display: inline-block; | ||
| position: relative; | ||
| vertical-align: bottom; | ||
| } | ||
|
|
||
| .bigbear-badge-count{ | ||
| position: absolute; | ||
| z-index: 1000; | ||
| top: 0; | ||
| right: 0; | ||
| transform: translate3d(50%,-50%,0); | ||
| border-radius:$badge-border-radius; | ||
| padding: $badge-padding; | ||
| font-size: $badge-font-size; | ||
| height: 24px; | ||
| } | ||
|
|
||
|
|
||
| .bigbear-badge-count.nochildren{ | ||
| position: static; | ||
| transform: translate3d(0,0,0); | ||
| } | ||
|
|
||
| @each $key,$val in $theme-colors{ | ||
| .bigbear-count-#{$key}{ | ||
| color:#{nth($val,2)}; | ||
| @include neufactory-noactive(nth($val, 1),nth($val,3),nth($val,4)) | ||
| } | ||
| } | ||
| .badge-hide{ | ||
| display: none; | ||
| } | ||
| .badge-dot{ | ||
| @include square(5px); | ||
| border-radius:50%; | ||
| padding: 0; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import React, { useState } from 'react'; | ||
| import Button from '../Button'; | ||
| import Icon from '../Icon'; | ||
| import Badge from './badge'; | ||
|
|
||
| export function BadgeExample(){ | ||
| const [numberObj,setNumber]=useState({ | ||
| trueNumber:0, | ||
| displayNumber:'0' | ||
| }) | ||
| const [visible,setVisible]=useState(false) | ||
| const addValidate=(number:number)=>{ | ||
| if(!visible)setVisible(true) | ||
| if(number+1>99){ | ||
| setNumber({ | ||
| trueNumber:numberObj.trueNumber+1, | ||
| displayNumber:'99+' | ||
| }) | ||
| }else{ | ||
| setNumber({ | ||
| trueNumber:numberObj.trueNumber+1, | ||
| displayNumber:numberObj.trueNumber+1+'' | ||
| }) | ||
| } | ||
| } | ||
| const minusValidate=(number:number)=>{ | ||
| if(number-1<=0){ | ||
| setVisible(false) | ||
| setNumber({trueNumber:0,displayNumber:'0'}) | ||
| }else if(number>0&&number-1<=99){ | ||
| setNumber({ | ||
| trueNumber:numberObj.trueNumber-1, | ||
| displayNumber:numberObj.trueNumber-1+'' | ||
| }) | ||
| }else{ | ||
| setNumber({ | ||
| trueNumber:numberObj.trueNumber-1, | ||
| displayNumber:'99+' | ||
| }) | ||
| } | ||
| } | ||
| return( | ||
| <div> | ||
| <Badge count={numberObj.displayNumber} visible={visible} type='danger'> | ||
| <Button size='lg'><Icon icon='user' theme='dark' /></Button> | ||
| </Badge> | ||
| <hr></hr> | ||
| <div>点击按钮控制角标数字增减，99以上会变成99+：</div> | ||
| <Button onClick={()=>addValidate(numberObj.trueNumber)}>数字加一</Button> | ||
| | ||
| <Button onClick={()=>minusValidate(numberObj.trueNumber)}>数字减一</Button> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks'; | ||
| import Badge from './badge' | ||
| import Button from '../Button' | ||
| import Icon from '../Icon'; | ||
| import {BadgeExample} from './badge.example' | ||
|
|
||
|
|
||
| <Meta title='DISPLAY|Badge 徽章' component={Badge} /> | ||
|
|
||
| <br/> | ||
|
|
||
| # Badge 徽章 | ||
| <br/> | ||
|
|
||
| badge可以单独使用，也可以包裹元素使用，包裹元素会移动到元素右上角。 | ||
|
|
||
| <Preview> | ||
| <Story name='badge'> | ||
| <div> | ||
| <Badge count={100} ><Button>count100</Button></Badge> | ||
| <Badge count={99}></Badge> | ||
| <Badge count={1} type={'primary'}></Badge> | ||
| <Badge count={1000} type={'info'}></Badge> | ||
| <Badge count={<Icon theme='danger' icon ={'coffee'}></Icon>} type={'dark'}></Badge> | ||
| <Badge count={'99+'} type={'danger'}></Badge> | ||
| <Badge dot={true}><Button >只显示圆点</Button></Badge> | ||
| <Badge count={<Icon theme='light' icon ={'spinner'} pulse></Icon>} type={'danger'}><div className='bigbear-list-item' style={{height:'100px',width:'200px'}}></div></Badge> | ||
| </div> | ||
| </Story> | ||
| </Preview> | ||
|
|
||
|
|
||
| 控制上下限等行为需要自行封装，封装示例:👇 | ||
|
|
||
|
|
||
| <Story name='change number'> | ||
| <BadgeExample></BadgeExample> | ||
| </Story> | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| ```jsx | ||
| export function BadgeExample(){ | ||
| const [numberObj,setNumber]=useState({ | ||
| trueNumber:0, | ||
| displayNumber:'0' | ||
| }) | ||
| const [visible,setVisible]=useState(false) | ||
| const addValidate=(number:number)=>{ | ||
| if(!visible)setVisible(true) | ||
| if(number+1>99){ | ||
| setNumber({ | ||
| trueNumber:numberObj.trueNumber+1, | ||
| displayNumber:'99+' | ||
| }) | ||
| }else{ | ||
| setNumber({ | ||
| trueNumber:numberObj.trueNumber+1, | ||
| displayNumber:numberObj.trueNumber+1+'' | ||
| }) | ||
| } | ||
| } | ||
| const minusValidate=(number:number)=>{ | ||
| if(number-1<=0){ | ||
| setVisible(false) | ||
| setNumber({trueNumber:0,displayNumber:'0'}) | ||
| }else if(number>0&&number-1<=99){ | ||
| setNumber({ | ||
| trueNumber:numberObj.trueNumber-1, | ||
| displayNumber:numberObj.trueNumber-1+'' | ||
| }) | ||
| }else{ | ||
| setNumber({ | ||
| trueNumber:numberObj.trueNumber-1, | ||
| displayNumber:'99+' | ||
| }) | ||
| } | ||
| } | ||
| return( | ||
| <div> | ||
| <Badge count={numberObj.displayNumber} visible={visible} type='danger'> | ||
| <Button size='lg'><Icon icon='user' theme='dark' /></Button> | ||
| </Badge> | ||
| <hr></hr> | ||
| <div>点击按钮控制角标数字增减，99以上会变成99+：</div> | ||
| <Button onClick={()=>addValidate(numberObj.trueNumber)}>数字加一</Button> | ||
| | ||
| <Button onClick={()=>minusValidate(numberObj.trueNumber)}>数字减一</Button> | ||
| </div> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
|
|
||
| ## 属性详情 | ||
|
|
||
| <Props of= {Badge}></Props> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import React, { FC,ReactNode, useRef, useEffect } from 'react'; | ||
| import classNames from 'classnames' | ||
|
|
||
|
|
||
|
|
||
| export interface BadgeProps{ | ||
| /** 颜色*/ | ||
| type?:"primary" | "default" | "danger" | "secondary" | "success" | "info" | "light" | "warning" | "dark" ; | ||
| /**最外层元素的额外类名*/ | ||
| className?:string; | ||
| /**ref回调*/ | ||
| refCallback?:(e:HTMLDivElement | null)=>void; | ||
| /** 数字，文本，图标都可以传*/ | ||
| count?:ReactNode; | ||
| /** 控制是否显示*/ | ||
| visible?:boolean | ||
| /** 是否只显示小点 */ | ||
| dot?:boolean | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| export const Badge:FC<BadgeProps> = (props)=>{ | ||
| const {refCallback,className,type,count,visible,dot}=props | ||
| const classes =classNames('bigbear-badge',`bigbear-type-${type}`,className) | ||
| const divref=useRef<HTMLDivElement>(null) | ||
| useEffect(()=>{ | ||
| if(refCallback&&divref.current){ | ||
| refCallback(divref.current) | ||
| } | ||
| },[refCallback]) | ||
| return( | ||
| <div className={classes} ref={divref} > | ||
| {count||dot?<div className={`bigbear-badge-count bigbear-count-${type} | ||
| ${props.children?'':'nochildren'} ${visible?'':'badge-hide'} ${dot?'badge-dot':''}`}> | ||
| <span>{count}</span></div>:null} | ||
| {props.children?props.children:null} | ||
| </div> | ||
| ) | ||
| } | ||
| Badge.defaultProps={ | ||
| type:'danger', | ||
| visible:true, | ||
| dot:false, | ||
| count:'' | ||
| } | ||
|
|
||
| export default Badge; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import Badge from "./badge"; | ||
|
|
||
| export default Badge; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters