Skip to content

I
Ivy Ui

ivy / Ivy Ui
10 个月 前同步成功

通知 1
Star 1
Fork 0
I
Ivy Ui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 def06430 编写于 作者: fly丶知秋's avatar fly丶知秋
浏览文件
操作

feat: 完成tooltip基础功能

上级 0babfc1a
隐藏空白更改
内联 并排
Showing with 232 addition and 57 deletion
components/src/components/ivy-tooltip/ivy-tooltip.css
浏览文件 @ def06430
......@@ -2,81 +2,216 @@
display: inline-block;
position: relative;
}
.ivy-tooltip-ref {
display: inline-flex;
}
.ivy-tooltip-content {
background: #333;
color: white;
font-weight: bold;
padding: 4px 8px;
font-size: 13px;
border-radius: 4px;
display: none;
position: absolute;
transition: opacity 0.3s;
opacity: 0;
z-index: 10;
}
.ivy-tooltip-arrow,
.ivy-tooltip-arrow::before {
.ivy-tooltip-arrow {
position: absolute;
width: 8px;
height: 8px;
background: inherit;
}
.ivy-tooltip-arrow {
visibility: hidden;
.ivy-tooltip-arrow::before,
.ivy-tooltip-arrow::after {
content: '';
display: block;
position: absolute;
height: 0;
width: 0;
border: 6px solid transparent;
}
.ivy-tooltip-arrow::after {
border-width: 5px;
}
.ivy-tooltip-arrow::before {
visibility: visible;
content: '';
transform: rotate(45deg);
.ivy-tooltip-text {
padding: 8px 14px;
word-break: keep-all;
white-space: nowrap;
border: 1px solid var(--ivy-border-color, #dcdfe6);
border-radius: var(--ivy-border-radius, 4px);
background-color: #fff;
}
:host([placement|='top']) .ivy-tooltip-content {
bottom: calc(100% + 8px);
}
:host([placement='top']) .ivy-tooltip-content {
left: 50%;
transform: translateX(-50%);
}
:host([placement='top-start']) .ivy-tooltip-content {
left: 0;
}
:host([placement='top-end']) .ivy-tooltip-content {
right: 0;
}
:host([placement|='top']) .ivy-tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -6px;
}
:host([placement|='top']) .ivy-tooltip-arrow::before {
top: 7px;
border-top-color: var(--ivy-border-color, #dcdfe6);
}
:host([placement|='top']) .ivy-tooltip-arrow::after {
left: 1px;
top: 7px;
border-top-color: #ffffff;
}
:host([placement^='top']) .ivy-tooltip-content > .ivy-tooltip-arrow {
bottom: -4px;
:host([theme='dark'][placement|='top']) .ivy-tooltip-arrow::before {
border-top-color: rgb(70, 76, 91);
}
:host([theme='dark'][placement|='top']) .ivy-tooltip-arrow::after {
border-top-color: rgb(70, 76, 91);
}
:host([placement='top-end']) .ivy-tooltip-content > .ivy-tooltip-arrow {
right: 8px;
:host([theme='dark'][placement|='top']) .ivy-tooltip-text {
border: 1px solid rgb(70, 76, 91);
background-color: rgb(70, 76, 91);
color: white;
}
:host([placement^='bottom']) .ivy-tooltip-content > .ivy-tooltip-arrow {
:host([placement|='bottom']) .ivy-tooltip-content {
top: calc(100% + 8px);
}
:host([placement='bottom']) .ivy-tooltip-content {
left: 50%;
transform: translateX(-50%);
}
:host([placement='bottom-start']) .ivy-tooltip-content {
left: 0;
}
:host([placement='bottom-end']) .ivy-tooltip-content {
right: 0;
}
:host([placement|='bottom']) .ivy-tooltip-arrow {
top: -4px;
left: 50%;
margin-left: -6px;
}
:host([placement^='left']) .ivy-tooltip-content > .ivy-tooltip-arrow {
right: -4px;
:host([placement|='bottom']) .ivy-tooltip-arrow::before {
top: -7px;
border-color: transparent transparent var(--ivy-border-color, #dcdfe6) transparent;
}
:host([placement^='right']) .ivy-tooltip-content > .ivy-tooltip-arrow {
left: -4px;
:host([placement|='bottom']) .ivy-tooltip-arrow::after {
left: 1px;
top: -5px;
border-color: transparent transparent #ffffff transparent;
}
:host([show]) .ivy-tooltip-content {
display: block;
:host([theme='dark'][placement|='bottom']) .ivy-tooltip-arrow::before {
border-bottom-color: rgb(70, 76, 91);
}
:host([theme='dark'][placement|='bottom']) .ivy-tooltip-arrow::after {
border-bottom-color: rgb(70, 76, 91);
}
:host([theme='dark'][placement|='bottom']) .ivy-tooltip-text {
border: 1px solid rgb(70, 76, 91);
background-color: rgb(70, 76, 91);
color: white;
}
:host([placement='top-start']) .ivy-tooltip-arrow,
:host([placement='bottom-start']) .ivy-tooltip-arrow {
left: 20px;
}
:host([placement='top-end']) .ivy-tooltip-arrow,
:host([placement='bottom-end']) .ivy-tooltip-arrow {
left: calc(100% - 20px);
}
:host([placement^='top']) .ivy-tooltip-content {
:host([placement|='left']) .ivy-tooltip-content {
right: calc(100% + 8px);
}
:host([placement='left']) .ivy-tooltip-content {
top: 50%;
transform: translateY(-50%);
}
:host([placement='left-start']) .ivy-tooltip-content {
top: 0;
transform: translateY(calc(-100% - 10px));
}
:host([placement='top-end']) .ivy-tooltip-content {
right: 0;
:host([placement='left-end']) .ivy-tooltip-content {
bottom: 0;
}
:host([placement^='bottom']) .ivy-tooltip-content {
:host([placement|='left']) .ivy-tooltip-arrow {
right: -4px;
top: 50%;
margin-top: -6px;
}
:host([placement|='left']) .ivy-tooltip-arrow::before {
right: -7px;
border-color: transparent transparent transparent var(--ivy-border-color, #dcdfe6);
}
:host([placement|='left']) .ivy-tooltip-arrow::after {
top: 1px;
right: -5px;
border-color: transparent transparent transparent #ffffff;
}
:host([theme='dark'][placement|='left']) .ivy-tooltip-arrow::before {
border-left-color: rgb(70, 76, 91);
}
:host([theme='dark'][placement|='left']) .ivy-tooltip-arrow::after {
border-left-color: rgb(70, 76, 91);
}
:host([theme='dark'][placement|='left']) .ivy-tooltip-text {
border: 1px solid rgb(70, 76, 91);
background-color: rgb(70, 76, 91);
color: white;
}
:host([placement|='right']) .ivy-tooltip-content {
left: calc(100% + 8px);
}
:host([placement='right']) .ivy-tooltip-content {
top: 50%;
transform: translateY(-50%);
}
:host([placement='right-start']) .ivy-tooltip-content {
top: 0;
}
:host([placement='right-end']) .ivy-tooltip-content {
bottom: 0;
transform: translateY(calc(100% + 10px));
}
:host([placement|='right']) .ivy-tooltip-arrow {
left: -4px;
top: 50%;
margin-top: -6px;
}
:host([placement|='right']) .ivy-tooltip-arrow::before {
left: -7px;
border-color: transparent var(--ivy-border-color, #dcdfe6) transparent transparent;
}
:host([placement|='right']) .ivy-tooltip-arrow::after {
top: 1px;
left: -5px;
border-color: transparent #ffffff transparent transparent;
}
:host([placement='left-start']) .ivy-tooltip-arrow,
:host([placement='right-start']) .ivy-tooltip-arrow {
top: 12px;
}
:host([placement='left-end']) .ivy-tooltip-arrow,
:host([placement='right-end']) .ivy-tooltip-arrow {
top: calc(100% - 12px);
}
:host([placement^='left']) .ivy-tooltip-content {
top: 0;
left: 0;
transform: translateX(calc(-100% - 10px));
:host([theme='dark'][placement|='right']) .ivy-tooltip-arrow::before {
border-right-color: rgb(70, 76, 91);
}
:host([theme='dark'][placement|='right']) .ivy-tooltip-arrow::after {
border-right-color: rgb(70, 76, 91);
}
:host([theme='dark'][placement|='right']) .ivy-tooltip-text {
border: 1px solid rgb(70, 76, 91);
background-color: rgb(70, 76, 91);
color: white;
}
:host([placement^='right']) .ivy-tooltip-content {
top: 0;
right: 0;
transform: translateX(calc(100% + 10px));
:host([show]) .ivy-tooltip-content {
display: block;
opacity: 1;
}
components/src/components/ivy-tooltip/ivy-tooltip.tsx
浏览文件 @ def06430
......@@ -77,11 +77,11 @@ export class IvyTooltip {
render() {
return (
<Host show={this.visible}>
<div class="ivy-tooltip-ref" onMouseEnter={this.show.bind(this)} onFocus={this.show.bind(this)} onMouseLeave={this.hide.bind(this)} onBlur={this.hide.bind(this)}>
<div class="ivy-tooltip-ref" onMouseEnter={this.show.bind(this)} onMouseOut={this.hide.bind(this)}>
<slot></slot>
</div>
<div class="ivy-tooltip-content">
<div class="ivy-tooltip-arrow" data-popper-arrow></div>
<div class="ivy-tooltip-arrow"></div>
<div class="ivy-tooltip-text">
<slot name="content">{this.content}</slot>
</div>
......
components/src/index.html
浏览文件 @ def06430
......@@ -29,15 +29,15 @@
margin: 0;
}
.ivy-margin-top {
.margin-top {
margin-top: 12px;
}
.ivy-margin-left {
.-margin-left {
margin-left: 12px;
}
.ivy-margin-left-large {
.margin-left-large {
margin-left: 12px;
}
......@@ -50,12 +50,52 @@
</head>
<body>
<div style="height: 120vh"></div>
<div style="min-height: 200px">
<ivy-image src="https://xx.nonewall.com:12443/ydimage/assets/2022-08/1557544636157825024.png">321321321
</ivy-image>
<ivy-image src="https://xx.nonewall.com:12443/ydimage/assets/2022-08/1557544636157825024.png" lazy>321321321
</ivy-image>
</div>
<div>
<ivy-tooltip content="Tooltip 文字提示" placement="top-start" theme="dark">
<ivy-tag>top start</ivy-tag>
</ivy-tooltip>
<ivy-tooltip content="Tooltip 文字提示" placement="top" theme="dark">
<ivy-tag>top</ivy-tag>
</ivy-tooltip>
<ivy-tooltip content="Tooltip 文字提示" placement="top-end" theme="dark">
<ivy-tag>top end</ivy-tag>
</ivy-tooltip>
</div>
<div class="margin-top">
<ivy-tooltip content="Tooltip 文字提示" placement="bottom-start" theme="dark">
<ivy-tag>bottom start</ivy-tag>
</ivy-tooltip>
<ivy-tooltip content="Tooltip 文字提示" placement="bottom" theme="dark">
<ivy-tag>bottom</ivy-tag>
</ivy-tooltip>
<ivy-tooltip content="Tooltip 文字提示" placement="bottom-end" theme="dark">
<ivy-tag>bottom end</ivy-tag>
</ivy-tooltip>
</div>
<div class="margin-top">
<ivy-tooltip content="Tooltip 文字提示" placement="left-start" theme="dark">
<ivy-tag>left start</ivy-tag>
</ivy-tooltip>
<ivy-tooltip content="Tooltip 文字提示" placement="left" theme="dark">
<ivy-tag>left</ivy-tag>
</ivy-tooltip>
<ivy-tooltip content="Tooltip 文字提示" placement="left-end" theme="dark">
<ivy-tag>left end</ivy-tag>
</ivy-tooltip>
</div>
<div class="margin-top">
<ivy-tooltip content="Tooltip 文字提示" placement="right-start" theme="dark">
<ivy-tag>right start</ivy-tag>
</ivy-tooltip>
<ivy-tooltip content="Tooltip 文字提示" placement="right" theme="dark">
<ivy-tag>right</ivy-tag>
</ivy-tooltip>
<ivy-tooltip content="Tooltip 文字提示" placement="right-end" theme="dark">
<ivy-tag>right end</ivy-tag>
</ivy-tooltip>
</div>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或