Skip to content

Commit

Permalink
feat(Popover): add popover (#1422)
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlyyao
anlyyao authored Jun 26, 2023
1 parent b82a931 commit c4dc2ec
Show file tree
Hide file tree
Showing 4 changed files with 338 additions and 0 deletions.
19 changes: 19 additions & 0 deletions docs/mobile/api_v2/popover.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
title: Popover 弹出气泡
description: 用于文字提示的气泡框。
spline: base
isComponent: true
toc: false
---

### 01 组件类型

{{ type }}

### 02 组件样式

{{ theme }}

### 气泡弹出方向

{{ placement }}
81 changes: 81 additions & 0 deletions style/mobile/components/popover/_index.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
@import "../../base.less";

@import "./_mixin.less";

@import "./_var.less";

@import "../../utilities/_animation.less";

.@{prefix}-popover {
display: inline-block;
z-index: 1500;
position: absolute;
overflow: visible;

&__wrapper {
display: inline-block;
}

&__content {
position: relative;
box-shadow: @popover-shadow;
border-radius: 6px;
padding: @popover-padding;
font-size: @popover-content-font-size;
line-height: @popover-content-line-height;
box-sizing: border-box;
word-break: break-all;
}

&__arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: @popover-arrow-width;
}
}

.popover-theme(dark);
.popover-theme(light);
.popover-theme(brand);
.popover-theme(success);
.popover-theme(warning);
.popover-theme(error);

.content-placement-top();
.content-placement-bottom();
.content-placement-left();
.content-placement-right();

.arrow-placement-top();
.arrow-placement-bottom();
.arrow-placement-left();
.arrow-placement-right();

// animation
.@{popover-flow}-enter,
.@{popover-flow}-enter-from,
.@{popover-flow}-exiting,
.@{popover-flow}-leave-to {
opacity: 0;
visibility: hidden;
}

.@{popover-flow}-enter-to,
.@{popover-flow}-entering,
.@{popover-flow}-leave-from,
.@{popover-flow}-leave {
opacity: 1;
visibility: visible;
transform: none;
}

.@{popover-flow}-enter-active {
transition: @popover-flow-transition-enter;
}

.@{popover-flow}-leave-active {
transition: @popover-flow-transition-leave;
}
189 changes: 189 additions & 0 deletions style/mobile/components/popover/_mixin.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
.content-placement-top {
.@{prefix}-popover[data-popper-placement^="top"] {
.@{prefix}-popover__content {
margin-bottom: @popover-content-margin;
}
}
}

.content-placement-bottom {
.@{prefix}-popover[data-popper-placement^="bottom"] {
.@{prefix}-popover__content {
margin-top: @popover-content-margin;
}
}
}

.content-placement-left {
.@{prefix}-popover[data-popper-placement^="left"] {
.@{prefix}-popover__content {
margin-right: @popover-content-margin;
}
}
}

.content-placement-right {
.@{prefix}-popover[data-popper-placement^="right"] {
.@{prefix}-popover__content {
margin-left: @popover-content-margin;
}
}
}

.arrow-placement-top() {
.@{prefix}-popover[data-popper-placement^="top"] {
.@{prefix}-popover__arrow {
bottom: 0;
border-top-color: currentColor;
border-bottom-width: 0;
margin-bottom: calc(@popover-arrow-width * -1);
}
}

.@{prefix}-popover[data-popper-placement="top"] {
transform-origin: 50% 100%;

.@{prefix}-popover__arrow {
left: 50%;
transform: translateX(-50%);
}
}

.@{prefix}-popover[data-popper-placement="top-start"] {
transform-origin: 0 100%;

.@{prefix}-popover__arrow {
left: @popover-padding;
}
}

.@{prefix}-popover[data-popper-placement="top-end"] {
transform-origin: 100% 100%;

.@{prefix}-popover__arrow {
right: @popover-padding;
}
}
}

.arrow-placement-left() {
.@{prefix}-popover[data-popper-placement^="left"] {
.@{prefix}-popover__arrow {
right: 0;
border-right-width: 0;
border-left-color: currentColor;
margin-right: calc(@popover-arrow-width * -1);
}
}

.@{prefix}-popover[data-popper-placement="left"] {
transform-origin: 100% 50%;

.@{prefix}-popover__arrow {
top: 50%;
transform: translateY(-50%);
}
}

.@{prefix}-popover[data-popper-placement="left-start"] {
transform-origin: 100% 0;

.@{prefix}-popover__arrow {
top: @popover-padding;
}
}

.@{prefix}-popover[data-popper-placement="left-end"] {
transform-origin: 100% 100%;

.@{prefix}-popover__arrow {
bottom: @popover-padding;
}
}
}

