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

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:
汪昌棋 2022-09-22 20:26:37 +08:00
parent 2977e93f4a 92a8dfcc39
commit 5aabf0b78f
13 changed files with 492 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -9,6 +9,7 @@
- add indicator-page-point
- add blur
- add radio
- add clock
- add toast
- add card
- add contaienr

28
src/components/clock/README.md Normal file
View File

@ -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> `

232
src/components/clock/clock-style.ts Normal file
View File

@ -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);
}
}
`

130
src/components/clock/clock.ts Normal file
View File

@ -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
}
}

1
src/components/clock/config.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module '*.svg'

3
src/components/clock/svg/dark_hour.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 324 B

3
src/components/clock/svg/dark_minute.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 375 B

3
src/components/clock/svg/light_hour.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 322 B

3
src/components/clock/svg/light_minute.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 375 B

3
src/components/clock/svg/second.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 390 B

1
src/index.ts
View File

@ -11,6 +11,7 @@ import './components/button/button'
import './components/radio/radio-group'
import './components/radio/radio'
import './components/confirm/confirm'
import './components/clock/clock'
import './components/toast/toast'
import './components/picker/picker'
import './components/overflowmenu/overflowmenu'

75
src/test/panels/clock/clock.ts Normal file
View File

@ -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
}
}

10
src/test/panels/root.ts
View File

@ -17,6 +17,7 @@ import './button/button'
import './container/container'
import './radio/radio'
import './confirm/confirm'
import './clock/clock'
import './overflowmenu/overflowmenu'
import './switch/switch'
import './slider/slider'
@ -266,7 +267,14 @@ export class PanelRoot extends LitElement {
href="#icon"
></star-li>
</star-ul>
<star-li
type=${LiType.ICON_LABEL}
label="时钟"
icon="alarm"
iconcolor="green"
href="#clock"
></star-li>
<hr />
<star-ul type=${UlType.BASE}>
<star-li
type=${LiType.ONLY_EDIT}