mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-01 11:38:36 +08:00
feat: badge support slot type count
This commit is contained in:
tangjinzhou
parent
27880b0110
commit
843b074fed
@ -2,12 +2,14 @@
|
||||
import PropTypes from '../_util/vue-types'
|
||||
import ScrollNumber from './ScrollNumber'
|
||||
import classNames from 'classnames'
|
||||
import { initDefaultProps, filterEmpty } from '../_util/props-util'
|
||||
import { initDefaultProps, filterEmpty, getComponentFromProp } from '../_util/props-util'
|
||||
import { cloneElement } from '../_util/vnode'
|
||||
import getTransitionProps from '../_util/getTransitionProps'
|
||||
import isNumeric from '../_util/isNumeric'
|
||||
|
||||
export const BadgeProps = {
|
||||
/** Number to show in badge */
|
||||
count: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
|
||||
count: PropTypes.any,
|
||||
showZero: PropTypes.bool,
|
||||
/** Max count to show */
|
||||
overflowCount: PropTypes.number,
|
||||
@ -27,85 +29,162 @@ export default {
|
||||
props: initDefaultProps(BadgeProps, {
|
||||
prefixCls: 'ant-badge',
|
||||
scrollNumberPrefixCls: 'ant-scroll-number',
|
||||
count: null,
|
||||
showZero: false,
|
||||
dot: false,
|
||||
overflowCount: 99,
|
||||
}),
|
||||
methods: {
|
||||
getBadgeClassName () {
|
||||
const { prefixCls, status } = this.$props
|
||||
const children = filterEmpty(this.$slots.default)
|
||||
return classNames(prefixCls, {
|
||||
[`${prefixCls}-status`]: !!status,
|
||||
[`${prefixCls}-not-a-wrapper`]: !children.length,
|
||||
})
|
||||
},
|
||||
|
||||
isZero () {
|
||||
const numberedDispayCount = this.getNumberedDispayCount()
|
||||
return numberedDispayCount === '0' || numberedDispayCount === 0
|
||||
},
|
||||
|
||||
isDot () {
|
||||
const { dot, status } = this.$props
|
||||
const isZero = this.isZero()
|
||||
return (dot && !isZero) || status
|
||||
},
|
||||
|
||||
isHidden () {
|
||||
const { showZero } = this.$props
|
||||
const displayCount = this.getDispayCount()
|
||||
const isZero = this.isZero()
|
||||
const isDot = this.isDot()
|
||||
const isEmpty = displayCount === null || displayCount === undefined || displayCount === ''
|
||||
return (isEmpty || (isZero && !showZero)) && !isDot
|
||||
},
|
||||
|
||||
getNumberedDispayCount () {
|
||||
const { overflowCount } = this.$props
|
||||
const count = this.badgeCount
|
||||
const displayCount =
|
||||
count > overflowCount ? `${overflowCount}+` : count
|
||||
return displayCount
|
||||
},
|
||||
|
||||
getDispayCount () {
|
||||
const isDot = this.isDot()
|
||||
// dot mode don't need count
|
||||
if (isDot) {
|
||||
return ''
|
||||
}
|
||||
return this.getNumberedDispayCount()
|
||||
},
|
||||
|
||||
getScollNumberTitle () {
|
||||
const { title } = this.$props
|
||||
const count = this.badgeCount
|
||||
if (title) {
|
||||
return title
|
||||
}
|
||||
return typeof count === 'string' || typeof count === 'number' ? count : undefined
|
||||
},
|
||||
|
||||
getStyleWithOffset () {
|
||||
const { offset, numberStyle } = this.$props
|
||||
return offset
|
||||
? {
|
||||
right: `${-parseInt(offset[0], 10)}px`,
|
||||
marginTop: isNumeric(offset[1]) ? `${offset[1]}px` : offset[1],
|
||||
...numberStyle,
|
||||
}
|
||||
: numberStyle
|
||||
},
|
||||
|
||||
renderStatusText () {
|
||||
const { prefixCls, text } = this.$props
|
||||
const hidden = this.isHidden()
|
||||
return hidden || !text ? null : <span class={`${prefixCls}-status-text`}>{text}</span>
|
||||
},
|
||||
|
||||
renderDispayComponent () {
|
||||
const count = this.badgeCount
|
||||
const customNode = count
|
||||
if (!customNode || typeof customNode !== 'object') {
|
||||
return undefined
|
||||
}
|
||||
return cloneElement(customNode, {
|
||||
style: this.getStyleWithOffset(),
|
||||
})
|
||||
},
|
||||
|
||||
renderBadgeNumber () {
|
||||
const { prefixCls, scrollNumberPrefixCls, status } = this.$props
|
||||
const count = this.badgeCount
|
||||
const displayCount = this.getDispayCount()
|
||||
const isDot = this.isDot()
|
||||
const hidden = this.isHidden()
|
||||
|
||||
const scrollNumberCls = {
|
||||
[`${prefixCls}-dot`]: isDot,
|
||||
[`${prefixCls}-count`]: !isDot,
|
||||
[`${prefixCls}-multiple-words`]:
|
||||
!isDot && count && count.toString && count.toString().length > 1,
|
||||
[`${prefixCls}-status-${status}`]: !!status,
|
||||
}
|
||||
|
||||
return hidden ? null : (
|
||||
<ScrollNumber
|
||||
prefixCls={scrollNumberPrefixCls}
|
||||
data-show={!hidden}
|
||||
v-show={!hidden}
|
||||
className={scrollNumberCls}
|
||||
count={displayCount}
|
||||
displayComponent={this.renderDispayComponent()} // <Badge status="success" count={<Icon type="xxx" />}></Badge>
|
||||
title={this.getScollNumberTitle()}
|
||||
style={this.getStyleWithOffset()}
|
||||
key='scrollNumber'
|
||||
/>
|
||||
)
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const {
|
||||
count,
|
||||
showZero,
|
||||
prefixCls,
|
||||
scrollNumberPrefixCls,
|
||||
overflowCount,
|
||||
dot,
|
||||
status,
|
||||
text,
|
||||
offset,
|
||||
$slots,
|
||||
numberStyle,
|
||||
title,
|
||||
} = this
|
||||
let displayCount = count > overflowCount ? `${overflowCount}+` : count
|
||||
const isZero = displayCount === '0' || displayCount === 0
|
||||
const isDot = (dot && !isZero) || status
|
||||
// dot mode don't need count
|
||||
if (isDot) {
|
||||
displayCount = ''
|
||||
}
|
||||
const children = filterEmpty($slots.default)
|
||||
const isEmpty = displayCount === null || displayCount === undefined || displayCount === ''
|
||||
const hidden = (isEmpty || (isZero && !showZero)) && !isDot
|
||||
let count = getComponentFromProp(this, 'count')
|
||||
if (Array.isArray(count)) {
|
||||
count = count[0]
|
||||
}
|
||||
this.badgeCount = count
|
||||
const scrollNumber = this.renderBadgeNumber()
|
||||
const statusText = this.renderStatusText()
|
||||
const statusCls = classNames({
|
||||
[`${prefixCls}-status-dot`]: !!status,
|
||||
[`${prefixCls}-status-${status}`]: !!status,
|
||||
})
|
||||
const scrollNumberCls = classNames({
|
||||
[`${prefixCls}-dot`]: isDot,
|
||||
[`${prefixCls}-count`]: !isDot,
|
||||
[`${prefixCls}-multiple-words`]: !isDot && count && count.toString && count.toString().length > 1,
|
||||
[`${prefixCls}-status-${status}`]: !!status,
|
||||
})
|
||||
const badgeCls = classNames(prefixCls, {
|
||||
[`${prefixCls}-status`]: !!status,
|
||||
[`${prefixCls}-not-a-wrapper`]: !children.length,
|
||||
})
|
||||
const styleWithOffset = offset ? {
|
||||
right: -parseInt(offset[0], 10),
|
||||
marginTop: typeof offset[1] === 'number' ? `${offset[1]}px` : offset[1],
|
||||
...numberStyle,
|
||||
} : numberStyle
|
||||
// <Badge status="success" />
|
||||
|
||||
// <Badge status="success" />
|
||||
if (!children.length && status) {
|
||||
return (
|
||||
<span {...{ on: this.$listeners }} class={badgeCls} style={styleWithOffset}>
|
||||
<span
|
||||
{...{ on: this.$listeners }}
|
||||
class={this.getBadgeClassName()}
|
||||
style={this.getStyleWithOffset()}
|
||||
>
|
||||
<span class={statusCls} />
|
||||
<span class={`${prefixCls}-status-text`}>{text}</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
const scrollNumber = hidden ? null : (
|
||||
<ScrollNumber
|
||||
prefixCls={scrollNumberPrefixCls}
|
||||
v-show={!hidden}
|
||||
class={scrollNumberCls}
|
||||
count={displayCount}
|
||||
title={title || count}
|
||||
style={styleWithOffset}
|
||||
key='scrollNumber'
|
||||
/>
|
||||
)
|
||||
|
||||
const statusText = (hidden || !text) ? null : (
|
||||
<span class={`${prefixCls}-status-text`}>{text}</span>
|
||||
)
|
||||
const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : '')
|
||||
|
||||
return (<span {...{ on: this.$listeners }} class={badgeCls}>
|
||||
return (<span {...{ on: this.$listeners }} class={this.getBadgeClassName()}>
|
||||
{children}
|
||||
<transition {...transitionProps}>
|
||||
{scrollNumber}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
|
||||
import classNames from 'classnames'
|
||||
import PropTypes from '../_util/vue-types'
|
||||
import BaseMixin from '../_util/BaseMixin'
|
||||
import { getStyle } from '../_util/props-util'
|
||||
import omit from 'omit.js'
|
||||
import { cloneElement } from '../_util/vnode'
|
||||
|
||||
function getNumberArray (num) {
|
||||
return num
|
||||
@ -14,9 +15,11 @@ function getNumberArray (num) {
|
||||
|
||||
const ScrollNumberProps = {
|
||||
prefixCls: PropTypes.string.def('ant-scroll-number'),
|
||||
count: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]).def(null),
|
||||
count: PropTypes.any,
|
||||
component: PropTypes.string,
|
||||
title: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
|
||||
displayComponent: PropTypes.any,
|
||||
className: PropTypes.object,
|
||||
}
|
||||
|
||||
export default {
|
||||
@ -105,13 +108,19 @@ export default {
|
||||
},
|
||||
|
||||
render () {
|
||||
const { prefixCls, title, component: Tag = 'sup' } = this
|
||||
const { prefixCls, title, component: Tag = 'sup', displayComponent, className } = this
|
||||
if (displayComponent) {
|
||||
return cloneElement(displayComponent, {
|
||||
class: `${prefixCls}-custom-component`,
|
||||
})
|
||||
}
|
||||
const style = getStyle(this, true)
|
||||
// fix https://fb.me/react-unknown-prop
|
||||
const restProps = omit(this.$props, [
|
||||
'count',
|
||||
'component',
|
||||
'prefixCls',
|
||||
'displayComponent',
|
||||
])
|
||||
const newProps = {
|
||||
props: {
|
||||
@ -120,8 +129,8 @@ export default {
|
||||
attrs: {
|
||||
title,
|
||||
},
|
||||
class: prefixCls,
|
||||
style,
|
||||
class: classNames(prefixCls, className),
|
||||
}
|
||||
// allow specify the border
|
||||
// mock border-color by box-shadow for compatible with old usage:
|
||||
@ -129,6 +138,7 @@ export default {
|
||||
if (style && style.borderColor) {
|
||||
newProps.style.boxShadow = `0 0 0 1px ${style.borderColor} inset`
|
||||
}
|
||||
|
||||
return (
|
||||
<Tag {...newProps} >
|
||||
{ this.renderNumberElement()}
|
||||
|
||||
@ -1,28 +1,28 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/badge/demo/basic.md correctly 1`] = `<div><span class="ant-badge"><a href="#" class="head-example"></a><sup title="5" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter"><span class="ant-scroll-number-only" style="transform: translateY(-1500%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="current">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span> <span class="ant-badge"><a href="#" class="head-example"></a><sup title="0" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter"><span class="ant-scroll-number-only" style="transform: translateY(-1000%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="current">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span></div>`;
|
||||
exports[`renders ./components/badge/demo/basic.md correctly 1`] = `<div><span class="ant-badge"><a href="#" class="head-example"></a><sup title="5" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1500%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="current">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span> <span class="ant-badge"><a href="#" class="head-example"></a><sup title="0" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1000%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="current">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span> <span class="ant-badge"><a href="#" class="head-example"></a><i class="anticon anticon-clock-circle ant-scroll-number-custom-component ant-badge-zoom-enter" style="color: rgb(245, 34, 45);" data-show="true"><svg viewBox="64 64 896 896" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></i></span></div>`;
|
||||
|
||||
exports[`renders ./components/badge/demo/change.md correctly 1`] = `
|
||||
<div>
|
||||
<div><span class="ant-badge"><a href="#" class="head-example"></a><sup title="5" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter"><span class="ant-scroll-number-only" style="transform: translateY(-1500%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="current">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>
|
||||
<div><span class="ant-badge"><a href="#" class="head-example"></a><sup title="5" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1500%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="current">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>
|
||||
<div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-minus"><svg viewBox="64 64 896 896" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
|
||||
</svg></i></button><button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
|
||||
</svg></i></button></div>
|
||||
</div>
|
||||
<div style="margin-top: 10px;"><span class="ant-badge"><a href="#" class="head-example"></a><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter"></sup></span> <button type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></button></div>
|
||||
<div style="margin-top: 10px;"><span class="ant-badge"><a href="#" class="head-example"></a><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter" data-show="true"></sup></span> <button type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/dot.md correctly 1`] = `<div id="components-badge-demo-dot"><span class="ant-badge"><i class="anticon anticon-notification"><svg viewBox="64 64 896 896" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></i><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter"></sup></span> <span class="ant-badge"><i class="anticon anticon-notification"><svg viewBox="64 64 896 896" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></i><!----></span> <span class="ant-badge"><a href="#">Link something</a><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter"></sup></span></div>`;
|
||||
exports[`renders ./components/badge/demo/dot.md correctly 1`] = `<div id="components-badge-demo-dot"><span class="ant-badge"><i class="anticon anticon-notification"><svg viewBox="64 64 896 896" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></i><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter" data-show="true"></sup></span> <span class="ant-badge"><i class="anticon anticon-notification"><svg viewBox="64 64 896 896" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></i><!----></span> <span class="ant-badge"><a href="#">Link something</a><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter" data-show="true"></sup></span></div>`;
|
||||
|
||||
exports[`renders ./components/badge/demo/link.md correctly 1`] = `<a href="#"><span class="ant-badge"><span class="head-example"></span><sup title="5" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter"><span class="ant-scroll-number-only" style="transform: translateY(-1500%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="current">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span></a>`;
|
||||
exports[`renders ./components/badge/demo/link.md correctly 1`] = `<a href="#"><span class="ant-badge"><span class="head-example"></span><sup title="5" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1500%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="current">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span></a>`;
|
||||
|
||||
exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `<div><span class="ant-badge ant-badge-not-a-wrapper"><sup title="25" class="ant-scroll-number ant-badge-count ant-badge-multiple-words -enter"><span class="ant-scroll-number-only" style="transform: translateY(-1200%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="current">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-1500%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="current">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span> <span class="ant-badge ant-badge-not-a-wrapper"><sup title="4" class="ant-scroll-number ant-badge-count -enter" style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); box-shadow: 0 0 0 1px #d9d9d9 inset;"><span class="ant-scroll-number-only" style="transform: translateY(-1400%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="current">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span> <span class="ant-badge ant-badge-not-a-wrapper"><sup title="109" class="ant-scroll-number ant-badge-count ant-badge-multiple-words -enter" style="background-color: rgb(82, 196, 26);">99+</sup></span></div>`;
|
||||
exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `<div><span class="ant-badge ant-badge-not-a-wrapper"><sup title="25" class="ant-scroll-number ant-badge-count ant-badge-multiple-words -enter" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1200%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="current">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-1500%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="current">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span> <span class="ant-badge ant-badge-not-a-wrapper"><sup title="4" class="ant-scroll-number ant-badge-count -enter" style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); box-shadow: 0 0 0 1px #d9d9d9 inset;" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1400%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="current">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span> <span class="ant-badge ant-badge-not-a-wrapper"><sup title="109" class="ant-scroll-number ant-badge-count ant-badge-multiple-words -enter" style="background-color: rgb(82, 196, 26);" data-show="true">99+</sup></span></div>`;
|
||||
|
||||
exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `<div><span class="ant-badge"><a href="#" class="head-example"></a><sup title="99" class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-zoom-enter"><span class="ant-scroll-number-only" style="transform: translateY(-1900%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="current">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-1900%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="current">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span> <span class="ant-badge"><a href="#" class="head-example"></a><sup title="100" class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-zoom-enter">99+</sup></span> <span class="ant-badge"><a href="#" class="head-example"></a><sup title="99" class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-zoom-enter">10+</sup></span> <span class="ant-badge"><a href="#" class="head-example"></a><sup title="1000" class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-zoom-enter">999+</sup></span></div>`;
|
||||
exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `<div><span class="ant-badge"><a href="#" class="head-example"></a><sup title="99" class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-zoom-enter" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1900%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="current">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-1900%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="current">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span> <span class="ant-badge"><a href="#" class="head-example"></a><sup title="100" class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-zoom-enter" data-show="true">99+</sup></span> <span class="ant-badge"><a href="#" class="head-example"></a><sup title="99" class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-zoom-enter" data-show="true">10+</sup></span> <span class="ant-badge"><a href="#" class="head-example"></a><sup title="1000" class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-zoom-enter" data-show="true">999+</sup></span></div>`;
|
||||
|
||||
exports[`renders ./components/badge/demo/status.md correctly 1`] = `<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text"></span></span> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text"></span></span> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-default"></span><span class="ant-badge-status-text"></span></span> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text"></span></span> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text"></span></span> <br> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text">Success</span></span> <br> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">Error</span></span> <br> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-default"></span><span class="ant-badge-status-text">Default</span></span> <br> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text">Processing</span></span> <br> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text">warning</span></span></div>`;
|
||||
|
||||
exports[`renders ./components/badge/demo/title.md correctly 1`] = `<div id="components-badge-demo-title"><span class="ant-badge"><a href="#" class="head-example"></a><sup title="Custom hover text" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter"><span class="ant-scroll-number-only" style="transform: translateY(-1500%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="current">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span></div>`;
|
||||
exports[`renders ./components/badge/demo/title.md correctly 1`] = `<div id="components-badge-demo-title"><span class="ant-badge"><a href="#" class="head-example"></a><sup title="Custom hover text" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1500%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="current">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span></div>`;
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Badge should be compatible with borderColor style 1`] = `<span class="ant-badge ant-badge-not-a-wrapper" style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); border-color: #d9d9d9;"><sup title="4" class="ant-scroll-number ant-badge-count"><span class="ant-scroll-number-only" style="transform: translateY(-1400%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="current">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
exports[`Badge should be compatible with borderColor style 1`] = `<span class="ant-badge ant-badge-not-a-wrapper" style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); border-color: #d9d9d9;"><sup title="4" class="ant-scroll-number ant-badge-count" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1400%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="current">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
|
||||
exports[`Badge should render when count is changed 1`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="10" class="ant-scroll-number ant-badge-count ant-badge-multiple-words"><span class="ant-scroll-number-only" style="transform: translateY(-2100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-2000%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="current">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
exports[`Badge should render when count is changed 1`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="10" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-2100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-2000%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="current">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
|
||||
exports[`Badge should render when count is changed 2`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="11" class="ant-scroll-number ant-badge-count ant-badge-multiple-words"><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
exports[`Badge should render when count is changed 2`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="11" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
|
||||
exports[`Badge should render when count is changed 3`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="11" class="ant-scroll-number ant-badge-count ant-badge-multiple-words"><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
exports[`Badge should render when count is changed 3`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="11" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
|
||||
exports[`Badge should render when count is changed 4`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="10" class="ant-scroll-number ant-badge-count ant-badge-multiple-words"><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-1000%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="current">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
exports[`Badge should render when count is changed 4`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="10" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-1000%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="current">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
|
||||
exports[`Badge should render when count is changed 5`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="9" class="ant-scroll-number ant-badge-count"><span class="ant-scroll-number-only" style="transform: translateY(-900%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="current">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
exports[`Badge should render when count is changed 5`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="9" class="ant-scroll-number ant-badge-count" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-900%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="current">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
|
||||
|
||||
exports[`Badge should support offset when count is a ReactNode 1`] = `<span class="ant-badge"><a href="#" class="head-example"></a><span class="custom ant-scroll-number-custom-component" style="color: rgb(245, 34, 45); right: -10px; margin-top: 20px;" data-show="true"></span></span>`;
|
||||
|
||||
@ -85,4 +85,18 @@ describe('Badge', () => {
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/13694
|
||||
it('should support offset when count is a ReactNode', () => {
|
||||
const wrapper = mount({
|
||||
render () {
|
||||
return (
|
||||
<Badge count={<span class='custom' style={{ color: '#f5222d' }} />} offset={[10, 20]}>
|
||||
<a href='#' class='head-example' />
|
||||
</Badge>
|
||||
)
|
||||
},
|
||||
})
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
@ -17,6 +17,10 @@ Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZe
|
||||
<a-badge count="0" showZero>
|
||||
<a href="#" class="head-example"></a>
|
||||
</a-badge>
|
||||
<a-badge>
|
||||
<a-icon slot="count" type="clock-circle" style="color: #f5222d" />
|
||||
<a href="#" class="head-example"></a>
|
||||
</a-badge>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| count | Number to show in badge | number\|string | |
|
||||
| count | Number to show in badge | number\|string \| slot | |
|
||||
| dot | Whether to display a red dot instead of `count` | boolean | `false` |
|
||||
| offset | set offset of the badge dot, like [x, y] | [number\|string, number\|string] | - |
|
||||
| overflowCount | Max count to show | number | 99 |
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number\|string | |
|
||||
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number \| string \| slot | |
|
||||
| dot | 不展示数字，只有一个小红点 | boolean | false |
|
||||
| offset | 设置状态点的位置偏移，格式为 [x, y] | [number\|string, number\|string] | - |
|
||||
| overflowCount | 展示封顶的数字值 | number | 99 |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user