feat(@omiu/tip): add tip arrow style
This commit is contained in:
dntzhang
parent
e6fbbdd26a
commit
c4528974fb
|
|
@ -0,0 +1,49 @@
|
|||
## Tip
|
||||
|
||||
Components that show tooptip or popover.
|
||||
|
||||
<iframe height="391" style="width: 100%;" scrolling="no" title="OMIU Tip" src="https://codepen.io/omijs/embed/yLYMrdg?height=391&theme-id=default&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/yLYMrdg'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## Import
|
||||
|
||||
```js
|
||||
import '@omiu/tip'
|
||||
```
|
||||
|
||||
Or use script tag to ref it.
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@omiu/tip"></script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
<o-tip></o-tip>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
```tsx
|
||||
{
|
||||
content?: string,
|
||||
effect?: string,
|
||||
position?: string
|
||||
}
|
||||
```
|
||||
|
||||
### defaultProps
|
||||
|
||||
```tsx
|
||||
{
|
||||
content: '',
|
||||
effect: 'light',
|
||||
position: 'bottom'
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
## Tip 提示
|
||||
|
||||
提示
|
||||
|
||||
<iframe height="391" style="width: 100%;" scrolling="no" title="OMIU Tip" src="https://codepen.io/omijs/embed/yLYMrdg?height=391&theme-id=default&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/yLYMrdg'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## 导入
|
||||
|
||||
```js
|
||||
import '@omiu/tip'
|
||||
```
|
||||
|
||||
或者直接 script 标签引入。
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@omiu/tip"></script>
|
||||
```
|
||||
|
||||
## 使用
|
||||
|
||||
```html
|
||||
<o-tip></o-tip>
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
```tsx
|
||||
{
|
||||
content?: string,
|
||||
effect?: string,
|
||||
position?: string
|
||||
}
|
||||
```
|
||||
|
||||
### 默认属性
|
||||
```tsx
|
||||
{
|
||||
content: '',
|
||||
effect: 'light',
|
||||
position: 'bottom'
|
||||
}
|
||||
```
|
||||
|
|
@ -1,26 +1,26 @@
|
|||
## Table
|
||||
## Tip
|
||||
|
||||
Components that show tree nested data structures.
|
||||
Components that show tooptip or popover.
|
||||
|
||||
* [→ CodePen](https://codepen.io/omijs/pen/yLYMrdg)
|
||||
|
||||
## Import
|
||||
|
||||
```js
|
||||
import '@omiu/table'
|
||||
import '@omiu/tip'
|
||||
```
|
||||
|
||||
Or use script tag to ref it.
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@omiu/table"></script>
|
||||
<script src="https://unpkg.com/@omiu/tip"></script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
<o-table></o-table>
|
||||
<o-tip></o-tip>
|
||||
```
|
||||
|
||||
## API
|
||||
|
|
@ -29,15 +29,18 @@ Or use script tag to ref it.
|
|||
|
||||
```tsx
|
||||
{
|
||||
dataSource: any[],
|
||||
columns: object,
|
||||
checkbox: boolean,
|
||||
border: boolean
|
||||
content?: string,
|
||||
effect?: string,
|
||||
position?: string
|
||||
}
|
||||
```
|
||||
|
||||
### defaultProps
|
||||
|
||||
### Events
|
||||
|
||||
* changeall
|
||||
* change
|
||||
```tsx
|
||||
{
|
||||
content: '',
|
||||
effect: 'light',
|
||||
position: 'bottom'
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -96,11 +96,8 @@
|
|||
"useTabs": false
|
||||
},
|
||||
"dependencies": {
|
||||
"@omiu/checkbox": "latest",
|
||||
"@omiu/common": "latest",
|
||||
"@popperjs/core": "^2.9.2",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"omi": "latest"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3195,7 +3195,7 @@ exports = module.exports = __webpack_require__(/*! ../node_modules/_css-loader@1
|
|||
|
||||
|
||||
// module
|
||||
exports.push([module.i, ":host {\n display: inline-block; }\n", ""]);
|
||||
exports.push([module.i, "/**\n * omiu tip css based on element ui css\n * Licensed under the MIT License\n * https://github.com/ElemeFE/element/blob/dev/LICENSE\n *\n * modified by dntzhang\n */\n:host {\n display: inline-block; }\n\n.tip.show {\n display: block; }\n\n.tip {\n border: 1px solid #888;\n position: absolute;\n border-radius: 4px;\n padding: 10px;\n z-index: 2000;\n font-size: 12px;\n line-height: 1.2;\n min-width: 10px;\n word-wrap: break-word;\n display: none; }\n\n.tip .tip-arrow,\n.tip .tip-arrow::after {\n position: absolute;\n display: block;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid; }\n\n.tip .tip-arrow {\n border-width: 6px; }\n\n.tip .tip-arrow::after {\n content: \" \";\n border-width: 5px; }\n\n.tip[x-placement^=top] {\n margin-bottom: 12px; }\n\n.tip[x-placement^=top] .tip-arrow {\n bottom: -6px;\n border-top-color: #303133;\n border-bottom-width: 0; }\n\n.tip[x-placement^=top] .tip-arrow::after {\n bottom: 1px;\n margin-left: -5px;\n border-top-color: #303133;\n border-bottom-width: 0; }\n\n.tip[x-placement^=bottom] {\n margin-top: 12px; }\n\n.tip[x-placement^=bottom] .tip-arrow {\n top: -6px;\n border-top-width: 0;\n border-bottom-color: #303133; }\n\n.tip[x-placement^=bottom] .tip-arrow::after {\n top: 1px;\n margin-left: -5px;\n border-top-width: 0;\n border-bottom-color: #303133; }\n\n.tip[x-placement^=right] {\n margin-left: 12px; }\n\n.tip[x-placement^=right] .tip-arrow {\n left: -6px;\n border-right-color: #303133;\n border-left-width: 0; }\n\n.tip[x-placement^=right] .tip-arrow::after {\n bottom: -5px;\n left: 1px;\n border-right-color: #303133;\n border-left-width: 0; }\n\n.tip[x-placement^=left] {\n margin-right: 12px; }\n\n.tip[x-placement^=left] .tip-arrow {\n right: -6px;\n border-right-width: 0;\n border-left-color: #303133; }\n\n.tip[x-placement^=left] .tip-arrow::after {\n right: 1px;\n bottom: -5px;\n margin-left: -5px;\n border-right-width: 0;\n border-left-color: #303133; }\n\n.tip.is-dark {\n background: #303133;\n color: #FFF; }\n\n.tip.is-light {\n background: #FFF;\n border: 1px solid #303133; }\n\n.tip.is-light[x-placement^=top] .tip-arrow {\n border-top-color: #303133; }\n\n.tip.is-light[x-placement^=top] .tip-arrow::after {\n border-top-color: #FFF; }\n\n.tip.is-light[x-placement^=bottom] .tip-arrow {\n border-bottom-color: #303133; }\n\n.tip.is-light[x-placement^=bottom] .tip-arrow::after {\n border-bottom-color: #FFF; }\n\n.tip.is-light[x-placement^=left] .tip-arrow {\n border-left-color: #303133; }\n\n.tip.is-light[x-placement^=left] .tip-arrow::after {\n border-left-color: #FFF; }\n\n.tip.is-light[x-placement^=right] .tip-arrow {\n border-right-color: #303133; }\n\n.tip.is-light[x-placement^=right] .tip-arrow::after {\n border-right-color: #FFF; }\n", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
|
@ -5589,8 +5589,9 @@ var Table = /** @class */ (function (_super) {
|
|||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Table.prototype.render = function (props) {
|
||||
return omi_1.h("o-tip", null,
|
||||
omi_1.h("div", null, " \u63D0\u793A\uFF01\uFF01"));
|
||||
return omi_1.h("div", null,
|
||||
omi_1.h("o-tip", { style: "margin-left:100px;margin-top:100px;", position: "bottom", effect: "dark", content: "tip 123" },
|
||||
omi_1.h("div", null, " \u63D0\u793A\uFF01\uFF01")));
|
||||
};
|
||||
Table = __decorate([
|
||||
omi_1.tag('table-demo')
|
||||
|
|
@ -5657,23 +5658,48 @@ var css = __webpack_require__(/*! ./index.scss */ "./src/index.scss");
|
|||
var Table = /** @class */ (function (_super) {
|
||||
__extends(Table, _super);
|
||||
function Table() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
var _this = _super !== null && _super.apply(this, arguments) || this;
|
||||
_this.onMouseEnter = function () {
|
||||
_this.isShow = true;
|
||||
_this.update();
|
||||
var tip = _this.shadowRoot.querySelector('slot').assignedNodes()[0];
|
||||
core_1.createPopper(tip, _this.shadowRoot.querySelector('.tip'), {
|
||||
placement: _this.props.position,
|
||||
});
|
||||
};
|
||||
_this.onMouseLeave = function () {
|
||||
_this.isShow = false;
|
||||
_this.update();
|
||||
};
|
||||
_this.isShow = false;
|
||||
return _this;
|
||||
}
|
||||
Table.prototype.installed = function () {
|
||||
var tip = this.shadowRoot.querySelector('slot').assignedNodes()[0];
|
||||
var tooltip = document.createElement('div');
|
||||
tooltip.innerHTML = 'af';
|
||||
this.shadowRoot.appendChild(tooltip);
|
||||
core_1.createPopper(tip, tooltip, {
|
||||
placement: 'bottom',
|
||||
});
|
||||
};
|
||||
Table.prototype.render = function () {
|
||||
return omi_1.h("slot", null);
|
||||
Table.prototype.render = function (props) {
|
||||
var _a;
|
||||
return omi_1.h("div", null,
|
||||
omi_1.h("slot", { onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }),
|
||||
omi_1.h("div", { class: omi_1.classNames((_a = {
|
||||
tip: true,
|
||||
show: this.isShow
|
||||
},
|
||||
_a["is-" + props.effect] = props.effect,
|
||||
_a)), "x-placement": props.position },
|
||||
props.content,
|
||||
omi_1.h("i", { class: "tip-arrow" })));
|
||||
};
|
||||
Table.css = css;
|
||||
Table.defaultProps = {};
|
||||
Table.propTypes = {};
|
||||
Table.defaultProps = {
|
||||
content: '',
|
||||
effect: 'light',
|
||||
position: 'bottom'
|
||||
};
|
||||
Table.propTypes = {
|
||||
content: String,
|
||||
effect: String,
|
||||
position: String
|
||||
};
|
||||
Table = __decorate([
|
||||
omi_1.tag('o-tip')
|
||||
], Table);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,11 +4,13 @@ import './index.tsx'
|
|||
@tag('table-demo')
|
||||
export default class Table extends WeElement {
|
||||
|
||||
|
||||
render(props) {
|
||||
return < o-tip>
|
||||
<div> 提示！！</div>
|
||||
</o-tip>
|
||||
return <div>
|
||||
< o-tip style="margin-left:100px;margin-top:100px;" position="bottom" effect="dark" content="tip 123">
|
||||
<div> 提示！！</div>
|
||||
</o-tip>
|
||||
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,87 +1,129 @@
|
|||
/**
|
||||
* omiu tip css based on element ui css
|
||||
* Licensed under the MIT License
|
||||
* https://github.com/ElemeFE/element/blob/dev/LICENSE
|
||||
*
|
||||
* modified by dntzhang
|
||||
*/
|
||||
:host {
|
||||
display: inline-block; }
|
||||
|
||||
.tip.show {
|
||||
display: block; }
|
||||
|
||||
.o-table {
|
||||
background: white;
|
||||
margin: auto;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
animation: float 5s infinite;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
color: #606266;
|
||||
font-weight: 400; }
|
||||
.tip {
|
||||
border: 1px solid #888;
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
z-index: 2000;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
min-width: 10px;
|
||||
word-wrap: break-word;
|
||||
display: none; }
|
||||
|
||||
.o-table-checkbox th:first-child,
|
||||
.o-table-checkbox td:first-child {
|
||||
padding: 2px 10px 2px; }
|
||||
.tip .tip-arrow,
|
||||
.tip .tip-arrow::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid; }
|
||||
|
||||
th {
|
||||
border-bottom: 1px solid #E0E0E0;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
padding: 10px 10px 10px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.3125rem;
|
||||
font-weight: 500;
|
||||
background: #fafafa; }
|
||||
.tip .tip-arrow {
|
||||
border-width: 6px; }
|
||||
|
||||
.o-table-border td,
|
||||
.o-table-border th {
|
||||
border-right: 1px solid #ebeef5; }
|
||||
.tip .tip-arrow::after {
|
||||
content: " ";
|
||||
border-width: 5px; }
|
||||
|
||||
.o-table-border td:first-child,
|
||||
.o-table-border th:first-child {
|
||||
border-left: 1px solid #ebeef5; }
|
||||
.tip[x-placement^=top] {
|
||||
margin-bottom: 12px; }
|
||||
|
||||
.o-table-border th {
|
||||
border-top: 1px solid #ebeef5; }
|
||||
.tip[x-placement^=top] .tip-arrow {
|
||||
bottom: -6px;
|
||||
border-top-color: #303133;
|
||||
border-bottom-width: 0; }
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid #E0E0E0; }
|
||||
.tip[x-placement^=top] .tip-arrow::after {
|
||||
bottom: 1px;
|
||||
margin-left: -5px;
|
||||
border-top-color: #303133;
|
||||
border-bottom-width: 0; }
|
||||
|
||||
tr:hover td {
|
||||
background: #f5f5f5; }
|
||||
.tip[x-placement^=bottom] {
|
||||
margin-top: 12px; }
|
||||
|
||||
td {
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
font-size: 0.875rem;
|
||||
padding: 10px 10px 10px; }
|
||||
.tip[x-placement^=bottom] .tip-arrow {
|
||||
top: -6px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #303133; }
|
||||
|
||||
td.compact,
|
||||
th.compact {
|
||||
padding: 4px 10px 4px; }
|
||||
.tip[x-placement^=bottom] .tip-arrow::after {
|
||||
top: 1px;
|
||||
margin-left: -5px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #303133; }
|
||||
|
||||
a {
|
||||
text-decoration: none; }
|
||||
.tip[x-placement^=right] {
|
||||
margin-left: 12px; }
|
||||
|
||||
.o-table-align-left {
|
||||
text-align: left; }
|
||||
.tip[x-placement^=right] .tip-arrow {
|
||||
left: -6px;
|
||||
border-right-color: #303133;
|
||||
border-left-width: 0; }
|
||||
|
||||
.o-table-align-center {
|
||||
text-align: center; }
|
||||
.tip[x-placement^=right] .tip-arrow::after {
|
||||
bottom: -5px;
|
||||
left: 1px;
|
||||
border-right-color: #303133;
|
||||
border-left-width: 0; }
|
||||
|
||||
.o-table-align-right {
|
||||
text-align: right; }
|
||||
.tip[x-placement^=left] {
|
||||
margin-right: 12px; }
|
||||
|
||||
a,
|
||||
a:link,
|
||||
a:visited,
|
||||
a:active {
|
||||
text-decoration: none;
|
||||
color: inherit; }
|
||||
.tip[x-placement^=left] .tip-arrow {
|
||||
right: -6px;
|
||||
border-right-width: 0;
|
||||
border-left-color: #303133; }
|
||||
|
||||
a:hover {
|
||||
color: #07c160;
|
||||
color: var(--o-primary, #07c160); }
|
||||
.tip[x-placement^=left] .tip-arrow::after {
|
||||
right: 1px;
|
||||
bottom: -5px;
|
||||
margin-left: -5px;
|
||||
border-right-width: 0;
|
||||
border-left-color: #303133; }
|
||||
|
||||
o-checkbox {
|
||||
margin-right: 5px; }
|
||||
.tip.is-dark {
|
||||
background: #303133;
|
||||
color: #FFF; }
|
||||
|
||||
.o-table-stripe tr:nth-of-type(odd) {
|
||||
background: white; }
|
||||
.tip.is-light {
|
||||
background: #FFF;
|
||||
border: 1px solid #303133; }
|
||||
|
||||
.o-table-stripe tr:nth-of-type(even) {
|
||||
background: #fafafa; }
|
||||
.tip.is-light[x-placement^=top] .tip-arrow {
|
||||
border-top-color: #303133; }
|
||||
|
||||
.tip.is-light[x-placement^=top] .tip-arrow::after {
|
||||
border-top-color: #FFF; }
|
||||
|
||||
.tip.is-light[x-placement^=bottom] .tip-arrow {
|
||||
border-bottom-color: #303133; }
|
||||
|
||||
.tip.is-light[x-placement^=bottom] .tip-arrow::after {
|
||||
border-bottom-color: #FFF; }
|
||||
|
||||
.tip.is-light[x-placement^=left] .tip-arrow {
|
||||
border-left-color: #303133; }
|
||||
|
||||
.tip.is-light[x-placement^=left] .tip-arrow::after {
|
||||
border-left-color: #FFF; }
|
||||
|
||||
.tip.is-light[x-placement^=right] .tip-arrow {
|
||||
border-right-color: #303133; }
|
||||
|
||||
.tip.is-light[x-placement^=right] .tip-arrow::after {
|
||||
border-right-color: #FFF; }
|
||||
|
|
|
|||
|
|
@ -1,11 +1,25 @@
|
|||
import { WeElement } from 'omi';
|
||||
interface Props {
|
||||
content?: string;
|
||||
effect?: string;
|
||||
position?: string;
|
||||
}
|
||||
export default class Table extends WeElement<Props> {
|
||||
static css: any;
|
||||
static defaultProps: {};
|
||||
static propTypes: {};
|
||||
static defaultProps: {
|
||||
content: string;
|
||||
effect: string;
|
||||
position: string;
|
||||
};
|
||||
static propTypes: {
|
||||
content: StringConstructor;
|
||||
effect: StringConstructor;
|
||||
position: StringConstructor;
|
||||
};
|
||||
installed(): void;
|
||||
render(): JSX.Element;
|
||||
onMouseEnter: () => void;
|
||||
onMouseLeave: () => void;
|
||||
isShow: boolean;
|
||||
render(props: any): JSX.Element;
|
||||
}
|
||||
export {};
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,163 @@
|
|||
@import "@omiu/common/theme.scss";
|
||||
/**
|
||||
* omiu tip css based on element ui css
|
||||
* Licensed under the MIT License
|
||||
* https://github.com/ElemeFE/element/blob/dev/LICENSE
|
||||
*
|
||||
* modified by dntzhang
|
||||
*/
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
@import "@omiu/common/theme.scss";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tip.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.tip {
|
||||
border: 1px solid #888;
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
z-index: 2000;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
min-width: 10px;
|
||||
word-wrap: break-word;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tip .tip-arrow,
|
||||
.tip .tip-arrow::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid
|
||||
}
|
||||
|
||||
.tip .tip-arrow {
|
||||
border-width: 6px
|
||||
}
|
||||
|
||||
.tip .tip-arrow::after {
|
||||
content: " ";
|
||||
border-width: 5px
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tip[x-placement^=top] {
|
||||
margin-bottom: 12px
|
||||
}
|
||||
|
||||
.tip[x-placement^=top] .tip-arrow {
|
||||
bottom: -6px;
|
||||
border-top-color: #303133;
|
||||
border-bottom-width: 0
|
||||
}
|
||||
|
||||
.tip[x-placement^=top] .tip-arrow::after {
|
||||
bottom: 1px;
|
||||
margin-left: -5px;
|
||||
border-top-color: #303133;
|
||||
border-bottom-width: 0
|
||||
}
|
||||
|
||||
.tip[x-placement^=bottom] {
|
||||
margin-top: 12px
|
||||
}
|
||||
|
||||
.tip[x-placement^=bottom] .tip-arrow {
|
||||
top: -6px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #303133
|
||||
}
|
||||
|
||||
.tip[x-placement^=bottom] .tip-arrow::after {
|
||||
top: 1px;
|
||||
margin-left: -5px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #303133
|
||||
}
|
||||
|
||||
.tip[x-placement^=right] {
|
||||
margin-left: 12px
|
||||
}
|
||||
|
||||
.tip[x-placement^=right] .tip-arrow {
|
||||
left: -6px;
|
||||
border-right-color: #303133;
|
||||
border-left-width: 0
|
||||
}
|
||||
|
||||
.tip[x-placement^=right] .tip-arrow::after {
|
||||
bottom: -5px;
|
||||
left: 1px;
|
||||
border-right-color: #303133;
|
||||
border-left-width: 0
|
||||
}
|
||||
|
||||
.tip[x-placement^=left] {
|
||||
margin-right: 12px
|
||||
}
|
||||
|
||||
.tip[x-placement^=left] .tip-arrow {
|
||||
right: -6px;
|
||||
border-right-width: 0;
|
||||
border-left-color: #303133
|
||||
}
|
||||
|
||||
.tip[x-placement^=left] .tip-arrow::after {
|
||||
right: 1px;
|
||||
bottom: -5px;
|
||||
margin-left: -5px;
|
||||
border-right-width: 0;
|
||||
border-left-color: #303133
|
||||
}
|
||||
|
||||
.tip.is-dark {
|
||||
background: #303133;
|
||||
color: #FFF
|
||||
}
|
||||
|
||||
.tip.is-light {
|
||||
background: #FFF;
|
||||
border: 1px solid #303133
|
||||
}
|
||||
|
||||
.tip.is-light[x-placement^=top] .tip-arrow {
|
||||
border-top-color: #303133
|
||||
}
|
||||
|
||||
.tip.is-light[x-placement^=top] .tip-arrow::after {
|
||||
border-top-color: #FFF
|
||||
}
|
||||
|
||||
.tip.is-light[x-placement^=bottom] .tip-arrow {
|
||||
border-bottom-color: #303133
|
||||
}
|
||||
|
||||
.tip.is-light[x-placement^=bottom] .tip-arrow::after {
|
||||
border-bottom-color: #FFF
|
||||
}
|
||||
|
||||
.tip.is-light[x-placement^=left] .tip-arrow {
|
||||
border-left-color: #303133
|
||||
}
|
||||
|
||||
.tip.is-light[x-placement^=left] .tip-arrow::after {
|
||||
border-left-color: #FFF
|
||||
}
|
||||
|
||||
.tip.is-light[x-placement^=right] .tip-arrow {
|
||||
border-right-color: #303133
|
||||
}
|
||||
|
||||
.tip.is-light[x-placement^=right] .tip-arrow::after {
|
||||
border-right-color: #FFF
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import { tag, WeElement, h, extractClass, classNames, options } from 'omi'
|
||||
import { createPopper } from '@popperjs/core';
|
||||
|
||||
|
||||
import * as css from './index.scss'
|
||||
|
||||
interface Props {
|
||||
|
||||
content?: string,
|
||||
effect?: string,
|
||||
position?: string
|
||||
}
|
||||
|
||||
@tag('o-tip')
|
||||
|
|
@ -13,26 +14,49 @@ export default class Table extends WeElement<Props> {
|
|||
static css = css
|
||||
|
||||
static defaultProps = {
|
||||
|
||||
content: '',
|
||||
effect: 'light',
|
||||
position: 'bottom'
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
|
||||
content: String,
|
||||
effect: String,
|
||||
position: String
|
||||
}
|
||||
|
||||
installed() {
|
||||
|
||||
}
|
||||
|
||||
onMouseEnter = () => {
|
||||
this.isShow = true
|
||||
this.update()
|
||||
const tip = this.shadowRoot.querySelector('slot').assignedNodes()[0]
|
||||
|
||||
const tooltip = document.createElement('div')
|
||||
tooltip.innerHTML = 'af'
|
||||
|
||||
this.shadowRoot.appendChild(tooltip)
|
||||
createPopper(tip, tooltip, {
|
||||
placement: 'bottom',
|
||||
createPopper(tip, this.shadowRoot.querySelector('.tip'), {
|
||||
placement: this.props.position,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return <slot></slot>
|
||||
onMouseLeave = () => {
|
||||
this.isShow = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
isShow = false
|
||||
|
||||
render(props) {
|
||||
return <div>
|
||||
<slot onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}></slot>
|
||||
<div class={
|
||||
classNames({
|
||||
tip: true,
|
||||
show: this.isShow,
|
||||
[`is-${props.effect}`]: props.effect
|
||||
})
|
||||
} x-placement={props.position}>{props.content}
|
||||
<i class="tip-arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue