Merge pull request #34 in YR/star-web-components from feature-component-clock to master
* commit '92a8dfcc39922a719c2c6787d56455fa49527c2a': TASK:#110955 解决冲突 TASK:#110955修改部分冲突 TASK:#110955 添加时钟旋转动画,修改时钟整体布局为自适应布局 TASK:#110955 添加不同时钟样式,实现基本传值功能 TASK:#110955 StarWebComponents开发-clock
This commit is contained in:
汪昌棋
commit
5aabf0b78f
|
|
@ -9,6 +9,7 @@
|
||||||
- add indicator-page-point
|
- add indicator-page-point
|
||||||
- add blur
|
- add blur
|
||||||
- add radio
|
- add radio
|
||||||
|
- add clock
|
||||||
- add toast
|
- add toast
|
||||||
- add card
|
- add card
|
||||||
- add contaienr
|
- add contaienr
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
# star-clock
|
||||||
|
|
||||||
|
星光 Web 组件——时钟组件：clock组件介绍（9 月 22 日)
|
||||||
|
|
||||||
|
## 介绍
|
||||||
|
|
||||||
|
star-clock组件主要是用来显示时间的组件，用户只需传入时间初始值
|
||||||
|
star-clock 属性：
|
||||||
|
|
||||||
|
### 1、type 属性
|
||||||
|
|
||||||
|
时钟风格样式类型,type="transparent"为不带表盘时钟类型,type="diale"为带表盘类型
|
||||||
|
`html demo <star-clock type="diale"></star-clock> `
|
||||||
|
|
||||||
|
### 2、data 属性
|
||||||
|
|
||||||
|
时钟显示的时间,字符串类型，用户可自定义初始时间显示为data="9:40:10"，默认为data="00:00:00"，初始状态。
|
||||||
|
`html demo <star-clock type="diale" data="10:40:00"></star-clock> `
|
||||||
|
|
||||||
|
### 3、mode 属性
|
||||||
|
|
||||||
|
时钟深色模式和浅色模式，mode="dark"为深色模式，mode="light"为浅色模式，默认为深色模式。
|
||||||
|
`html demo <star-clock type="diale" data="10:40:00" mode="light"></star-clock> `
|
||||||
|
|
||||||
|
### 4、自适应布局
|
||||||
|
|
||||||
|
时钟整体布局设计为自适应布局，在测试时只需在外层div中设置默认width和height，可自适应显示时钟大小。
|
||||||
|
`html demo <div style="width: 380px; height: 380px"><star-clock date="09:00:00" type="diale"></star-clock></div> `
|
||||||
|
|
@ -0,0 +1,232 @@
|
||||||
|
import {css, CSSResult} from 'lit'
|
||||||
|
export const sharedStyles: CSSResult = css`
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.star-clock-case {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 10px solid #d9c393;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
|
||||||
|
backdrop-filter: blur(20.3871px);
|
||||||
|
background: radial-gradient(
|
||||||
|
46.11% 46.11% at 29.45% 23.09%,
|
||||||
|
rgba(64, 70, 89, 0.8) 0%,
|
||||||
|
rgba(36, 40, 56, 0.8) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
.star-clock-shaft {
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #c94d18;
|
||||||
|
border: 6px solid #e07548;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.star-clock-rotate {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 50%;
|
||||||
|
left: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
height: 45%;
|
||||||
|
width: 0px;
|
||||||
|
background-color: transparent;
|
||||||
|
transform-origin: 0 100%;
|
||||||
|
}
|
||||||
|
.star-clock-point {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
position: absolute;
|
||||||
|
right: 50%;
|
||||||
|
top: 0;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(245, 245, 245, 0.95) 0%,
|
||||||
|
rgba(245, 245, 245, 0.01) 100%
|
||||||
|
);
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(50%, 0);
|
||||||
|
}
|
||||||
|
.star-clock-hour-hand {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 50%;
|
||||||
|
left: 50%;
|
||||||
|
height: 25%;
|
||||||
|
transform-origin: 0 100%;
|
||||||
|
display: inline-block;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
animation: anmiate-hour 86400s linear infinite;
|
||||||
|
}
|
||||||
|
.star-clock-minute-hand {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 50%;
|
||||||
|
left: 50%;
|
||||||
|
height: 35%;
|
||||||
|
transform-origin: 0 100%;
|
||||||
|
display: inline-block;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
animation: anmiate-minute 3600s linear infinite;
|
||||||
|
}
|
||||||
|
.star-clock-second-hand {
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(50% - 16px);
|
||||||
|
left: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
height: 43%;
|
||||||
|
transform-origin: 0 calc(100% - 16px);
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
animation: anmiate-second 60s linear infinite;
|
||||||
|
}
|
||||||
|
/*有表盘浅色模式*/
|
||||||
|
.star-clock-case.light {
|
||||||
|
border: 10px solid #e8f6ff;
|
||||||
|
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
background: linear-gradient(
|
||||||
|
145.7deg,
|
||||||
|
rgba(179, 193, 242, 0.8) 16.24%,
|
||||||
|
rgba(122, 130, 161, 0.8) 94.91%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
.star-clock-case.light .star-clock-point {
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(245, 245, 245, 0.95) 0%,
|
||||||
|
rgba(245, 245, 245, 0.01) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
/*无表盘深色模式*/
|
||||||
|
.star-clock-case-transparent {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.star-clock-shaft-transparent {
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.star-clock-rotate-transparent {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 50%;
|
||||||
|
left: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
height: 50%;
|
||||||
|
width: 0px;
|
||||||
|
background-color: transparent;
|
||||||
|
transform-origin: 0 100%;
|
||||||
|
}
|
||||||
|
.star-clock-point-transparent {
|
||||||
|
display: inline-block;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
position: absolute;
|
||||||
|
right: 50%;
|
||||||
|
top: 0;
|
||||||
|
background: #000000;
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(50%, 0);
|
||||||
|
}
|
||||||
|
.star-clock-hour-hand-transparent {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(50% - 5px);
|
||||||
|
left: 50%;
|
||||||
|
height: 30%;
|
||||||
|
width: 3.5%;
|
||||||
|
background: #1a1a1a;
|
||||||
|
transform-origin: 0 calc(100% - 5px);
|
||||||
|
border-radius: 12px;
|
||||||
|
z-index: 1;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
animation: anmiate-hour 86400s linear infinite;
|
||||||
|
}
|
||||||
|
.star-clock-minute-hand-transparent {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 50%;
|
||||||
|
left: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
height: 33%;
|
||||||
|
width: 6px;
|
||||||
|
background: #1a1a1a;
|
||||||
|
transform-origin: 0 100%;
|
||||||
|
border-radius: 12px;
|
||||||
|
z-index: 1;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
animation: anmiate-minute 3600s linear infinite;
|
||||||
|
}
|
||||||
|
.star-clock-second-hand-transparent {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 50%;
|
||||||
|
left: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
height: 36%;
|
||||||
|
width: 4px;
|
||||||
|
background: #f43737;
|
||||||
|
transform-origin: 0 100%;
|
||||||
|
border-radius: 12px;
|
||||||
|
z-index: 0;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
animation: anmiate-second 60s linear infinite;
|
||||||
|
}
|
||||||
|
/*无表盘浅色模式*/
|
||||||
|
.star-clock-case-transparent.light .star-clock-point-transparent {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
.star-clock-case-transparent.light .star-clock-hour-hand-transparent {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
.star-clock-case-transparent.light .star-clock-minute-hand-transparent {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
.star-clock-case-transparent.light .star-clock-second-hand-transparent {
|
||||||
|
background: #f43737;
|
||||||
|
}
|
||||||
|
@keyframes anmiate-second {
|
||||||
|
from {
|
||||||
|
transform: rotate(var(--rotateSecond)) translate(-50%, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(var(--rotateSecondAfter)) translate(-50%, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes anmiate-minute {
|
||||||
|
from {
|
||||||
|
transform: rotate(var(--rotateMinute)) translate(-50%, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(var(--rotateMinuteAfter)) translate(-50%, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes anmiate-hour {
|
||||||
|
from {
|
||||||
|
transform: rotate(var(--rotateHour)) translate(-50%, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(var(--rotateHourAfter)) translate(-50%, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
@ -0,0 +1,130 @@
|
||||||
|
import {html, LitElement, CSSResultArray, nothing} from 'lit'
|
||||||
|
import {customElement, property, state} from 'lit/decorators.js'
|
||||||
|
import {sharedStyles} from './clock-style'
|
||||||
|
import darkHour from './svg/dark_hour.svg'
|
||||||
|
import darkMinute from './svg/dark_minute.svg'
|
||||||
|
import lightHour from './svg/light_hour.svg'
|
||||||
|
import lightMinute from './svg/light_minute.svg'
|
||||||
|
import second from './svg/second.svg'
|
||||||
|
|
||||||
|
export enum ClockType {
|
||||||
|
Transparent = 'transparent',
|
||||||
|
Diale = 'diale',
|
||||||
|
}
|
||||||
|
@customElement('star-clock')
|
||||||
|
export class StarClock extends LitElement {
|
||||||
|
public static override get styles(): CSSResultArray {
|
||||||
|
return [sharedStyles]
|
||||||
|
}
|
||||||
|
@property({type: String}) type = '' //时钟样式类型
|
||||||
|
@property({type: String}) mode = 'dark' //支持深色模式和浅色模式,默认背景是深色模式
|
||||||
|
@state() rotateHour = 0
|
||||||
|
@state() rotateMinute = 0
|
||||||
|
@state() rotateSecond = 0
|
||||||
|
private _date = '00:00:00'
|
||||||
|
set date(val: string) {
|
||||||
|
this._date = val
|
||||||
|
val && this.dateUpdated(val)
|
||||||
|
}
|
||||||
|
@property()
|
||||||
|
get date() {
|
||||||
|
return this._date
|
||||||
|
}
|
||||||
|
getTransparentClock() {
|
||||||
|
return html`
|
||||||
|
<div class="star-clock-case-transparent ${this.mode}">
|
||||||
|
<div class="star-clock-shaft-transparent"></div>
|
||||||
|
${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
|
||||||
|
(item) => html`
|
||||||
|
<span
|
||||||
|
class="star-clock-rotate-transparent"
|
||||||
|
style="transform: rotate(${(360 / 12) * item}deg)"
|
||||||
|
>
|
||||||
|
<span class="star-clock-point-transparent"></span>
|
||||||
|
</span>
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
<span class="star-clock-hour-hand-transparent"></span>
|
||||||
|
<span class="star-clock-minute-hand-transparent"></span>
|
||||||
|
<span class="star-clock-second-hand-transparent"></span>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
getDialeClock() {
|
||||||
|
return html`
|
||||||
|
<div class="star-clock-case ${this.mode}">
|
||||||
|
<div class="star-clock-shaft"></div>
|
||||||
|
${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
|
||||||
|
(item) => html`
|
||||||
|
<span
|
||||||
|
class="star-clock-rotate"
|
||||||
|
style="transform: rotate(${(360 / 12) * item}deg)"
|
||||||
|
>
|
||||||
|
<span class="star-clock-point"></span>
|
||||||
|
</span>
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
<img
|
||||||
|
class="star-clock-hour-hand"
|
||||||
|
src=${this.modeChange(this.mode).hour}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="star-clock-minute-hand"
|
||||||
|
src=${this.modeChange(this.mode).minute}
|
||||||
|
/>
|
||||||
|
<img class="star-clock-second-hand" src=${second} />
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
switch (this.type) {
|
||||||
|
case ClockType.Transparent:
|
||||||
|
return this.getTransparentClock()
|
||||||
|
case ClockType.Diale:
|
||||||
|
return this.getDialeClock()
|
||||||
|
default:
|
||||||
|
console.error('unhanled [star-clock] type')
|
||||||
|
return nothing
|
||||||
|
}
|
||||||
|
}
|
||||||
|
modeChange(mode: any) {
|
||||||
|
if (mode === 'light') {
|
||||||
|
return {
|
||||||
|
hour: lightHour,
|
||||||
|
minute: lightMinute,
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
hour: darkHour,
|
||||||
|
minute: darkMinute,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
protected dateUpdated(date: any) {
|
||||||
|
let myDate = date.split(':') //将字符串转化为数组
|
||||||
|
let secondTime = Number(myDate[2] || 0)
|
||||||
|
let minuteTime = Number(myDate[1] || 0) + secondTime / 60
|
||||||
|
let hourTime = Number(myDate[0] || 0) + minuteTime / 60
|
||||||
|
hourTime >= 12 ? (hourTime -= 12) : ''
|
||||||
|
this.rotateSecond = (secondTime / 60) * 360
|
||||||
|
this.rotateMinute = (minuteTime / 60) * 360
|
||||||
|
this.rotateHour = (hourTime / 12) * 360
|
||||||
|
this.style.setProperty('--rotateSecond', this.rotateSecond + 'deg')
|
||||||
|
this.style.setProperty('--rotateMinute', this.rotateMinute + 'deg')
|
||||||
|
this.style.setProperty('--rotateHour', this.rotateHour + 'deg')
|
||||||
|
this.style.setProperty(
|
||||||
|
'--rotateSecondAfter',
|
||||||
|
this.rotateSecond + 360 + 'deg'
|
||||||
|
)
|
||||||
|
this.style.setProperty(
|
||||||
|
'--rotateMinuteAfter',
|
||||||
|
this.rotateMinute + 360 + 'deg'
|
||||||
|
)
|
||||||
|
this.style.setProperty('--rotateHourAfter', this.rotateHour + 360 + 'deg')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'star-clock': StarClock
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
declare module '*.svg'
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="12" height="90" viewBox="0 0 12 90" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M2.61804 3.2814L0.181058 84.0027C0.0819586 87.2852 2.71599 90 6 90C9.28401 90 11.918 87.2852 11.8189 84.0027L9.38196 3.2814C9.32677 1.45333 7.8289 0 6 0C4.1711 0 2.67323 1.45334 2.61804 3.2814Z" fill="#F0F0F0"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 324 B |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="12" height="152" viewBox="0 0 12 152" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.9408 2.99941C2.97368 1.33339 4.33366 0 6 0V0C7.66634 0 9.02632 1.3334 9.0592 2.99942L11.8816 146.001C11.9466 149.295 9.29438 152 6 152V152C2.70562 152 0.05339 149.295 0.118398 146.001L2.9408 2.99941Z" fill="#A2A6AD"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 375 B |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="12" height="90" viewBox="0 0 12 90" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M2.61804 3.2814L0.181058 84.0027C0.0819586 87.2852 2.71599 90 6 90C9.28401 90 11.918 87.2852 11.8189 84.0027L9.38196 3.2814C9.32677 1.45333 7.8289 0 6 0C4.1711 0 2.67323 1.45334 2.61804 3.2814Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 322 B |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="12" height="152" viewBox="0 0 12 152" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.9408 2.99941C2.97368 1.33339 4.33366 0 6 0V0C7.66634 0 9.02632 1.3334 9.0592 2.99942L11.8816 146.001C11.9466 149.295 9.29438 152 6 152V152C2.70562 152 0.05339 149.295 0.118398 146.001L2.9408 2.99941Z" fill="#D5DDF3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 375 B |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="4" height="170" viewBox="0 0 4 170" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 170C0.895431 170 -3.91405e-08 169.105 -8.74228e-08 168L-7.34351e-06 2C-7.3918e-06 0.895432 0.895423 -3.91405e-08 1.99999 -8.74228e-08C3.10456 -1.35705e-07 3.99999 0.895431 3.99999 2L4 168C4 169.105 3.10457 170 2 170Z" fill="#E07548"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 390 B |
|
|
@ -11,6 +11,7 @@ import './components/button/button'
|
||||||
import './components/radio/radio-group'
|
import './components/radio/radio-group'
|
||||||
import './components/radio/radio'
|
import './components/radio/radio'
|
||||||
import './components/confirm/confirm'
|
import './components/confirm/confirm'
|
||||||
|
import './components/clock/clock'
|
||||||
import './components/toast/toast'
|
import './components/toast/toast'
|
||||||
import './components/picker/picker'
|
import './components/picker/picker'
|
||||||
import './components/overflowmenu/overflowmenu'
|
import './components/overflowmenu/overflowmenu'
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
import {html, css, LitElement} from 'lit'
|
||||||
|
import {customElement, property, state} from 'lit/decorators.js'
|
||||||
|
@customElement('panel-clock')
|
||||||
|
export class PanelClock extends LitElement {
|
||||||
|
@property()
|
||||||
|
foo = ''
|
||||||
|
@state()
|
||||||
|
date = ''
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<h3
|
||||||
|
style="display:flex;justify-content: center; align-items: center; padding: 20px 0"
|
||||||
|
>
|
||||||
|
组件-时间-带表壳
|
||||||
|
</h3>
|
||||||
|
<div
|
||||||
|
style="display:flex;justify-content: center; align-items: center; padding: 20px 0;"
|
||||||
|
>
|
||||||
|
<div style="width: 380px; height: 380px">
|
||||||
|
<star-clock date="09:00:00" type="diale"></star-clock>
|
||||||
|
</div>
|
||||||
|
<div style="width: 380px; height: 380px">
|
||||||
|
<star-clock date="05:20:00" type="diale" mode="light"></star-clock>
|
||||||
|
</div>
|
||||||
|
<div style="width: 300px; height: 300px">
|
||||||
|
<star-clock date="08:30:00" type="diale"></star-clock>
|
||||||
|
</div>
|
||||||
|
<div style="width: 300px; height: 300px">
|
||||||
|
<star-clock date="05:20:00" type="diale" mode="light"></star-clock>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3
|
||||||
|
style="display:flex;justify-content: center; align-items: center; padding: 20px 0"
|
||||||
|
>
|
||||||
|
组件-时间-不带表壳
|
||||||
|
</h3>
|
||||||
|
<div
|
||||||
|
style="display:flex;justify-content: center; align-items: center; padding: 20px 0"
|
||||||
|
>
|
||||||
|
<div style="width: 476px; height: 476px">
|
||||||
|
<star-clock date="9:27:10" type="transparent"></star-clock>
|
||||||
|
</div>
|
||||||
|
<div style="width: 476px; height: 476px">
|
||||||
|
<star-clock
|
||||||
|
date="10:27:10"
|
||||||
|
type="transparent"
|
||||||
|
mode="light"
|
||||||
|
></star-clock>
|
||||||
|
</div>
|
||||||
|
<div style="width: 300px; height: 300px">
|
||||||
|
<star-clock date="08:30:00" type="transparent"></star-clock>
|
||||||
|
</div>
|
||||||
|
<div style="width: 300px; height: 300px">
|
||||||
|
<star-clock
|
||||||
|
date="10:25:00"
|
||||||
|
type="transparent"
|
||||||
|
mode="light"
|
||||||
|
></star-clock>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
static styles = css``
|
||||||
|
protected firstUpdated() {
|
||||||
|
setInterval(() => {
|
||||||
|
let date = new Date() //定时器，每隔1秒不断的执行该函数进行传值
|
||||||
|
this.date = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'panel-clock': PanelClock
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -17,6 +17,7 @@ import './button/button'
|
||||||
import './container/container'
|
import './container/container'
|
||||||
import './radio/radio'
|
import './radio/radio'
|
||||||
import './confirm/confirm'
|
import './confirm/confirm'
|
||||||
|
import './clock/clock'
|
||||||
import './overflowmenu/overflowmenu'
|
import './overflowmenu/overflowmenu'
|
||||||
import './switch/switch'
|
import './switch/switch'
|
||||||
import './slider/slider'
|
import './slider/slider'
|
||||||
|
|
@ -266,7 +267,14 @@ export class PanelRoot extends LitElement {
|
||||||
href="#icon"
|
href="#icon"
|
||||||
></star-li>
|
></star-li>
|
||||||
</star-ul>
|
</star-ul>
|
||||||
|
<star-li
|
||||||
|
type=${LiType.ICON_LABEL}
|
||||||
|
label="时钟"
|
||||||
|
icon="alarm"
|
||||||
|
iconcolor="green"
|
||||||
|
href="#clock"
|
||||||
|
></star-li>
|
||||||
|
<hr />
|
||||||
<star-ul type=${UlType.BASE}>
|
<star-ul type=${UlType.BASE}>
|
||||||
<star-li
|
<star-li
|
||||||
type=${LiType.ONLY_EDIT}
|
type=${LiType.ONLY_EDIT}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue