github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

doc: update popover

feat-css-var
tangjinzhou 2022-03-05 16:39:47 +08:00
parent a041b5bace
commit dc21ce5346
4 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/popover/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,13 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/popover/demo/arrow-point-at-center.vue correctly 1`] = ` exports[`renders ./components/popover/demo/arrow-point-at-center.vue correctly 1`] = `
<div> <div class="ant-space ant-space-horizontal ant-space-align-center">
<!----><button class="ant-btn" type="button"> <div class="ant-space-item" style="margin-right: 8px;">
<!----><span>Align edge / 边缘对齐</span> <!----><button class="ant-btn" type="button">
</button> <!----><span>Align edge / 边缘对齐</span>
<!----><button class="ant-btn" type="button"> </button>
<!----><span>Arrow points to center / 箭头指向中心</span> </div>
</button> <!---->
<div class="ant-space-item">
<!----><button class="ant-btn" type="button">
<!----><span>Arrow points to center / 箭头指向中心</span>
</button>
</div>
<!---->
</div> </div>
`; `;

4
components/popover/demo/arrow-point-at-center.vue
View File

@ -16,7 +16,7 @@ The arrow points to the center of the target element, which set `arrowPointAtCen
</docs> </docs>
<template> <template>
<div> <a-space>
<a-popover placement="topLeft"> <a-popover placement="topLeft">
<template #content> <template #content>
<p>Content</p> <p>Content</p>
@ -37,5 +37,5 @@ The arrow points to the center of the target element, which set `arrowPointAtCen
</template> </template>
<a-button>Arrow points to center / 箭头指向中心</a-button> <a-button>Arrow points to center / 箭头指向中心</a-button>
</a-popover> </a-popover>
</div> </a-space>
</template> </template>

3
components/popover/style/customize.less
View File

@ -1,3 +0,0 @@
@import './index.less';
.popover-customize-bg(@popover-prefix-cls, @popover-background);

5
components/popover/style/index.less
View File

@ -99,6 +99,7 @@
color: @warning-color; color: @warning-color;
font-size: @font-size-base; font-size: @font-size-base;
} }
&-title { &-title {
padding-left: @font-size-base + 8px; padding-left: @font-size-base + 8px;
} }
@ -149,6 +150,7 @@
transform: translateY((-@popover-arrow-rotate-width / 2)) rotate(45deg); transform: translateY((-@popover-arrow-rotate-width / 2)) rotate(45deg);
} }
} }
&-placement-top &-arrow { &-placement-top &-arrow {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@ -172,13 +174,16 @@
transform: translateX((@popover-arrow-rotate-width / 2)) rotate(45deg); transform: translateX((@popover-arrow-rotate-width / 2)) rotate(45deg);
} }
} }
&-placement-right &-arrow { &-placement-right &-arrow {
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
&-placement-rightTop &-arrow { &-placement-rightTop &-arrow {
top: @popover-arrow-offset-vertical; top: @popover-arrow-offset-vertical;
} }
&-placement-rightBottom &-arrow { &-placement-rightBottom &-arrow {
bottom: @popover-arrow-offset-vertical; bottom: @popover-arrow-offset-vertical;
} }