mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-11-30 11:08:00 +08:00
fix: components bug & update docs (#6548)
* fix bug * fix test case and update snapshot,fix space merge class
This commit is contained in:
果冻橙
GitHub
parent
149cedd262
commit
e49e72d24a
@ -1,44 +1,58 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/layout/demo/basic.vue correctly 1`] = `
|
||||
<section class="ant-layout">
|
||||
<header class="ant-layout-header">Header</header>
|
||||
<main class="ant-layout-content">Content</main>
|
||||
<footer class="ant-layout-footer">Footer</footer>
|
||||
</section>
|
||||
<section class="ant-layout">
|
||||
<header class="ant-layout-header">Header</header>
|
||||
<section class="ant-layout">
|
||||
<aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
|
||||
<div class="ant-layout-sider-children">Sider</div>
|
||||
<!---->
|
||||
</aside>
|
||||
<main class="ant-layout-content">Content</main>
|
||||
</section>
|
||||
<footer class="ant-layout-footer">Footer</footer>
|
||||
</section>
|
||||
<section class="ant-layout">
|
||||
<header class="ant-layout-header">Header</header>
|
||||
<section class="ant-layout">
|
||||
<main class="ant-layout-content">Content</main>
|
||||
<aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
|
||||
<div class="ant-layout-sider-children">Sider</div>
|
||||
<!---->
|
||||
</aside>
|
||||
</section>
|
||||
<footer class="ant-layout-footer">Footer</footer>
|
||||
</section>
|
||||
<section class="ant-layout">
|
||||
<aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
|
||||
<div class="ant-layout-sider-children">Sider</div>
|
||||
<!---->
|
||||
</aside>
|
||||
<section class="ant-layout">
|
||||
<header class="ant-layout-header">Header</header>
|
||||
<main class="ant-layout-content">Content</main>
|
||||
<footer class="ant-layout-footer">Footer</footer>
|
||||
</section>
|
||||
</section>
|
||||
<div style="width: 100%;" class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 0px;">
|
||||
<section class="ant-layout">
|
||||
<header class="ant-layout-header" style="text-align: center; color: rgb(255, 255, 255); padding-inline: 50; line-height: 64px; background-color: rgb(125, 188, 234);">Header</header>
|
||||
<main class="ant-layout-content" style="text-align: center; min-height: 120; line-height: 120px; color: rgb(255, 255, 255); background-color: rgb(16, 142, 233);">Content</main>
|
||||
<footer class="ant-layout-footer" style="text-align: center; color: rgb(255, 255, 255); background-color: rgb(125, 188, 234);">Footer</footer>
|
||||
</section>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 0px;">
|
||||
<section class="ant-layout">
|
||||
<header class="ant-layout-header" style="text-align: center; color: rgb(255, 255, 255); padding-inline: 50; line-height: 64px; background-color: rgb(125, 188, 234);">Header</header>
|
||||
<section class="ant-layout">
|
||||
<aside style="text-align: center; line-height: 120px; color: rgb(255, 255, 255); background-color: rgb(59, 160, 233); flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;" class="ant-layout-sider ant-layout-sider-dark">
|
||||
<div class="ant-layout-sider-children">Sider</div>
|
||||
<!---->
|
||||
</aside>
|
||||
<main class="ant-layout-content" style="text-align: center; min-height: 120; line-height: 120px; color: rgb(255, 255, 255); background-color: rgb(16, 142, 233);">Content</main>
|
||||
</section>
|
||||
<footer class="ant-layout-footer" style="text-align: center; color: rgb(255, 255, 255); background-color: rgb(125, 188, 234);">Footer</footer>
|
||||
</section>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 0px;">
|
||||
<section class="ant-layout">
|
||||
<header class="ant-layout-header" style="text-align: center; color: rgb(255, 255, 255); padding-inline: 50; line-height: 64px; background-color: rgb(125, 188, 234);">Header</header>
|
||||
<section class="ant-layout">
|
||||
<main class="ant-layout-content" style="text-align: center; min-height: 120; line-height: 120px; color: rgb(255, 255, 255); background-color: rgb(16, 142, 233);">Content</main>
|
||||
<aside style="text-align: center; line-height: 120px; color: rgb(255, 255, 255); background-color: rgb(59, 160, 233); flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;" class="ant-layout-sider ant-layout-sider-dark">
|
||||
<div class="ant-layout-sider-children">Sider</div>
|
||||
<!---->
|
||||
</aside>
|
||||
</section>
|
||||
<footer class="ant-layout-footer" style="text-align: center; color: rgb(255, 255, 255); background-color: rgb(125, 188, 234);">Footer</footer>
|
||||
</section>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<section class="ant-layout">
|
||||
<aside style="text-align: center; line-height: 120px; color: rgb(255, 255, 255); background-color: rgb(59, 160, 233); flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;" class="ant-layout-sider ant-layout-sider-dark">
|
||||
<div class="ant-layout-sider-children">Sider</div>
|
||||
<!---->
|
||||
</aside>
|
||||
<section class="ant-layout">
|
||||
<header class="ant-layout-header" style="text-align: center; color: rgb(255, 255, 255); padding-inline: 50; line-height: 64px; background-color: rgb(125, 188, 234);">Header</header>
|
||||
<main class="ant-layout-content" style="text-align: center; min-height: 120; line-height: 120px; color: rgb(255, 255, 255); background-color: rgb(16, 142, 233);">Content</main>
|
||||
<footer class="ant-layout-footer" style="text-align: center; color: rgb(255, 255, 255); background-color: rgb(125, 188, 234);">Footer</footer>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/layout/demo/custom-trigger.vue correctly 1`] = `
|
||||
|
||||
@ -16,76 +16,70 @@ Classic page layouts.
|
||||
|
||||
</docs>
|
||||
<template>
|
||||
<a-layout>
|
||||
<a-layout-header>Header</a-layout-header>
|
||||
<a-layout-content>Content</a-layout-content>
|
||||
<a-layout-footer>Footer</a-layout-footer>
|
||||
</a-layout>
|
||||
|
||||
<a-layout>
|
||||
<a-layout-header>Header</a-layout-header>
|
||||
<a-space direction="vertical" :style="{ width: '100%' }" :size="[0, 48]">
|
||||
<a-layout>
|
||||
<a-layout-sider>Sider</a-layout-sider>
|
||||
<a-layout-content>Content</a-layout-content>
|
||||
<a-layout-header :style="headerStyle">Header</a-layout-header>
|
||||
<a-layout-content :style="contentStyle">Content</a-layout-content>
|
||||
<a-layout-footer :style="footerStyle">Footer</a-layout-footer>
|
||||
</a-layout>
|
||||
<a-layout-footer>Footer</a-layout-footer>
|
||||
</a-layout>
|
||||
|
||||
<a-layout>
|
||||
<a-layout-header>Header</a-layout-header>
|
||||
<a-layout>
|
||||
<a-layout-content>Content</a-layout-content>
|
||||
<a-layout-sider>Sider</a-layout-sider>
|
||||
<a-layout-header :style="headerStyle">Header</a-layout-header>
|
||||
<a-layout>
|
||||
<a-layout-sider :style="siderStyle">Sider</a-layout-sider>
|
||||
<a-layout-content :style="contentStyle">Content</a-layout-content>
|
||||
</a-layout>
|
||||
<a-layout-footer :style="footerStyle">Footer</a-layout-footer>
|
||||
</a-layout>
|
||||
<a-layout-footer>Footer</a-layout-footer>
|
||||
</a-layout>
|
||||
|
||||
<a-layout>
|
||||
<a-layout-sider>Sider</a-layout-sider>
|
||||
<a-layout>
|
||||
<a-layout-header>Header</a-layout-header>
|
||||
<a-layout-content>Content</a-layout-content>
|
||||
<a-layout-footer>Footer</a-layout-footer>
|
||||
<a-layout-header :style="headerStyle">Header</a-layout-header>
|
||||
<a-layout>
|
||||
<a-layout-content :style="contentStyle">Content</a-layout-content>
|
||||
<a-layout-sider :style="siderStyle">Sider</a-layout-sider>
|
||||
</a-layout>
|
||||
<a-layout-footer :style="footerStyle">Footer</a-layout-footer>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
|
||||
<a-layout>
|
||||
<a-layout-sider :style="siderStyle">Sider</a-layout-sider>
|
||||
<a-layout>
|
||||
<a-layout-header :style="headerStyle">Header</a-layout-header>
|
||||
<a-layout-content :style="contentStyle">Content</a-layout-content>
|
||||
<a-layout-footer :style="footerStyle">Footer</a-layout-footer>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { CSSProperties } from 'vue';
|
||||
const headerStyle: CSSProperties = {
|
||||
textAlign: 'center',
|
||||
color: '#fff',
|
||||
height: 64,
|
||||
paddingInline: 50,
|
||||
lineHeight: '64px',
|
||||
backgroundColor: '#7dbcea',
|
||||
};
|
||||
|
||||
<style scoped>
|
||||
#components-layout-demo-basic .code-box-demo {
|
||||
text-align: center;
|
||||
}
|
||||
#components-layout-demo-basic .ant-layout-header,
|
||||
#components-layout-demo-basic .ant-layout-footer {
|
||||
color: #fff;
|
||||
background: #7dbcea;
|
||||
}
|
||||
[data-theme='dark'] #components-layout-demo-basic .ant-layout-header {
|
||||
background: #6aa0c7;
|
||||
}
|
||||
[data-theme='dark'] #components-layout-demo-basic .ant-layout-footer {
|
||||
background: #6aa0c7;
|
||||
}
|
||||
#components-layout-demo-basic .ant-layout-footer {
|
||||
line-height: 1.5;
|
||||
}
|
||||
#components-layout-demo-basic .ant-layout-sider {
|
||||
color: #fff;
|
||||
line-height: 120px;
|
||||
background: #3ba0e9;
|
||||
}
|
||||
[data-theme='dark'] #components-layout-demo-basic .ant-layout-sider {
|
||||
background: #3499ec;
|
||||
}
|
||||
#components-layout-demo-basic .ant-layout-content {
|
||||
min-height: 120px;
|
||||
color: #fff;
|
||||
line-height: 120px;
|
||||
background: rgba(16, 142, 233, 1);
|
||||
}
|
||||
[data-theme='dark'] #components-layout-demo-basic .ant-layout-content {
|
||||
background: #107bcb;
|
||||
}
|
||||
#components-layout-demo-basic > .code-box-demo > .ant-layout + .ant-layout {
|
||||
margin-top: 48px;
|
||||
}
|
||||
</style>
|
||||
const contentStyle: CSSProperties = {
|
||||
textAlign: 'center',
|
||||
minHeight: 120,
|
||||
lineHeight: '120px',
|
||||
color: '#fff',
|
||||
backgroundColor: '#108ee9',
|
||||
};
|
||||
|
||||
const siderStyle: CSSProperties = {
|
||||
textAlign: 'center',
|
||||
lineHeight: '120px',
|
||||
color: '#fff',
|
||||
backgroundColor: '#3ba0e9',
|
||||
};
|
||||
|
||||
const footerStyle: CSSProperties = {
|
||||
textAlign: 'center',
|
||||
color: '#fff',
|
||||
backgroundColor: '#7dbcea',
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -97,7 +97,11 @@ const Space = defineComponent({
|
||||
const horizontalSizeVal = horizontalSize.value;
|
||||
const latestIndex = len - 1;
|
||||
return (
|
||||
<div {...attrs} class={cn.value} style={[style.value, attrs.style as any]}>
|
||||
<div
|
||||
{...attrs}
|
||||
class={[cn.value, attrs.class]}
|
||||
style={[style.value, attrs.style as CSSProperties]}
|
||||
>
|
||||
{items.map((child, index) => {
|
||||
const originIndex = children.indexOf(child);
|
||||
let itemStyle: CSSProperties = {};
|
||||
|
||||
@ -15,6 +15,7 @@ import Tooltip from '../tooltip';
|
||||
import { VcStepProps } from '../vc-steps/Step';
|
||||
import type { Status, ProgressDotRender } from '../vc-steps/interface';
|
||||
import type { MouseEventHandler } from '../_util/EventInterface';
|
||||
import { useToken } from '../theme/internal';
|
||||
|
||||
// CSSINJS
|
||||
import useStyle from './style';
|
||||
@ -66,6 +67,7 @@ const Steps = defineComponent({
|
||||
const { prefixCls, direction: rtlDirection, configProvider } = useConfigInject('steps', props);
|
||||
// style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
const [, token] = useToken();
|
||||
|
||||
const screens = useBreakpoint();
|
||||
const direction = computed(() =>
|
||||
@ -90,7 +92,10 @@ const Steps = defineComponent({
|
||||
}) => {
|
||||
if (status === 'process' && props.percent !== undefined) {
|
||||
// currently it's hard-coded, since we can't easily read the actually width of icon
|
||||
const progressWidth = props.size === 'small' ? 32 : 40;
|
||||
|
||||
const progressWidth =
|
||||
props.size === 'small' ? token.value.controlHeight : token.value.controlHeightLG;
|
||||
|
||||
const iconWithProgress = (
|
||||
<div class={`${prefixCls.value}-progress-icon`}>
|
||||
<Progress
|
||||
|
||||
@ -9,47 +9,69 @@ exports[`renders ./components/switch/demo/basic.vue correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/switch/demo/disabled.vue correctly 1`] = `
|
||||
<div><button disabled="" style="margin-bottom: 5px;" type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch-disabled ant-switch">
|
||||
<div class="ant-switch-handle">
|
||||
<!---->
|
||||
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
|
||||
</button><br><button class="ant-btn ant-btn-primary" type="button">
|
||||
<!----><span>Toggle disabled</span>
|
||||
</button></div>
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;"><button disabled="" type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch-disabled ant-switch">
|
||||
<div class="ant-switch-handle">
|
||||
<!---->
|
||||
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
|
||||
</button></div>
|
||||
<!---->
|
||||
<div class="ant-space-item"><button class="ant-btn ant-btn-primary" type="button">
|
||||
<!----><span>Toggle disabled</span>
|
||||
</button></div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/switch/demo/loading.vue correctly 1`] = `
|
||||
<div><button disabled="" loading="true" type="button" role="switch" aria-checked="true" class="ant-switch-loading ant-switch-checked ant-switch">
|
||||
<div class="ant-switch-handle"><span role="img" aria-label="loading" class="anticon anticon-loading ant-switch-loading-icon"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
|
||||
</button><br><button size="small" disabled="" loading="true" type="button" role="switch" aria-checked="false" class="ant-switch-small ant-switch-loading ant-switch">
|
||||
<div class="ant-switch-handle"><span role="img" aria-label="loading" class="anticon anticon-loading ant-switch-loading-icon"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
|
||||
</button></div>
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;"><button disabled="" loading="true" type="button" role="switch" aria-checked="true" class="ant-switch-loading ant-switch-checked ant-switch">
|
||||
<div class="ant-switch-handle"><span role="img" aria-label="loading" class="anticon anticon-loading ant-switch-loading-icon"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
|
||||
</button></div>
|
||||
<!---->
|
||||
<div class="ant-space-item"><button size="small" disabled="" loading="true" type="button" role="switch" aria-checked="false" class="ant-switch-small ant-switch-loading ant-switch">
|
||||
<div class="ant-switch-handle"><span role="img" aria-label="loading" class="anticon anticon-loading ant-switch-loading-icon"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
|
||||
</button></div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/switch/demo/size.vue correctly 1`] = `
|
||||
<div><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
|
||||
<div class="ant-switch-handle">
|
||||
<!---->
|
||||
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
|
||||
</button><br><button size="small" type="button" role="switch" aria-checked="false" class="ant-switch-small ant-switch">
|
||||
<div class="ant-switch-handle">
|
||||
<!---->
|
||||
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
|
||||
</button></div>
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;"><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
|
||||
<div class="ant-switch-handle">
|
||||
<!---->
|
||||
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
|
||||
</button></div>
|
||||
<!---->
|
||||
<div class="ant-space-item"><button size="small" type="button" role="switch" aria-checked="false" class="ant-switch-small ant-switch">
|
||||
<div class="ant-switch-handle">
|
||||
<!---->
|
||||
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
|
||||
</button></div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/switch/demo/text.vue correctly 1`] = `
|
||||
<div><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
|
||||
<div class="ant-switch-handle">
|
||||
<!---->
|
||||
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked">开</span><span class="ant-switch-inner-unchecked">关</span></span>
|
||||
</button><br><button type="button" role="switch" aria-checked="false" class="ant-switch">
|
||||
<div class="ant-switch-handle">
|
||||
<!---->
|
||||
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked">1</span><span class="ant-switch-inner-unchecked">0</span></span>
|
||||
</button><br><button type="button" role="switch" aria-checked="false" class="ant-switch">
|
||||
<div class="ant-switch-handle">
|
||||
<!---->
|
||||
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><span role="img" aria-label="check" class="anticon anticon-check"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span><span class="ant-switch-inner-unchecked"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></span>
|
||||
</button></div>
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;"><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
|
||||
<div class="ant-switch-handle">
|
||||
<!---->
|
||||
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked">开</span><span class="ant-switch-inner-unchecked">关</span></span>
|
||||
</button></div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;"><button type="button" role="switch" aria-checked="false" class="ant-switch">
|
||||
<div class="ant-switch-handle">
|
||||
<!---->
|
||||
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked">1</span><span class="ant-switch-inner-unchecked">0</span></span>
|
||||
</button></div>
|
||||
<!---->
|
||||
<div class="ant-space-item"><button type="button" role="switch" aria-checked="false" class="ant-switch">
|
||||
<div class="ant-switch-handle">
|
||||
<!---->
|
||||
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><span role="img" aria-label="check" class="anticon anticon-check"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span><span class="ant-switch-inner-unchecked"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></span>
|
||||
</button></div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -93,12 +93,12 @@ describe('Switch', () => {
|
||||
wrapper.find('button').trigger('click');
|
||||
});
|
||||
expect(checked.value).toBe(2);
|
||||
expect(wrapper.find('.ant-switch-inner').text()).toBe('on');
|
||||
expect(wrapper.find('.ant-switch-inner').text()).toBe('onoff');
|
||||
|
||||
await asyncExpect(() => {
|
||||
wrapper.find('button').trigger('click');
|
||||
});
|
||||
expect(checked.value).toBe(1);
|
||||
expect(wrapper.find('.ant-switch-inner').text()).toBe('off');
|
||||
expect(wrapper.find('.ant-switch-inner').text()).toBe('onoff');
|
||||
});
|
||||
});
|
||||
|
||||
@ -17,11 +17,10 @@ Disabled state of `Switch`.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-switch v-model:checked="checked" :disabled="disabled" style="margin-bottom: 5px" />
|
||||
<br />
|
||||
<a-space direction="vertical">
|
||||
<a-switch v-model:checked="checked" :disabled="disabled" />
|
||||
<a-button type="primary" @click="onToggle">Toggle disabled</a-button>
|
||||
</div>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
@ -16,11 +16,10 @@ Mark a pending state of switch.
|
||||
|
||||
</docs>
|
||||
<template>
|
||||
<div>
|
||||
<a-space direction="vertical">
|
||||
<a-switch v-model:checked="state.checked1" loading />
|
||||
<br />
|
||||
<a-switch v-model:checked="state.checked2" size="small" loading />
|
||||
</div>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
@ -17,11 +17,10 @@ title:
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-space direction="vertical">
|
||||
<a-switch v-model:checked="state.checked1" />
|
||||
<br />
|
||||
<a-switch v-model:checked="state.checked2" size="small" />
|
||||
</div>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
@ -17,16 +17,14 @@ With text and icon.
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-space direction="vertical">
|
||||
<a-switch v-model:checked="state.checked1" checked-children="开" un-checked-children="关" />
|
||||
<br />
|
||||
<a-switch v-model:checked="state.checked2" checked-children="1" un-checked-children="0" />
|
||||
<br />
|
||||
<a-switch v-model:checked="state.checked3">
|
||||
<template #checkedChildren><check-outlined /></template>
|
||||
<template #unCheckedChildren><close-outlined /></template>
|
||||
</a-switch>
|
||||
</div>
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue';
|
||||
|
||||
@ -9,7 +9,7 @@ const Demo = defineComponent({
|
||||
|
||||
return () => {
|
||||
return (
|
||||
<div style={{ padding: 12, background: token.value.colorFillSecondary }}>
|
||||
<div style={{ padding: '12px', background: token.value.colorFillSecondary }}>
|
||||
<Slider defaultValue={30} />
|
||||
<Slider range defaultValue={[20, 50]} />
|
||||
</div>
|
||||
|
||||
@ -10,7 +10,7 @@ const Demo = defineComponent({
|
||||
return () => {
|
||||
return (
|
||||
<Space direction={'vertical'}>
|
||||
<div style={{ padding: 12 }}>
|
||||
<div style={{ padding: '12px' }}>
|
||||
<Tag color="magenta">magenta</Tag>
|
||||
<Tag color="red">red</Tag>
|
||||
<Tag color="volcano">volcano</Tag>
|
||||
@ -24,7 +24,7 @@ const Demo = defineComponent({
|
||||
<Tag color="purple">purple</Tag>
|
||||
</div>
|
||||
<Divider />
|
||||
<div style={{ background: token.value.colorFillSecondary, padding: 12 }}>
|
||||
<div style={{ background: token.value.colorFillSecondary, padding: '12px' }}>
|
||||
<Tag color="magenta">magenta</Tag>
|
||||
<Tag color="red">red</Tag>
|
||||
<Tag color="volcano">volcano</Tag>
|
||||
|
||||
@ -39,7 +39,7 @@ export const Primary = defineComponent({
|
||||
{SelectTag.demo}
|
||||
</Space>
|
||||
{Pagination.demo}
|
||||
<div style={{ padding: 12 }}>{Steps.demo}</div>
|
||||
<div style={{ padding: '12px' }}>{Steps.demo}</div>
|
||||
<Space size={'large'} align={'start'}>
|
||||
{Popconfirm.demo}
|
||||
{Timeline.demo}
|
||||
|
||||
@ -18,9 +18,9 @@
|
||||
}
|
||||
&-card {
|
||||
cursor: pointer;
|
||||
transition: all var(--animation-duration-base) var(--ease-in-out);
|
||||
transition: all 0.5s ease 0s;
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-1-down);
|
||||
box-shadow: var(--shadow-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user