style: badge

feat-css-var
tangjinzhou 2022-02-25 17:31:28 +08:00
parent 7c59c1815f
commit 6c167c26af
15 changed files with 251 additions and 152 deletions

View File

@ -127,10 +127,10 @@ export default defineComponent({
emit('change', link);
};
const handleScrollTo = (link: string) => {
const { offsetTop, getContainer, targetOffset } = props;
const { offsetTop, targetOffset } = props;
setCurrentActiveLink(link);
const container = getContainer();
const container = getContainer.value();
const scrollTop = getScroll(container, true);
const sharpLinkMatch = sharpMatcherRegx.exec(link);
if (!sharpLinkMatch) {
@ -150,7 +150,7 @@ export default defineComponent({
callback: () => {
state.animating = false;
},
getContainer,
getContainer: getContainer.value,
});
};
expose({

View File

@ -62,7 +62,7 @@ export default defineComponent({
() => numberedDisplayCount.value === '0' || numberedDisplayCount.value === 0,
);
const showAsDot = computed(() => (props.dot && !isZero.value) || hasStatus.value);
const showAsDot = computed(() => props.dot && !isZero.value);
const mergedCount = computed(() => (showAsDot.value ? '' : numberedDisplayCount.value));

View File

@ -1,14 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/badge/demo/basic.vue correctly 1`] = `
<span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
<!----></span><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count" title="0"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">0</p></span></sup>
<!----></span><span class="ant-badge"><a href="#" class="head-example"></a><span style="color: rgb(245, 34, 45);" role="img" aria-label="clock-circle" class="anticon anticon-clock-circle ant-scroll-number-custom-component"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span>
<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="0"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">0</p></span></sup>
<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><span style="color: rgb(245, 34, 45);" role="img" aria-label="clock-circle" class="anticon anticon-clock-circle ant-scroll-number-custom-component"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span>
<!----></span>
`;
exports[`renders ./components/badge/demo/change.vue correctly 1`] = `
<div><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
<div><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
<!----></span>
<div class="ant-btn-group"><button class="ant-btn" type="button">
<!----><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span>
@ -16,9 +16,12 @@ exports[`renders ./components/badge/demo/change.vue correctly 1`] = `
<!----><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span>
</button></div>
</div>
<div style="margin-top: 10px;"><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup><!----></span><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
<!----><span class="ant-switch-inner"><!----></span>
</button></div>
<div class="ant-divider ant-divider-horizontal" role="separator">
<!---->
</div><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup>
<!----></span><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
<!----><span class="ant-switch-inner"><!----></span>
</button>
`;
exports[`renders ./components/badge/demo/colors.vue correctly 1`] = `
@ -38,19 +41,16 @@ exports[`renders ./components/badge/demo/colors.vue correctly 1`] = `
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-gold"></span><span class="ant-badge-status-text">gold</span></span></div>
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-lime"></span><span class="ant-badge-status-text">lime</span></span></div>
</div>
<h4 style="margin: 16px 0px;">Custom:</h4>
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(255, 85, 0);"></span><span class="ant-badge-status-text">#f50</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(45, 183, 245);"></span><span class="ant-badge-status-text">#2db7f5</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(135, 208, 104);"></span><span class="ant-badge-status-text">#87d068</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(16, 142, 233);"></span><span class="ant-badge-status-text">#108ee9</span></span></div>
<div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Custom</span></div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(255, 85, 0);"></span><span class="ant-badge-status-text">#f50</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(45, 183, 245);"></span><span class="ant-badge-status-text">#2db7f5</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(135, 208, 104);"></span><span class="ant-badge-status-text">#87d068</span></span><br><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(16, 142, 233);"></span><span class="ant-badge-status-text">#108ee9</span></span>
`;
exports[`renders ./components/badge/demo/dot.vue correctly 1`] = `
<div id="components-badge-demo-dot"><span class="ant-badge"><span role="img" aria-label="notification" class="anticon anticon-notification"><svg focusable="false" class="" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup>
<!----></span><span class="ant-badge"><span role="img" aria-label="notification" class="anticon anticon-notification"><svg focusable="false" class="" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span><sup data-show="false" class="ant-scroll-number ant-badge-count" title="0" style="display: none;">0</sup>
<!----></span><span class="ant-badge"><a href="#">Link something</a><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup><!----></span>
</div>
<span class="ant-badge"><span style="font-size: 16px;" role="img" aria-label="notification" class="anticon anticon-notification"><svg focusable="false" class="" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup>
<!----></span><span class="ant-badge"><a href="#">Link something</a><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup><!----></span>
`;
exports[`renders ./components/badge/demo/link.vue correctly 1`] = `
<a href="#"><span class="ant-badge"><span class="head-example"></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
<a href="#"><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
<!----></span>
</a>
`;
@ -62,19 +62,147 @@ exports[`renders ./components/badge/demo/no-wrapper.vue correctly 1`] = `
`;
exports[`renders ./components/badge/demo/overflow.vue correctly 1`] = `
<span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span></sup>
<!----></span><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="100">99+</sup><!----></span><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99">10+</sup><!----></span><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="1000">999+</sup><!----></span>
<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span></sup>
<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="100">99+</sup>
<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99">10+</sup>
<!----></span><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="1000">999+</sup>
<!----></span>
`;
exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
<div class="ant-ribbon-wrapper">
<div class="ant-card ant-card-bordered">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
<!---->
</div>
<!---->
</div>
<!---->
<!---->
<div class="ant-card-body">And raises the spyglass.</div>
<div class="ant-card-body">and raises the spyglass.</div>
<!---->
</div>
<div class="ant-ribbon ant-ribbon-placement-end"><span class="ant-ribbon-text">Pushes open the window</span>
<div class="ant-ribbon ant-ribbon-placement-end"><span class="ant-ribbon-text">Hippies</span>
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
<!---->
</div>
<!---->
</div>
<!---->
<div class="ant-card-body">and raises the spyglass.</div>
<!---->
</div>
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"><span class="ant-ribbon-text">Hippies</span>
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
<!---->
</div>
<!---->
</div>
<!---->
<div class="ant-card-body">and raises the spyglass.</div>
<!---->
</div>
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"><span class="ant-ribbon-text">Hippies</span>
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
<!---->
</div>
<!---->
</div>
<!---->
<div class="ant-card-body">and raises the spyglass.</div>
<!---->
</div>
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"><span class="ant-ribbon-text">Hippies</span>
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
<!---->
</div>
<!---->
</div>
<!---->
<div class="ant-card-body">and raises the spyglass.</div>
<!---->
</div>
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"><span class="ant-ribbon-text">Hippies</span>
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
<!---->
</div>
<!---->
</div>
<!---->
<div class="ant-card-body">and raises the spyglass.</div>
<!---->
</div>
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"><span class="ant-ribbon-text">Hippies</span>
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
<!---->
</div>
<!---->
</div>
<!---->
<div class="ant-card-body">and raises the spyglass.</div>
<!---->
</div>
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"><span class="ant-ribbon-text">Hippies</span>
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
<!---->
</div>
<!---->
</div>
<!---->
<div class="ant-card-body">and raises the spyglass.</div>
<!---->
</div>
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"><span class="ant-ribbon-text">Hippies</span>
<div class="ant-ribbon-corner"></div>
</div>
</div>
@ -83,7 +211,6 @@ exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
exports[`renders ./components/badge/demo/status.vue correctly 1`] = `<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>`;
exports[`renders ./components/badge/demo/title.vue correctly 1`] = `
<div id="components-badge-demo-title"><span class="ant-badge"><a href="#" class="head-example"></a><sup data-show="true" class="ant-scroll-number ant-badge-count" title="Custom hover text"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
<!----></span>
</div>
<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="Custom hover text"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
<!----></span>
`;

View File

@ -1,7 +1,7 @@
<docs>
---
order: 0
title:
title:
zh-CN: 基本
en-US: Basic
---
@ -17,16 +17,16 @@ Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZe
</docs>
<template>
<a-badge count="5">
<a href="#" class="head-example" />
<a-avatar shape="square" size="large" />
</a-badge>
<a-badge count="0" show-zero>
<a href="#" class="head-example" />
<a-avatar shape="square" size="large" />
</a-badge>
<a-badge>
<template #count>
<clock-circle-outlined style="color: #f5222d" />
</template>
<a href="#" class="head-example"></a>
<a-avatar shape="square" size="large" />
</a-badge>
</template>

View File

@ -1,7 +1,7 @@
<docs>
---
order: 5
title:
title:
zh-CN: 动态
en-US: Dynamic
---
@ -11,14 +11,14 @@ title:
展示动态变化的效果
## en-US
The count will be animated as it changes.
</docs>
<template>
<div>
<a-badge :count="count">
<a href="#" class="head-example" />
<a-avatar shape="square" size="large" />
</a-badge>
<a-button-group>
<a-button @click="decline">
@ -29,12 +29,11 @@ The count will be animated as it changes.
</a-button>
</a-button-group>
</div>
<div style="margin-top: 10px">
<a-badge :dot="show">
<a href="#" class="head-example" />
</a-badge>
<a-switch v-model:checked="show" />
</div>
<a-divider />
<a-badge :dot="show">
<a-avatar shape="square" size="large" />
</a-badge>
<a-switch v-model:checked="show" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

View File

@ -1,7 +1,7 @@
<docs>
---
order: 7
title:
title:
zh-CN: 多彩徽标
en-US: Colorful Badge
---
@ -23,16 +23,14 @@ New feature after 3.16.0. We preset a series of colorful Badge styles for use in
<a-badge :color="color" :text="color" />
</div>
</div>
<h4 style="margin: 16px 0">Custom:</h4>
<div>
<a-badge color="#f50" text="#f50" />
<br />
<a-badge color="#2db7f5" text="#2db7f5" />
<br />
<a-badge color="#87d068" text="#87d068" />
<br />
<a-badge color="#108ee9" text="#108ee9" />
</div>
<a-divider orientation="left">Custom</a-divider>
<a-badge color="#f50" text="#f50" />
<br />
<a-badge color="#2db7f5" text="#2db7f5" />
<br />
<a-badge color="#87d068" text="#87d068" />
<br />
<a-badge color="#108ee9" text="#108ee9" />
</template>
<script lang="ts">
import { defineComponent } from 'vue';

View File

@ -1,7 +1,7 @@
<docs>
---
order: 3
title:
title:
zh-CN: 讨嫌的小红点
en-US: Red badge
---
@ -17,17 +17,12 @@ If count equals 0, it won't display the dot.
</docs>
<template>
<div id="components-badge-demo-dot">
<a-badge dot>
<notification-outlined />
</a-badge>
<a-badge :count="0" dot>
<notification-outlined />
</a-badge>
<a-badge dot>
<a href="#">Link something</a>
</a-badge>
</div>
<a-badge dot>
<notification-outlined style="font-size: 16px" />
</a-badge>
<a-badge dot>
<a href="#">Link something</a>
</a-badge>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
@ -38,11 +33,3 @@ export default defineComponent({
},
});
</script>
<style scoped>
#components-badge-demo-dot .anticon-notification {
width: 16px;
height: 16px;
line-height: 16px;
font-size: 16px;
}
</style>

View File

@ -8,8 +8,8 @@
<Change />
<Title />
<Colors />
<Link />
<Ribbon />
<Link />
</demo-sort>
</template>
<script lang="ts">

View File

@ -1,7 +1,7 @@
<docs>
---
order: 8
title:
title:
zh-CN: 可点击
en-US: Clickable
---
@ -18,7 +18,7 @@ The badge can be wrapped with `a` tag to make it linkable.
<template>
<a href="#">
<a-badge count="5">
<span class="head-example" />
<a-avatar shape="square" size="large" />
</a-badge>
</a>
</template>

View File

@ -1,7 +1,7 @@
<docs>
---
order: 2
title:
title:
zh-CN: 封顶数字
en-US: Overflow Count
---
@ -18,15 +18,15 @@ title:
<template>
<a-badge :count="99">
<a href="#" class="head-example" />
<a-avatar shape="square" size="large" />
</a-badge>
<a-badge :count="100">
<a href="#" class="head-example" />
<a-avatar shape="square" size="large" />
</a-badge>
<a-badge :count="99" :overflow-count="10">
<a href="#" class="head-example" />
<a-avatar shape="square" size="large" />
</a-badge>
<a-badge :count="1000" :overflow-count="999">
<a href="#" class="head-example" />
<a-avatar shape="square" size="large" />
</a-badge>
</template>

View File

@ -6,17 +6,38 @@ title:
en-US: Ribbon
---
## zh-CN
使用缎带型的徽标
## zh-CN
使用缎带型的徽标
## en-US
## en-US
Use ribbon badge.
Use ribbon badge.
</docs>
<template>
<a-badge-ribbon text="Pushes open the window">
<a-card>And raises the spyglass.</a-card>
<a-badge-ribbon text="Hippies">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="pink">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="red">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="cyan">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="green">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="purple">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="volcano">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="magenta">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
</template>

View File

@ -1,7 +1,7 @@
<docs>
---
order: 6
title:
title:
zh-CN: 自定义标题
en-US: Title
---
@ -17,21 +17,7 @@ The badge will display `title` when hovered over, instead of `count`.
</docs>
<template>
<div id="components-badge-demo-title">
<a-badge :count="5" title="Custom hover text">
<a href="#" class="head-example" />
</a-badge>
</div>
<a-badge :count="5" title="Custom hover text">
<a-avatar shape="square" size="large" />
</a-badge>
</template>
<style scoped>
#components-badge-demo-title .ant-badge:not(.ant-badge-status) {
margin-right: 20px;
}
.head-example {
width: 42px;
height: 42px;
border-radius: 4px;
background: #eee;
display: inline-block;
}
</style>

View File

@ -25,6 +25,7 @@
background: @badge-color;
border-radius: (@badge-height / 2);
box-shadow: 0 0 0 1px @shadow-color-inverse;
a,
a:hover {
color: @badge-text-color;
@ -54,6 +55,11 @@
box-shadow: 0 0 0 1px @shadow-color-inverse;
}
// Tricky way to resolve https://github.com/ant-design/ant-design/issues/30088
&-dot.@{number-prefix-cls} {
transition: background 1.5s;
}
&-count,
&-dot,
.@{number-prefix-cls}-custom-component {
@ -81,12 +87,15 @@
vertical-align: middle;
border-radius: 50%;
}
&-success {
background-color: @success-color;
}
&-processing {
position: relative;
background-color: @processing-color;
&::after {
position: absolute;
top: 0;
@ -99,12 +108,15 @@
content: '';
}
}
&-default {
background-color: @normal-color;
}
&-error {
background-color: @error-color;
}
&-warning {
background-color: @warning-color;
}
@ -152,21 +164,18 @@
vertical-align: middle;
}
.@{number-prefix-cls}-custom-component {
.@{number-prefix-cls}-custom-component,
.@{badge-prefix-cls}-count {
transform: none;
}
.@{number-prefix-cls}-custom-component,
.@{ant-prefix}-scroll-number {
.@{number-prefix-cls} {
position: relative;
top: auto;
display: block;
transform-origin: 50% 50%;
}
.@{badge-prefix-cls}-count {
transform: none;
}
}
}
@ -175,6 +184,7 @@
transform: scale(0.8);
opacity: 0.5;
}
100% {
transform: scale(2.4);
opacity: 0;
@ -183,12 +193,16 @@
// Safari will blink with transform when inner element has absolute style.
.safari-fix-motion() {
/* stylelint-disable property-no-vendor-prefix */
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
/* stylelint-enable property-no-vendor-prefix */
}
.@{number-prefix-cls} {
overflow: hidden;
direction: ltr;
&-only {
position: relative;
display: inline-block;
@ -213,6 +227,7 @@
transform: scale(0) translate(50%, -50%);
opacity: 0;
}
100% {
transform: scale(1) translate(50%, -50%);
}
@ -222,6 +237,7 @@
0% {
transform: scale(1) translate(50%, -50%);
}
100% {
transform: scale(0) translate(50%, -50%);
opacity: 0;
@ -233,6 +249,7 @@
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
}
@ -242,6 +259,7 @@
0% {
transform: scale(1);
}
100% {
transform: scale(0);
opacity: 0;

View File

@ -3,9 +3,9 @@
direction: rtl;
}
&-count,
&-dot,
.@{number-prefix-cls}-custom-component {
&:not(&-not-a-wrapper) &-count,
&:not(&-not-a-wrapper) &-dot,
&:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
.@{badge-prefix-cls}-rtl & {
right: auto;
left: 0;
@ -15,7 +15,7 @@
}
}
.@{badge-prefix-cls}-rtl& .@{number-prefix-cls}-custom-component {
&-rtl&:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
right: auto;
left: 0;
transform: translate(-50%, -50%);
@ -30,25 +30,6 @@
}
}
}
&-zoom-appear,
&-zoom-enter {
.@{badge-prefix-cls}-rtl & {
animation-name: antZoomBadgeInRtl;
}
}
&-zoom-leave {
.@{badge-prefix-cls}-rtl & {
animation-name: antZoomBadgeOutRtl;
}
}
&-not-a-wrapper {
.@{badge-prefix-cls}-count {
transform: none;
}
}
}
.@{ribbon-prefix-cls}-rtl {
@ -62,6 +43,7 @@
right: unset;
left: 0;
border-color: currentColor currentColor transparent transparent;
&::after {
border-color: currentColor currentColor transparent transparent;
}
@ -76,29 +58,10 @@
right: 0;
left: unset;
border-color: currentColor transparent transparent currentColor;
&::after {
border-color: currentColor transparent transparent currentColor;
}
}
}
}
@keyframes antZoomBadgeInRtl {
0% {
transform: scale(0) translate(-50%, -50%);
opacity: 0;
}
100% {
transform: scale(1) translate(-50%, -50%);
}
}
@keyframes antZoomBadgeOutRtl {
0% {
transform: scale(1) translate(-50%, -50%);
}
100% {
transform: scale(0) translate(-50%, -50%);
opacity: 0;
}
}