openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

TASK: #111576 更新slider中填充cover属性

This commit is contained in:
duanzhijiang 2022-09-27 16:47:58 +08:00
parent a5471be9ba
commit 7018a275d0
3 changed files with 62 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/slider/README.md
View File

@ -13,37 +13,40 @@
<star-slider></star-slider>
```
2. `coverWidth` --- 初始填充
2. `cover` --- 初始填充<br>
`cover="50"` 和 `cover="50%"`都表示初始填充音量条的50%<br>
`cover="150px"` 表示准确的填充长度<br>
```
<star-slider coverWidth="150px"></star-slider>
<star-slider coverWidth="50%"></star-slider>
<star-slider cover="150px"></star-slider>
<star-slider cover="50%"></star-slider>
<star-slider cover="50"></star-slider>
```
3. `disabled` --- 禁用滑块
1. `disabled` --- 禁用滑块
```
<star-slider disabled></star-slider>
<star-slider disabled coverWidth="150px"></star-slider>
<star-slider disabled cover="150px"></star-slider>
```
4. `unfilled` --- 滑块中小球左侧不进行填充
```
<star-slider unfilled></star-slider>
<star-slider unfilled coverWidth="30%"></star-slider>
<star-slider unfilled coverWidth="30%" disabled></star-slider>
<star-slider unfilled cover="30%"></star-slider>
<star-slider unfilled cover="30%" disabled></star-slider>
```
5. `Tick` --- 分格滑块(默认是 unfilled 属性)
min=0,mix=100，按照需求填写 step(每一格）的大小<br>
example : <br>
step="25" 表示把 slider 分为 4 块<br>
coverWidth="40%" 表示初始小球落在第二格上
cover="40%" 表示初始小球落在第二格上
```
<star-slider tick step="10"></star-slider>
<star-slider tick step="20" coverWidth="40%" disabled></star-slider>
<star-slider tick step="20" cover="40%" disabled></star-slider>
```
6. `vertical` --- 垂直 slider
@ -51,7 +54,7 @@
```
<star-slider vertical></star-slider>
<star-slider vertical disabled></star-slider>
<star-slider vertical coverWidth="50%"></star-slider>
<star-slider vertical cover="50%"></star-slider>
```
7. `vHeight="300px"`代表垂直 slider 的长度 默认`vHeight="200px"`
@ -59,7 +62,7 @@
```
<star-slider vertical vHeight="300px"></star-slider>
<star-slider vertical disabled vHeight="300px"></star-slider>
<star-slider vertical coverWidth="50%" vHeight="100px"></star-slider>
<star-slider vertical cover="50%" vHeight="100px"></star-slider>
```
8. 左侧图标|行滑块|右侧图标
@ -81,7 +84,7 @@
- `slot="icon"` 表示图标在 slider 下部
```
<star-slider vertical coverWidth="100px">
<star-slider vertical cover="100px">
<div slot="icon" data-icon="alarm"></div>
</star-slider>
```

28
src/components/slider/slider.ts
View File

@ -2,9 +2,18 @@ import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit'
import {customElement, property, query} from 'lit/decorators.js'
import {sharedStyles} from './slider-styles.js'
function getType(str: string) {
if (/^\d*px$/.test(str)) {
return 'static'
} else if (/^\d*%?$/.test(str)) {
return 'percent'
} else {
return 'invalid'
}
}
@customElement('star-slider')
export class StarSlider extends LitElement {
_coverWidth: string = ''
_cover: string = '0'
_vHeight: string = ''
public static override get styles(): CSSResultArray {
return [sharedStyles]
@ -36,13 +45,20 @@ export class StarSlider extends LitElement {
@property({type: String}) endValue = ''
@property({type: String}) step = ''
@property({type: String})
get coverWidth() {
return this._coverWidth
get cover() {
return this._cover
}
set coverWidth(value: string) {
set cover(value: string) {
const type = getType(value)
if (type == 'percent' && !isNaN(+value)) {
value += '%'
} else if (type == 'invalid') {
value = this._cover
return
}
this.style.setProperty('--cover-width', value)
this._coverWidth = value
this.style.setProperty('--dot-move', this._coverWidth)
this._cover = value
this.style.setProperty('--dot-move', this._cover)
}
@property({type: String})
get vHeight() {

50
src/test/panels/slider/slider.ts
View File

@ -18,19 +18,19 @@ export class PanelSlider extends LitElement {
<div class="content">
<h4>vertical</h4>
<div style="background-color: #fff;float:left; border-radius:10px;margin-left:50px;height:250px;width:50px;">
<star-slider vertical coverWidth="100px">
<star-slider vertical cover="20">
<div slot="icon" data-icon="alarm"></div>
</star-slider>
</div>
<div style="background-color: #fff; border-radius:10px;float:left;margin-left:50px;height:200px;width:50px;">
<star-slider vertical coverWidth="100px" vHeight="150px">
<star-slider vertical cover="20%" vHeight="150px">
<div slot="icon" data-icon="alarm"></div>
</star-slider>
</div>
<div style="background-color: #fff; border-radius:10px;margin-left:250px;height:300px;width:50px;">
<star-slider vertical coverWidth="100px" vHeight="250px">
<star-slider vertical cover="100px" vHeight="250px">
<div slot="icon" data-icon="alarm"></div>
</star-slider>
</div>
@ -53,28 +53,28 @@ export class PanelSlider extends LitElement {
</star-slider>
</div>
<h4>coverWidth - 初始覆盖长度</h4>
<h4>cover - 初始覆盖长度</h4>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider coverWidth="150px"></star-slider>
<star-slider cover="50"></star-slider>
</div>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider coverWidth="30%"></star-slider>
<star-slider cover="30"></star-slider>
</div>
<h4>disabled</h4>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider disabled coverWidth="30%"></star-slider>
<star-slider disabled cover="30%"></star-slider>
</div>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider disabled coverWidth="70%"></star-slider>
<star-slider disabled cover="70%"></star-slider>
</div>
<h4>unfilled - 无覆盖</h4>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider unfilled coverWidth="20%"></star-slider>
<star-slider unfilled cover="20%"></star-slider>
</div>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider unfilled coverWidth="40%"></star-slider>
<star-slider unfilled cover="40%"></star-slider>
</div>
<h4>tick - 跳格滑动</h4>
<h5>step="10"</h5>
@ -83,27 +83,27 @@ export class PanelSlider extends LitElement {
</div>
<h5>step="20"</h5>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider tick step="20" coverWidth="20%"></star-slider>
<star-slider tick step="20" cover="20%"></star-slider>
</div>
<h5>step="50"</h5>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider tick step="50" coverWidth="50%"></star-slider>
<star-slider tick step="50" cover="50%"></star-slider>
</div>
<h5>step="25"</h5>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider tick step="25" disabled coverWidth="25%"></star-slider>
<star-slider tick step="25" disabled cover="25%"></star-slider>
</div>
</div>
<!-- <div style="height:300px">
<star-slider id="a" vertical disabled coverWidth="30%">
<star-slider id="a" vertical disabled cover="30%">
<p data-icon="bluetooth-a2dp"></p>
</star-slider>
</div>
<div style="height:150px">
<star-slider id="b" vertical coverWidth="70%">
<star-slider id="b" vertical cover="70%">
<p data-icon="alarm-clock"></p>
</star-slider>
</div> -->
@ -111,29 +111,29 @@ export class PanelSlider extends LitElement {
<star-slider>
<p class="left" data-icon="brightness"></p>
</star-slider>
<h4>coverWidth - 初始覆盖长度</h4>
<star-slider coverWidth="150px">
<h4>cover - 初始覆盖长度</h4>
<star-slider cover="150px">
<p data-icon="brightness"></p>
</star-slider>
<star-slider coverWidth="50%">
<star-slider cover="50%">
<p data-icon="brightness"></p>
</star-slider>
<h4>disabled</h4>
<star-slider disabled coverWidth="30%"></star-slider>
<star-slider disabled coverWidth="70%"></star-slider>
<star-slider disabled cover="30%"></star-slider>
<star-slider disabled cover="70%"></star-slider>
<h4>unfilled - 无覆盖</h4>
<star-slider unfilled coverWidth="20%"></star-slider>
<star-slider unfilled coverWidth="40%"></star-slider>
<star-slider unfilled cover="20%"></star-slider>
<star-slider unfilled cover="40%"></star-slider>
<h4>tick</h4>
<h5>step="10"</h5>
<star-slider tick step="10"></star-slider>
<h5>step="20"</h5>
<star-slider tick step="20" coverWidth="20%"></star-slider>
<star-slider tick step="20" cover="20%"></star-slider>
<h5>step="50"</h5>
<star-slider tick step="50" coverWidth="50%"></star-slider>
<star-slider tick step="50" cover="50%"></star-slider>
<h5>step="25"</h5>
<star-slider tick step="25" disabled coverWidth="25%"></star-slider>
<star-slider tick step="25" disabled cover="25%"></star-slider>
</div>
<star-slider>
<p class="left" data-icon="brightness"></p>