(update)star-li支持embed-slider, 同时调整了star-li的padding-inline, 以适应轻量化的列布局
This commit is contained in:
wangchangqi
parent
c2040a9597
commit
b797f3e574
|
|
@ -23,8 +23,8 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-22px: calc(22px / var(--hostDevicePixelRatio));
|
||||
--auto-23px: calc(23px / var(--hostDevicePixelRatio));
|
||||
--auto-24px: calc(24px / var(--hostDevicePixelRatio));
|
||||
--auto-26px: calc(26px / var(--hostDevicePixelRatio));
|
||||
--auto-25_6px: calc(25.6px / var(--hostDevicePixelRatio));
|
||||
--auto-26px: calc(26px / var(--hostDevicePixelRatio));
|
||||
--auto-28px: calc(28px / var(--hostDevicePixelRatio));
|
||||
--auto-30px: calc(30px / var(--hostDevicePixelRatio));
|
||||
--auto-31px: calc(31px / var(--hostDevicePixelRatio));
|
||||
|
|
@ -43,6 +43,7 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-46_67px: calc(46.67px / var(--hostDevicePixelRatio));
|
||||
--auto-48px: calc(48px / var(--hostDevicePixelRatio));
|
||||
--auto-50px: calc(50px / var(--hostDevicePixelRatio));
|
||||
--auto-52px: calc(52px / var(--hostDevicePixelRatio));
|
||||
--auto-53px: calc(53px / var(--hostDevicePixelRatio));
|
||||
--auto-54px: calc(54px / var(--hostDevicePixelRatio));
|
||||
--auto-55px: calc(55px / var(--hostDevicePixelRatio));
|
||||
|
|
@ -52,10 +53,10 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-60px: calc(60px / var(--hostDevicePixelRatio));
|
||||
--auto-64px: calc(64px / var(--hostDevicePixelRatio));
|
||||
--auto-66px: calc(66px / var(--hostDevicePixelRatio));
|
||||
--auto-68px: calc(68px / var(--hostDevicePixelRatio));
|
||||
--auto-70px: calc(70px / var(--hostDevicePixelRatio));
|
||||
--auto-71px: calc(70px / var(--hostDevicePixelRatio));
|
||||
--auto-72px: calc(72px / var(--hostDevicePixelRatio));
|
||||
--auto-68px: calc(68px / var(--hostDevicePixelRatio));
|
||||
--auto-74px: calc(66px / var(--hostDevicePixelRatio));
|
||||
--auto-76px: calc(76px / var(--hostDevicePixelRatio));
|
||||
--auto-77px: calc(77px / var(--hostDevicePixelRatio));
|
||||
|
|
@ -122,7 +123,6 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-640px: calc(640px / var(--hostDevicePixelRatio));
|
||||
--auto-736px: calc(736px / var(--hostDevicePixelRatio));
|
||||
--auto-781px: calc(781px / var(--hostDevicePixelRatio));
|
||||
--auto-640px: calc(640px / var(--hostDevicePixelRatio));
|
||||
--auto-815px: calc(815px / var(--hostDevicePixelRatio));
|
||||
--auto-1040px: calc(1040px / var(--hostDevicePixelRatio));
|
||||
--auto-1592px: calc(1592px / var(--hostDevicePixelRatio));
|
||||
|
|
|
|||
|
|
@ -305,7 +305,10 @@ export default [
|
|||
}
|
||||
:host([type='text']) button {
|
||||
/* min-width 保障内容最少情况下的显示 */
|
||||
min-width: calc(var(--auto-56px) + var(--auto-56px) + 0.1px);
|
||||
min-width: var(
|
||||
--oc-text-min-width,
|
||||
calc(var(--auto-56px) + var(--auto-56px) + 0.1px)
|
||||
);
|
||||
padding-inline: var(--oc-text-padding-inline, var(--auto-56px));
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -170,45 +170,6 @@ type="embed-checkbox"
|
|||
└─────────┘ └────────────────┘ └────────────────┘
|
||||
```
|
||||
|
||||
## RadioGroup
|
||||
|
||||
Radio 在纵向或横向上的叠加
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────────────┐
|
||||
│<star-radio-group> │
|
||||
│ ┌────────────┬───────────────────────────────────────────────────┐ │
|
||||
│ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │
|
||||
│ │ <star-li> │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │
|
||||
│ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │
|
||||
│ │type='radio'│ │ │ │ Description | │circle/checkmark│ │ │
|
||||
│ │ │ └─────────┘ └────────────────┘ └────────────────┘ │ │
|
||||
│ └────────────┴───────────────────────────────────────────────────┘ │
|
||||
│ ┌────────────┬───────────────────────────────────────────────────┐ │
|
||||
│ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │
|
||||
│ │ <star-li> │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │
|
||||
│ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │
|
||||
│ │type='radio'│ │ │ │ Description | │circle/checkmark│ │ │
|
||||
│ │ │ └─────────┘ └────────────────┘ └────────────────┘ │ │
|
||||
│ └────────────┴───────────────────────────────────────────────────┘ │
|
||||
│ ... │
|
||||
└────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
```html
|
||||
<star-radio-group
|
||||
selected="first"
|
||||
name="自动切换模式"
|
||||
variant="circle" "checkmark"
|
||||
vertical(默认)
|
||||
checkedLocation="right"
|
||||
checkedType="symbol"
|
||||
>
|
||||
<star-li type='radio' checked label='日出到日落' description='根据所在地的日出和日落时间，自动切换浅色和深色模式'></star-li>
|
||||
<star-li type='radio' label='自定义时间' description='根据设置的时间段，自动切换浅色和深色模式'></star-li>
|
||||
</star-radio-group>
|
||||
```
|
||||
|
||||
## Card
|
||||
|
||||
```
|
||||
|
|
@ -241,3 +202,81 @@ Radio 在纵向或横向上的叠加
|
|||
| 次Description |
|
||||
-----------------
|
||||
```
|
||||
|
||||
## type="embed-slider"
|
||||
|
||||
结构:
|
||||
|
||||
```
|
||||
┌──────────────┬─────────────────────────────┐
|
||||
│ │ ┌───────┐ ┌─────────────┐ │
|
||||
│ <star-li> │ │ Label │---│ star-button │ │
|
||||
│ │ └───────┘ └─────────────┘ │
|
||||
│ type= │ ┌─────────────────────────┐ │
|
||||
│"embed-slider"│ │ star-slider │ │
|
||||
│ │ └─────────────────────────┘ │
|
||||
└──────────────┴─────────────────────────────┘
|
||||
```
|
||||
|
||||
基本示例:
|
||||
|
||||
```html
|
||||
<star-li type="embed-slider" label="图标大小">
|
||||
<star-button slot="slider-button" type="text" label="还原"></star-button>
|
||||
<star-slider slot="slider"></star-slider>
|
||||
</star-li>
|
||||
|
||||
<star-li type="embed-slider" label="屏幕亮度">
|
||||
<star-slider slot="slider" icon="brightness"></star-slider>
|
||||
</star-li>
|
||||
```
|
||||
|
||||
## `star-li` 在 `star-radio-group` 中
|
||||
|
||||
Radio 在纵向或横向上的叠加
|
||||
|
||||
交互注意:
|
||||
|
||||
- star-radio-group 上的 selected 优先级 > star-li 中的 checked 优先级
|
||||
- star-radio-group 上的 variant 优先级 > star-li 中的 variant 优先级
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────────────┐
|
||||
│<star-radio-group> │
|
||||
│ ┌────────────┬───────────────────────────────────────────────────┐ │
|
||||
│ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │
|
||||
│ │ <star-li> │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │
|
||||
│ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │
|
||||
│ │type='radio'│ │ │ │ Description | │circle/checkmark│ │ │
|
||||
│ │ │ └─────────┘ └────────────────┘ └────────────────┘ │ │
|
||||
│ └────────────┴───────────────────────────────────────────────────┘ │
|
||||
│ ┌────────────┬───────────────────────────────────────────────────┐ │
|
||||
│ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │
|
||||
│ │ <star-li> │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │
|
||||
│ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │
|
||||
│ │type='radio'│ │ │ │ Description | │circle/checkmark│ │ │
|
||||
│ │ │ └─────────┘ └────────────────┘ └────────────────┘ │ │
|
||||
│ └────────────┴───────────────────────────────────────────────────┘ │
|
||||
│ ... │
|
||||
└────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
```html
|
||||
<star-radio-group
|
||||
selected="first"
|
||||
name="自动切换模式"
|
||||
variant="circle/checkmark"
|
||||
>
|
||||
<star-li
|
||||
type="radio"
|
||||
checked
|
||||
label="日出到日落"
|
||||
description="根据所在地的日出和日落时间，自动切换浅色和深色模式"
|
||||
></star-li>
|
||||
<star-li
|
||||
type="radio"
|
||||
label="自定义时间"
|
||||
description="根据设置的时间段，自动切换浅色和深色模式"
|
||||
></star-li>
|
||||
</star-radio-group>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@ import {css} from 'lit'
|
|||
export default css`
|
||||
:host {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding-inline: var(--oc-li-padding-inline, var(--auto-48px));
|
||||
width: calc(100% - var(--oc-li-padding-inline, var(--auto-48px)) * 2);
|
||||
min-height: var(--auto-96px);
|
||||
}
|
||||
li {
|
||||
width: inherit;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding-inline: var(--oc-li-padding-inline, var(--auto-48px));
|
||||
}
|
||||
a {
|
||||
display: flex;
|
||||
|
|
@ -77,7 +77,7 @@ export default css`
|
|||
font-size: var(--auto-48px);
|
||||
min-width: var(--auto-48px);
|
||||
padding-inline-end: var(--auto-18px);
|
||||
margin: auto 0;
|
||||
margin: auto 0px;
|
||||
}
|
||||
a[href]::after {
|
||||
color: var(--li-link);
|
||||
|
|
@ -86,13 +86,13 @@ export default css`
|
|||
font-size: var(--auto-32px);
|
||||
width: var(--auto-32px);
|
||||
height: var(--auto-32px);
|
||||
margin: auto 0 auto auto;
|
||||
margin: auto 0px auto auto;
|
||||
padding-left: var(--auto-14px);
|
||||
}
|
||||
|
||||
div#content {
|
||||
display: flex;
|
||||
margin: auto 0;
|
||||
margin: auto 0px;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -105,7 +105,7 @@ export default css`
|
|||
span#label {
|
||||
font-weight: bold;
|
||||
color: var(--li-label);
|
||||
font-weight: 400;
|
||||
font-weight: 400px;
|
||||
font-size: var(--auto-26px);
|
||||
line-height: var(--auto-34px);
|
||||
}
|
||||
|
|
@ -118,18 +118,18 @@ export default css`
|
|||
margin: auto var(--auto-16px) var(--auto-1px) var(--auto-16px);
|
||||
padding-inline: var(--auto-8px);
|
||||
line-height: var(--auto-23px);
|
||||
font-weight: 500;
|
||||
font-weight: 500px;
|
||||
font-size: var(--auto-20px);
|
||||
color: var(--li-square);
|
||||
}
|
||||
div#square span {
|
||||
/* margin: var(--auto-_2px) var(--auto-5px) 0 var(--auto-6px); */
|
||||
/* margin: var(--auto-_2px) var(--auto-5px) 0px var(--auto-6px); */
|
||||
margin-left: var(--auto-6px);
|
||||
line-height: 0;
|
||||
line-height: 0px;
|
||||
}
|
||||
span#description {
|
||||
color: var(--li-description);
|
||||
font-weight: 400;
|
||||
font-weight: 400px;
|
||||
font-size: var(--auto-20px);
|
||||
line-height: var(--auto-18px);
|
||||
margin-top: var(--auto-12px);
|
||||
|
|
@ -138,7 +138,7 @@ export default css`
|
|||
flex: 1;
|
||||
display: inline-block; /* 用于克服未知排版故障(自身被挤压为0) */
|
||||
min-width: var(--auto-112px);
|
||||
margin: auto 0 auto var(--auto-20px);
|
||||
margin: auto 0px auto var(--auto-20px);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
font-size: var(--auto-26px);
|
||||
|
|
@ -158,26 +158,29 @@ export default css`
|
|||
}
|
||||
|
||||
/* type="input" */
|
||||
:host([type='input']) a {
|
||||
justify-content: space-between;
|
||||
:host([type='input']) {
|
||||
padding-inline: var(--auto-26px);
|
||||
width: calc(100% - var(--auto-26px) * 2);
|
||||
}
|
||||
:host([type='input']) li {
|
||||
border: var(--auto-3px) solid transparent;
|
||||
border-radius: var(--auto-16px);
|
||||
margin: var(--auto-16px) var(--auto-22px);
|
||||
padding-inline: var(--auto-26px);
|
||||
padding: var(--auto-16px) var(--auto-22px);
|
||||
}
|
||||
:host([type='input']) a {
|
||||
justify-content: space-between;
|
||||
}
|
||||
:host([type='input']) input {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: inherit;
|
||||
padding-inline-start: var(--auto-40px);
|
||||
border: 0;
|
||||
border: 0px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
font-weight: 400;
|
||||
font-weight: 400px;
|
||||
font-size: var(--auto-26px);
|
||||
line-height: var(--auto-26px);
|
||||
color: var(--li-input);
|
||||
|
|
@ -199,7 +202,7 @@ export default css`
|
|||
content: ' ';
|
||||
width: var(--auto-32px);
|
||||
height: var(--auto-32px);
|
||||
margin: auto 0 auto auto;
|
||||
margin: auto 0px auto auto;
|
||||
box-sizing: border-box;
|
||||
border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
|
||||
border-radius: 50%;
|
||||
|
|
@ -213,7 +216,7 @@ export default css`
|
|||
font-family: 'star-icons';
|
||||
font-size: var(--auto-48px);
|
||||
color: var(--theme-blue);
|
||||
border: 0;
|
||||
border: 0px;
|
||||
}
|
||||
:host([type='radio'][variant='checkmark'][checked]) a::after {
|
||||
content: 'tick';
|
||||
|
|
@ -228,13 +231,13 @@ export default css`
|
|||
content: ' ';
|
||||
width: var(--auto-32px);
|
||||
height: var(--auto-32px);
|
||||
margin: auto 0 auto auto;
|
||||
margin: auto 0px auto auto;
|
||||
box-sizing: border-box;
|
||||
border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
|
||||
border-radius: var(--auto-5px);
|
||||
}
|
||||
:host([type='checkbox'][pos='left']) a::before {
|
||||
margin: auto var(--auto-19px) auto 0;
|
||||
margin: auto var(--auto-19px) auto 0px;
|
||||
}
|
||||
:host([type='checkbox'][checked][pos='left']) a::before,
|
||||
:host([type='checkbox'][checked]:not([pos='left'])) a::after {
|
||||
|
|
@ -251,7 +254,7 @@ export default css`
|
|||
|
||||
/* other star-web-components */
|
||||
star-button[type='text']#li-text-button {
|
||||
--oc-text-padding-inline: 0;
|
||||
--oc-text-padding-inline: 0px;
|
||||
--oc-text-min-height: var(--auto-96px);
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
|
|
@ -274,13 +277,13 @@ export default css`
|
|||
width: var(--auto-64px);
|
||||
height: var(--auto-64px);
|
||||
color: var(--li-info);
|
||||
margin: auto var(--auto-32px) auto 0;
|
||||
margin: auto var(--auto-32px) auto 0px;
|
||||
font-size: var(--auto-32px);
|
||||
min-width: var(--auto-64px);
|
||||
}
|
||||
:host(:is([type='embed-info'], [type='embed-switch'], [type='embed-checkbox']))
|
||||
li {
|
||||
padding-inline-end: 0;
|
||||
:host(:is([type='embed-info'], [type='embed-switch'], [type='embed-checkbox'])) {
|
||||
padding-inline-end: 0px;
|
||||
width: calc(100% - var(--oc-li-padding-inline, var(--auto-48px)));
|
||||
}
|
||||
|
||||
::slotted(star-switch[slot='switch']) {
|
||||
|
|
@ -301,7 +304,7 @@ export default css`
|
|||
width: var(--auto-64px);
|
||||
height: var(--auto-64px);
|
||||
min-width: var(--auto-64px);
|
||||
margin: auto var(--oc-icon-margin-right, var(--auto-16px)) auto 0;
|
||||
margin: auto var(--oc-icon-margin-right, var(--auto-16px)) auto 0px;
|
||||
}
|
||||
::slotted(star-checkbox[slot='checkbox']) {
|
||||
position: relative;
|
||||
|
|
@ -323,6 +326,25 @@ export default css`
|
|||
height: var(--auto-40px);
|
||||
left: calc(0px - var(--auto-12px));
|
||||
}
|
||||
:host([type='embed-slider']) {
|
||||
flex-direction: column;
|
||||
}
|
||||
:host([type='embed-slider']) li {
|
||||
padding-bottom: var(--auto-24px);
|
||||
}
|
||||
::slotted(star-button[slot='slider-button']) {
|
||||
--oc-text-min-height: var(--auto-34px);
|
||||
--oc-text-padding-inline: 0px;
|
||||
--oc-text-min-width: min-width;
|
||||
margin: auto 0px auto auto;
|
||||
font-weight: 400px;
|
||||
font-size: var(--auto-26px);
|
||||
line-height: var(--auto-34px);
|
||||
color: var(--font-auxiliary-black);
|
||||
}
|
||||
::slotted(star-slider[slot='slider']) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 条目按压和释放时的变化 */
|
||||
:host(.starpress:not([type='embed-switch'], [type='embed-checkbox'])) {
|
||||
|
|
|
|||
|
|
@ -365,6 +365,10 @@ export class StarLi extends StarBaseElement {
|
|||
}}
|
||||
/>
|
||||
`
|
||||
case LiType.EMBED_SLIDER:
|
||||
return html`
|
||||
<slot name="slider-button"></slot>
|
||||
`
|
||||
case LiType.SWITCH:
|
||||
return html`
|
||||
<star-switch
|
||||
|
|
@ -383,20 +387,24 @@ export class StarLi extends StarBaseElement {
|
|||
|
||||
private generateDynamicSlot() {
|
||||
switch (this.type) {
|
||||
case LiType.EMBED_INFO:
|
||||
return html`
|
||||
<slot name="info"></slot>
|
||||
`
|
||||
case LiType.EMBED_SWITCH:
|
||||
return html`
|
||||
<slot name="switch"></slot>
|
||||
`
|
||||
case LiType.EMBED_CHECKBOX:
|
||||
return html`
|
||||
<div id="checkbox-container">
|
||||
<slot name="checkbox"></slot>
|
||||
</div>
|
||||
`
|
||||
case LiType.EMBED_INFO:
|
||||
return html`
|
||||
<slot name="info"></slot>
|
||||
`
|
||||
case LiType.EMBED_SLIDER:
|
||||
return html`
|
||||
<slot name="slider"></slot>
|
||||
`
|
||||
case LiType.EMBED_SWITCH:
|
||||
return html`
|
||||
<slot name="switch"></slot>
|
||||
`
|
||||
default:
|
||||
return nothing
|
||||
}
|
||||
|
|
@ -415,7 +423,7 @@ export class StarLi extends StarBaseElement {
|
|||
`
|
||||
}
|
||||
|
||||
private generateGeneral(renderStatic?: Function) {
|
||||
private generateGeneral() {
|
||||
return html`
|
||||
<a data-icon=${ifDefined(this.icon)} href=${ifDefined(this.href)}>
|
||||
${this.generateWidgetIcon()}
|
||||
|
|
@ -426,7 +434,7 @@ export class StarLi extends StarBaseElement {
|
|||
</div>
|
||||
${this.generateWidgetDescription()}
|
||||
</div>
|
||||
${this.generateWidgetValue()} ${renderStatic?.()}
|
||||
${this.generateWidgetValue()} ${this.generateStaticSlot()}
|
||||
</a>
|
||||
`
|
||||
}
|
||||
|
|
@ -454,9 +462,10 @@ export class StarLi extends StarBaseElement {
|
|||
case LiType.EMBED_CARD:
|
||||
// TBD
|
||||
|
||||
case LiType.EMBED_INFO:
|
||||
case LiType.EMBED_SWITCH:
|
||||
case LiType.EMBED_CHECKBOX:
|
||||
case LiType.EMBED_INFO:
|
||||
case LiType.EMBED_SLIDER:
|
||||
case LiType.EMBED_SWITCH:
|
||||
return html`
|
||||
<li>${this.generateGeneral()}</li>
|
||||
${this.generateDynamicSlot()}
|
||||
|
|
@ -467,7 +476,7 @@ export class StarLi extends StarBaseElement {
|
|||
|
||||
case LiType.INPUT:
|
||||
return html`
|
||||
<li>${this.generateGeneral(this.generateStaticSlot.bind(this))}</li>
|
||||
<li>${this.generateGeneral()}</li>
|
||||
`
|
||||
|
||||
case LiType.CHECKBOX:
|
||||
|
|
@ -480,7 +489,7 @@ export class StarLi extends StarBaseElement {
|
|||
this.emit(this.checked === true ? 'enabled' : 'disabled')
|
||||
}}
|
||||
>
|
||||
${this.generateGeneral(this.generateStaticSlot.bind(this))}
|
||||
${this.generateGeneral()}
|
||||
</li>
|
||||
`
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ import {
|
|||
} from './static/icons'
|
||||
import '@star-web-components/checkbox'
|
||||
import '@star-web-components/li'
|
||||
import '@star-web-components/slider'
|
||||
import '@star-web-components/switch'
|
||||
import {StarRadioGroup} from '@star-web-components/radio'
|
||||
|
||||
|
|
@ -333,6 +334,21 @@ export class PanelLi extends LitElement {
|
|||
<star-checkbox slot="checkbox" value="WLAN"></star-checkbox>
|
||||
<star-checkbox slot="checkbox" value="MOBILE_NETWORK"></star-checkbox>
|
||||
</star-li>
|
||||
<hr />
|
||||
<star-li type="embed-slider" label="图标大小">
|
||||
<star-button
|
||||
slot="slider-button"
|
||||
type="text"
|
||||
label="还原"
|
||||
></star-button>
|
||||
<star-slider slot="slider"></star-slider>
|
||||
</star-li>
|
||||
<star-li type="embed-slider" label="屏幕亮度">
|
||||
<star-slider slot="slider" icon="brightness">
|
||||
<div slot="l-icon" data-icon="brightness"></div>
|
||||
</star-slider>
|
||||
</star-li>
|
||||
<hr />
|
||||
|
||||
<h1>外嵌图标</h1>
|
||||
<star-li
|
||||
|
|
|
|||
Loading…
Reference in New Issue