TASK:#105403 StarWebComponents开发-radio
This commit is contained in:
lvxiangcong
parent
ebd34e96f0
commit
131945546d
|
|
@ -8,3 +8,4 @@
|
|||
- add bubble
|
||||
- add indicator-page-point
|
||||
- add blur
|
||||
- add radio
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
# star-radio and star-radio group
|
||||
星光 Web 组件——单选框组件：radio组件介绍（8月31日)
|
||||
|
||||
|
||||
## 介绍
|
||||
star-radio和star-radio-group为单选框按钮和单选框按钮组，一般在使用过程中都是同时使用。
|
||||
star-radio属性：
|
||||
|
||||
### 1、checkedType属性
|
||||
单选框风格样式类型,checkedType="symbol"为默认类型(√),checkedType="round"为圆圈类型，后续根据具体要求可扩展定义
|
||||
```html demo
|
||||
<star-radio-group checkedType="round">
|
||||
<star-radio></star-radio>
|
||||
<star-radio-group>
|
||||
```
|
||||
### 2、checked属性
|
||||
Booloean类型，checked=true,单选框选中状态，checked=false,未选中状态。默认为false，不选中状态。
|
||||
```html demo
|
||||
<star-radio-group>
|
||||
<star-radio checked></star-radio>
|
||||
<star-radio></star-radio>
|
||||
<star-radio-group>
|
||||
```
|
||||
### 3、checkedLocation属性
|
||||
单选框选中图标位置状态，checkedLocation="left" 选中图标在左侧栏，checkedLocation="right" 选中图标在右侧栏，默认在左侧栏
|
||||
```html demo
|
||||
<star-radio-group checkedLocation="right">
|
||||
<star-radio checked></star-radio>
|
||||
<star-radio></star-radio>
|
||||
<star-radio-group>
|
||||
```
|
||||
### 4、label属性
|
||||
UI界面中的正文主体文本内容
|
||||
```html demo
|
||||
<star-radio-group checkedLocation="right">
|
||||
<star-radio label="content1" checked></star-radio>
|
||||
<star-radio> label="content2"</star-radio>
|
||||
<star-radio-group>
|
||||
```
|
||||
### 5、node属性
|
||||
UI界面中的正文主体文本内容下方补充扩展文本内容
|
||||
``` html demo
|
||||
<star-radio-group checkedLocation="right">
|
||||
<star-radio label="content1" label2="expand1" checked></star-radio>
|
||||
<star-radio> label="content2" label2="expand2" </star-radio>
|
||||
<star-radio-group>
|
||||
```
|
||||
### 6、icon属性
|
||||
控制ui界面中的图标字体样式属性
|
||||
```html demo
|
||||
<star-radio-group checkedLocation="right" checkedType="round">
|
||||
<star-radio icon="add" label="content1" label2="expand1" checked></star-radio>
|
||||
<star-radio> icon="keyboard" label="content2" label2="expand2" </star-radio>
|
||||
<star-radio-group>
|
||||
```
|
||||
### 7、iconcolor属性
|
||||
控制图标字体颜色样式属性，和icon属性同时使用时起作用
|
||||
```html demo
|
||||
<star-radio-group checkedLocation="right" checkedType="round">
|
||||
<star-radio icon="add" iconcolor="#226dee" label="content1" label2="expand1" checked></star-radio>
|
||||
<star-radio> icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" </star-radio>
|
||||
<star-radio-group>
|
||||
```
|
||||
### 8、disabled属性
|
||||
控制单选框按钮禁用状态，默认为：false。
|
||||
```html demo
|
||||
<star-radio-group checkedLocation="right" checkedType="round">
|
||||
<star-radio icon="add" iconcolor="#226dee" label="content1" label2="expand1" disabled></star-radio>
|
||||
<star-radio> icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" disabled</star-radio>
|
||||
<star-radio-group>
|
||||
```
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import {LitElement, html, CSSResultArray, PropertyValues} from 'lit'
|
||||
import {customElement, property, queryAssignedNodes} from 'lit/decorators.js'
|
||||
import './radio'
|
||||
import {StarRadio} from './radio'
|
||||
import {sharedStyles} from './radio-style'
|
||||
@customElement('star-radio-group')
|
||||
export class StarRadioGroup extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
@property() selected = ''
|
||||
@property() checkedLocation = 'left'
|
||||
@property() checkedType = ''
|
||||
constructor() {
|
||||
super()
|
||||
const shadowRoot = this.attachShadow({mode: 'open'})
|
||||
shadowRoot.addEventListener('change', (event: Event) => {
|
||||
event.stopPropagation() //阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。
|
||||
// @ts-ignore
|
||||
this.selected = event.target.value
|
||||
this.radioChange(event.target) //重构event.target对象
|
||||
})
|
||||
}
|
||||
@queryAssignedNodes() //用来获取对应的slot元素
|
||||
public defaultNodes!: Node[]
|
||||
public get radios(): StarRadio[] {
|
||||
return this.defaultNodes.filter(
|
||||
(node) => (node as HTMLElement) instanceof StarRadio
|
||||
) as StarRadio[]
|
||||
}
|
||||
render() {
|
||||
return html`
|
||||
<div id="star-radio-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
protected override firstUpdated(changes: PropertyValues): void {
|
||||
super.firstUpdated(changes)
|
||||
this.radios.map((radio) => {
|
||||
radio.checkedLocation = this.checkedLocation
|
||||
radio.checkedType = this.checkedType
|
||||
radio.checked ? (this.selected = radio.value) : ''
|
||||
})
|
||||
this.changeEvent()
|
||||
}
|
||||
// @ts-ignore
|
||||
radioChange(checkedRadio) {
|
||||
this.radios.map((radio) => {
|
||||
radio.checked = this.selected === radio.value
|
||||
})
|
||||
this.changeEvent()
|
||||
}
|
||||
protected changeEvent() {
|
||||
this.dispatchEvent(
|
||||
new Event('star-radio-change', {
|
||||
bubbles: true,
|
||||
composed: false,
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'star-radio-group': StarRadioGroup
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
export const sharedStyles: CSSResult = css`
|
||||
.star-radio {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
padding: 15px;
|
||||
}
|
||||
/*按钮禁用状态*/
|
||||
.star-radio.disabled {
|
||||
color: #606266;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
/*按钮选中状态*/
|
||||
.star-radio.checked {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
background-color: #b4c4e6;
|
||||
}
|
||||
.star-radio-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.star-radio-main.right {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.star-radio .label-img {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
/* 控制单选框显示的类型 */
|
||||
.star-radio .checktype {
|
||||
margin: 0 12px;
|
||||
/* text-align: center; */
|
||||
}
|
||||
.star-radio .checkedType.symbol {
|
||||
color: #1561f0;
|
||||
font-weight: bold;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.star-radio .checkedType.round {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #dedede;
|
||||
}
|
||||
.star-radio.checked .checkedType.round {
|
||||
border: 6px solid #1a60e2;
|
||||
}
|
||||
/*控制图标*/
|
||||
.star-radio .srcImg {
|
||||
margin: 10px;
|
||||
font-size: 25px;
|
||||
font-family: 'gaia-icons';
|
||||
text-align: center;
|
||||
}
|
||||
/*控制label*/
|
||||
.star-radio .label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.star-radio .label .label1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.star-radio .label .note {
|
||||
font-size: 12px;
|
||||
}
|
||||
.star-radio.checked .label {
|
||||
color: #1561f0;
|
||||
}
|
||||
`
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import {LitElement, html, CSSResultArray} from 'lit'
|
||||
import {customElement, property} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './radio-style'
|
||||
@customElement('star-radio')
|
||||
export class StarRadio extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
@property({type: String}) checkedType = ''
|
||||
@property({type: Boolean}) checked = false
|
||||
@property({type: Boolean}) disabled = false
|
||||
@property({type: String}) checkedLocation = 'left'
|
||||
@property({type: String}) label = ''
|
||||
@property({type: String}) note = ''
|
||||
@property({type: String}) icon = ''
|
||||
@property({type: String}) iconcolor = ''
|
||||
@property({type: String}) value = ''
|
||||
render() {
|
||||
return html`
|
||||
<div
|
||||
class="star-radio ${this.checked ? 'checked' : 'nothing'} ${this
|
||||
.disabled
|
||||
? 'disabled'
|
||||
: 'nothing'}"
|
||||
@click="${this.radioActivate}"
|
||||
>
|
||||
<div class="star-radio-main ${this.checkedLocation}">
|
||||
${this.checkedTypeFun()}
|
||||
<div class="label-img">
|
||||
${this.icon
|
||||
? html`
|
||||
<span class="srcImg">${this.icon}</span>
|
||||
`
|
||||
: ''}
|
||||
${this.iconcolor
|
||||
? html`
|
||||
<style>
|
||||
.star-radio .srcImg {
|
||||
color: ${this.iconcolor} !important;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
: ''}
|
||||
<span class="label">
|
||||
<span class="label1">${this.label}</span>
|
||||
${this.note
|
||||
? html`
|
||||
<span class="note">${this.note}</span>
|
||||
`
|
||||
: ''}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
protected radioActivate() {
|
||||
if (this.checked) return
|
||||
this.checked = true
|
||||
this.dispatchEvent(
|
||||
new Event('change', {
|
||||
bubbles: true, //向上冒泡
|
||||
composed: false, //事件不会在ShadowDOM根节点之外触发侦听器
|
||||
})
|
||||
)
|
||||
}
|
||||
checkedTypeFun() {
|
||||
if (this.checkedType === 'symbol') {
|
||||
return html`
|
||||
<span class="checkedType symbol">${this.checked ? `√` : ''}</span>
|
||||
`
|
||||
} else if (this.checkedType === 'round') {
|
||||
return html`
|
||||
<span class="checkedType round"></span>
|
||||
`
|
||||
} else {
|
||||
return html`
|
||||
<span class="checkedType">${this.checked ? `√` : ''}</span>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'star-radio': StarRadio
|
||||
}
|
||||
}
|
||||
|
|
@ -8,6 +8,8 @@ import {StarAnimateSection} from './components/section/section'
|
|||
import './components/section/section'
|
||||
import './test/panels/root'
|
||||
import './components/button/button'
|
||||
import './components/radio/radio-group'
|
||||
import './components/radio/radio'
|
||||
|
||||
@customElement('settings-app')
|
||||
export class SettingsApp extends LitElement {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,153 @@
|
|||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement, property, state} from 'lit/decorators.js'
|
||||
@customElement('panel-radio')
|
||||
export class PanelRadio extends LitElement {
|
||||
@property()
|
||||
foo = ''
|
||||
@state()
|
||||
bar = ''
|
||||
@state()
|
||||
addNumber = 0
|
||||
constructor() {
|
||||
super()
|
||||
const shadowRoot = this.attachShadow({mode: 'open'})
|
||||
shadowRoot.addEventListener('star-radio-change', (event: Event) => {
|
||||
event.stopPropagation()
|
||||
// @ts-ignore
|
||||
console.log('选择的单选框value : ' + event.target.__selected)
|
||||
})
|
||||
}
|
||||
render() {
|
||||
return html`
|
||||
<div>
|
||||
<div style="border: 1px dashed #bbbbbb; border-radius: 10px 10px 0 0">
|
||||
<div style="text-align: center; margin: 15px 0">自动锁屏</div>
|
||||
<star-radio-group
|
||||
id="star-radio-group1"
|
||||
checkedLocation="right"
|
||||
checkedType="symbol"
|
||||
>
|
||||
<star-radio label="15秒" value="15秒" checked></star-radio>
|
||||
<star-radio label="30秒" value="30秒"></star-radio>
|
||||
<star-radio label="1分钟" value="1分钟"></star-radio>
|
||||
<star-radio label="2分钟" value="2分钟"></star-radio>
|
||||
</star-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="border: 1px dashed #bbbbbb; border-radius: 10px 10px 0 0">
|
||||
<div style="text-align: center; margin: 15px 0">模式选择</div>
|
||||
<star-radio-group
|
||||
id="star-radio-group2"
|
||||
checkedLocation="right"
|
||||
checkedType="round"
|
||||
>
|
||||
<star-radio
|
||||
label="自动推荐壁纸"
|
||||
note="开启画报后，将为您推荐精选壁纸"
|
||||
value="自动推荐壁纸"
|
||||
checked
|
||||
></star-radio>
|
||||
<star-radio
|
||||
label="幻灯片壁纸"
|
||||
note="开启画报后，将为您轮播自选壁纸"
|
||||
value="幻灯片壁纸"
|
||||
></star-radio>
|
||||
</star-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="border: 1px dashed #bbbbbb; border-radius: 10px 10px 0 0">
|
||||
<div style="text-align: center; margin: 15px 0">色彩风格</div>
|
||||
<star-radio-group
|
||||
id="star-radio-group3"
|
||||
checkedLocation="left"
|
||||
checkedType="symbol"
|
||||
>
|
||||
<star-radio
|
||||
label="生动(推荐)"
|
||||
note="根据屏幕内容提供更生动的显示效果"
|
||||
value="生动(推荐)"
|
||||
checked
|
||||
></star-radio>
|
||||
<star-radio
|
||||
label="鲜艳"
|
||||
note="增强屏幕显示色彩"
|
||||
value="鲜艳"
|
||||
></star-radio>
|
||||
<star-radio
|
||||
label="标准"
|
||||
note="还原标准色彩，显示与其他标准显示设备一致的效果"
|
||||
value="标准"
|
||||
></star-radio>
|
||||
</star-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="border: 1px dashed #bbbbbb; border-radius: 10px 10px 0 0">
|
||||
<div style="text-align: center; margin: 15px 0">自动填充服务</div>
|
||||
<star-radio-group
|
||||
id="star-radio-group4"
|
||||
checkedLocation="right"
|
||||
checkedType="round"
|
||||
>
|
||||
<star-radio
|
||||
icon="add"
|
||||
iconcolor="#138d2e"
|
||||
label="添加"
|
||||
note="请添加具体内容"
|
||||
value="添加"
|
||||
checked
|
||||
></star-radio>
|
||||
<star-radio
|
||||
icon="keyboard"
|
||||
iconcolor="#226dee"
|
||||
label="麒麟智能密码管理"
|
||||
note="麒麟智能密码管理键盘详细说明"
|
||||
value="智能密码管理"
|
||||
></star-radio>
|
||||
<star-radio
|
||||
icon="link"
|
||||
iconcolor="#5710b3"
|
||||
label="添加服务"
|
||||
note="请选择要添加的具体服务"
|
||||
value="添加服务"
|
||||
></star-radio>
|
||||
</star-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="border: 1px dashed #bbbbbb; border-radius: 10px 10px 0 0">
|
||||
<div style="text-align: center; margin: 15px 0">禁用状态测试</div>
|
||||
<star-radio-group
|
||||
id="star-radio-group5"
|
||||
checkedLocation="right"
|
||||
checkedType="round"
|
||||
>
|
||||
<star-radio
|
||||
label="按钮禁用"
|
||||
note="无法添加"
|
||||
value="添加"
|
||||
value="first"
|
||||
disabled
|
||||
></star-radio>
|
||||
<star-radio
|
||||
label="麒麟智能密码管理"
|
||||
note="麒麟智能密码管理键盘详细说明"
|
||||
value="second"
|
||||
disabled
|
||||
></star-radio>
|
||||
</star-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
public static override get styles(): CSSResultArray {
|
||||
return []
|
||||
}
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'panel-radio': PanelRadio
|
||||
}
|
||||
}
|
||||
|
|
@ -13,6 +13,8 @@ import './indicators/indicators'
|
|||
import './blur/use-blur'
|
||||
import './button/button'
|
||||
import './container/container'
|
||||
import './radio/radio'
|
||||
|
||||
|
||||
type SEID = string
|
||||
|
||||
|
|
@ -118,6 +120,14 @@ export class PanelRoot extends LitElement {
|
|||
href="#button"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="单选框"
|
||||
icon="o"
|
||||
iconcolor="black"
|
||||
href="#radio"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="关于"
|
||||
|
|
|
|||
Loading…
Reference in New Issue