.arrow-placement-bottom() {
.@{prefix}-popover[data-popper-placement^="bottom"] {
.@{prefix}-popover__arrow {
top: 0;
border-top-width: 0;
border-bottom-color: currentColor;
margin-top: calc(@popover-arrow-width * -1);
}
}

.@{prefix}-popover[data-popper-placement="bottom"] {
transform-origin: 50% 0;

.@{prefix}-popover__arrow {
left: 50%;
transform: translateX(-50%);
}
}

.@{prefix}-popover[data-popper-placement="bottom-start"] {
transform-origin: 0 0;

.@{prefix}-popover__arrow {
left: @popover-padding;
}
}

.@{prefix}-popover[data-popper-placement="bottom-end"] {
transform-origin: 100% 0;

.@{prefix}-popover__arrow {
right: @popover-padding;
}
}
}

.arrow-placement-right() {
.@{prefix}-popover[data-popper-placement^="right"] {
.@{prefix}-popover__arrow {
left: 0;
border-right-color: currentColor;
border-left-width: 0;
margin-left: calc(@popover-arrow-width * -1);
}
}

.@{prefix}-popover[data-popper-placement="right"] {
transform-origin: 0 50%;

.@{prefix}-popover__arrow {
top: 50%;
transform: translateY(-50%);
}
}

.@{prefix}-popover[data-popper-placement="right-start"] {
transform-origin: 0 0;

.@{prefix}-popover__arrow {
top: @popover-padding;
}
}

.@{prefix}-popover[data-popper-placement="right-end"] {
transform-origin: 0 100%;

.@{prefix}-popover__arrow {
bottom: @popover-padding;
}
}
}

.popover-theme(@theme) {
@color: "popover-@{theme}-color";
@bgColor: "popover-@{theme}-bg-color";

.@{prefix}-popover--@{theme} {
color: @@color;
background: @@bgColor;

.@{prefix}-popover__arrow {
color: @@bgColor;
}
}
}
49 changes: 49 additions & 0 deletions style/mobile/components/popover/_var.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
// 间距
@popover-padding: var(--td-popover-padding, 12px) ;
@popover-content-line-height: 24px;
@popover-arrow-width: 8px;
@popover-arrow-height: 8px;
@popover-content-arrow-spacer: 16px;
@popover-content-margin: 8px;

@popover-content-font-size: @font-size-m;

@shadow-inset-top: inset 0 .5px 0 #5e5e5e;
@shadow-inset-right: inset .5px 0 0 #5e5e5e;
@shadow-inset-bottom: inset 0 -.5px 0 #5e5e5e;
@shadow-inset-left: inset -.5px 0 0 #5e5e5e;

@shadow-inset: @shadow-inset-top, @shadow-inset-right, @shadow-inset-bottom, @shadow-inset-left;

// 阴影
@popover-shadow: @shadow-3;
@popover-top-arrow-shadow: @shadow-inset-left, @shadow-inset-bottom;
@popover-left-arrow-shadow: @shadow-inset-left, @shadow-inset-top;
@popover-bottom-arrow-shadow: @shadow-inset-top, @shadow-inset-right;
@popover-right-arrow-shadow: @shadow-inset-right, @shadow-inset-bottom;

// 动画
@popover-flow: ~"@{prefix}-popover--animation";
@popover-flow-duration: @anim-duration-base;
@popover-flow-fn: @anim-time-fn-ease-in;
@popover-flow-transition-enter: opacity @popover-flow-duration linear;
@popover-flow-transition-leave: opacity @popover-flow-duration @anim-time-fn-ease-out, visibility @popover-flow-duration @popover-flow-fn;

// 主题颜色
@popover-dark-color: #fff;
@popover-dark-bg-color: @font-gray-1;

@popover-light-color: @font-gray-1;
@popover-light-bg-color: #fff;

@popover-brand-color: @brand-color-7;
@popover-brand-bg-color: @brand-color-1;

@popover-success-color: @success-color-5;
@popover-success-bg-color: @success-color-1;

@popover-warning-color: @warning-color-5;
@popover-warning-bg-color: @warning-color-1;

@popover-error-color: @error-color-6;
@popover-error-bg-color: @error-color-1;

0 comments on commit c4dc2ec

Please sign in to comment.