mirror of https://github.com/ElemeFE/element
update popover/tooltip docs
parent
ae05740396
commit
ea3f87f61d
|
@ -7,6 +7,9 @@
|
||||||
- 修复 Select 多选时选项变为空数组后 placeholder 不出现的问题
|
- 修复 Select 多选时选项变为空数组后 placeholder 不出现的问题
|
||||||
- 修复 TimePicker 时间选择可滚动
|
- 修复 TimePicker 时间选择可滚动
|
||||||
|
|
||||||
|
#### 非兼容性更新
|
||||||
|
- Select 组件样式的 `display` 属性默认值修改为 `block`
|
||||||
|
|
||||||
### 1.0.0-rc.3
|
### 1.0.0-rc.3
|
||||||
|
|
||||||
*2016-09-09*
|
*2016-09-09*
|
||||||
|
|
|
@ -605,7 +605,7 @@
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||||
| type | 同原生的 input 的 type 属性,如果为textarea则显示为extarea | string | — | — |
|
| type | 同原生的 input 的 type 属性,如果为 textarea 则显示为 textarea | string | — | — |
|
||||||
| value | 绑定值 | string, number | — | — |
|
| value | 绑定值 | string, number | — | — |
|
||||||
| maxlength | 最大输入长度 | number | — | — |
|
| maxlength | 最大输入长度 | number | — | — |
|
||||||
| minlength | 最小输入长度 | number | — | — |
|
| minlength | 最小输入长度 | number | — | — |
|
||||||
|
|
|
@ -153,7 +153,7 @@ Popover 的属性与 Tooltip 很类似,它们都是基于`Vue-popper`开发的
|
||||||
|
|
||||||
### 嵌套信息
|
### 嵌套信息
|
||||||
|
|
||||||
嵌套表格的例子:
|
可以在 Popover 中嵌套多种类型信息,以下为嵌套表格的例子。
|
||||||
|
|
||||||
:::demo 利用分发取代`content`属性
|
:::demo 利用分发取代`content`属性
|
||||||
```html
|
```html
|
||||||
|
|
|
@ -115,6 +115,13 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.demo-select .el-select {
|
||||||
|
display: inline-block;
|
||||||
|
width: 240px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
## Select 选择器
|
## Select 选择器
|
||||||
|
|
||||||
当选项过多时,使用下拉菜单展示并选择内容。
|
当选项过多时,使用下拉菜单展示并选择内容。
|
||||||
|
|
|
@ -9,11 +9,11 @@
|
||||||
</script>
|
</script>
|
||||||
## Tooltips 文字提示
|
## Tooltips 文字提示
|
||||||
|
|
||||||
|
常用于展示鼠标 hover 时的提示信息。
|
||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
Tooltip 组件常用于展示鼠标 hover 时的提示信息,在这里我们提供9种不同的展示方式。
|
在这里我们提供 9 种不同方向的展示方式,可以通过以下完整示例来理解,选择你要的效果。
|
||||||
|
|
||||||
下面是完整的九个示例,可以通过该示例来理解,选择你要的效果:
|
|
||||||
|
|
||||||
:::demo 使用`content`属性来决定`hover`时的提示信息。由`placement`属性决定展示效果:`placement`属性值为:`方向-箭头方位`;四个方向:`top`、`left`、`right`、`bottom`;三种箭头方位:`start`, `end`,默认为空。如`top center`即`placement="top"`,`left top`即`placement="left-end"`。
|
:::demo 使用`content`属性来决定`hover`时的提示信息。由`placement`属性决定展示效果:`placement`属性值为:`方向-箭头方位`;四个方向:`top`、`left`、`right`、`bottom`;三种箭头方位:`start`, `end`,默认为空。如`top center`即`placement="top"`,`left top`即`placement="left-end"`。
|
||||||
|
|
||||||
|
|
|
@ -154,7 +154,7 @@
|
||||||
selected: {},
|
selected: {},
|
||||||
isSelect: true,
|
isSelect: true,
|
||||||
inputLength: 20,
|
inputLength: 20,
|
||||||
inputWidth: 180,
|
inputWidth: 0,
|
||||||
valueChangeBySelected: false,
|
valueChangeBySelected: false,
|
||||||
cachedPlaceHolder: '',
|
cachedPlaceHolder: '',
|
||||||
optionsCount: 0,
|
optionsCount: 0,
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
@component-namespace el {
|
@component-namespace el {
|
||||||
|
|
||||||
@b select {
|
@b select {
|
||||||
display: inline-block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@when small {
|
@when small {
|
||||||
|
@ -47,9 +47,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
& .el-input {
|
& .el-input {
|
||||||
width: 180px;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
& .el-input__icon {
|
& .el-input__icon {
|
||||||
color: #c0ccda;
|
color: #c0ccda;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
@ -99,10 +96,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@when multiple {
|
@when multiple {
|
||||||
& .el-input {
|
|
||||||
width: 220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .el-select-dropdown__item.selected {
|
& .el-select-dropdown__item.selected {
|
||||||
color: #20A0FF;
|
color: #20A0FF;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
|
|
||||||
@component-namespace el {
|
@component-namespace el {
|
||||||
@b slider {
|
@b slider {
|
||||||
|
@utils-clearfix;
|
||||||
@e runway {
|
@e runway {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
|
@ -21,7 +22,7 @@
|
||||||
|
|
||||||
@e input {
|
@e input {
|
||||||
float: right;
|
float: right;
|
||||||
margin-top: -10px;
|
margin-top: 7px;
|
||||||
|
|
||||||
& .el-input {
|
& .el-input {
|
||||||
width: 130px;
|
width: 130px;
|
||||||
|
|
Loading…
Reference in New Issue