style: badge
tangjinzhou
parent
7c59c1815f
commit
6c167c26af
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
<Change />
|
||||
<Title />
|
||||
<Colors />
|
||||
<Link />
|
||||
<Ribbon />
|
||||
<Link />
|
||||
</demo-sort>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue