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

Merge remote-tracking branch 'origin/feature-button-groups' into feature-improve-dialog

This commit is contained in:
lvxiangcong 2022-11-11 14:08:11 +08:00
parent 3e38246d8d d0daeef277
commit 5744969b90
10 changed files with 284 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/base/auto-px-style.ts
View File

@ -3,6 +3,7 @@ import {css, CSSResult} from 'lit'
export const autoPxStyle: CSSResult = css`
:root {
--hostDevicePixelRatio: var(--devicePixelRatio, 1);
--auto-1px: calc(1px / var(--hostDevicePixelRatio));
--auto-6px: calc(6px / var(--hostDevicePixelRatio));
--auto-9px: calc(9px / var(--hostDevicePixelRatio));
--auto-10px: calc(10px / var(--hostDevicePixelRatio));
@ -21,6 +22,7 @@ export const autoPxStyle: CSSResult = css`
--auto-34px: calc(34px / var(--hostDevicePixelRatio));
--auto-36px: calc(36px / var(--hostDevicePixelRatio));
--auto-37_33px: calc(37.33px / var(--hostDevicePixelRatio));
--auto-38px: calc(38px / var(--hostDevicePixelRatio));
--auto-38_4px: calc(38.4px / var(--hostDevicePixelRatio));
--auto-40px: calc(40px / var(--hostDevicePixelRatio));
--auto-44_8px: calc(44.8px / var(--hostDevicePixelRatio));

47
src/components/button-group/README.md Normal file
View File

@ -0,0 +1,47 @@
# star-button-group
更新日期：2022.11.11
组件说明：本按钮组件为星光组件-基础组件的一部分，目前本组件已按照设计稿完成结构设计及组件封装。
<center><b>star-button-group组件拥有的属性</b></center>
| 属性(Property) | 类型 | 默认类型 | 描述 |
| -------------- | ------- | -------- | -------------------------- |
| vertical | Boolean | false | 用于指示是否显示垂直按钮组 |
| split | Boolean | false | 用于指示是否显示分隔符 |
<center><b>star-button-group组件支持的插槽</b></center>
| 插槽名 | 描述 |
| ------ | ------------------------------ |
| slot | 按钮插槽，用于插入 star-button |
## 作用
button-group 将 100% 填充父容器所给的空间，再均匀平铺\<slot\>中的所有按钮，可以以水平或垂直的方式排列。
## 如何使用
```html
<star-button-group>
<star-button type="text" variant="default" label="取消"></star-button>
<star-button type="text" variant="primary" label="确定"></star-button>
</star-button-group>
<star-button-group vertical>
<star-button type="text" variant="default" label="取消"></star-button>
<star-button type="text" variant="primary" label="确定"></star-button>
</star-button-group>
<star-button-group split>
<star-button type="text" variant="default" label="取消"></star-button>
<star-button type="text" variant="primary" label="确定"></star-button>
</star-button-group>
```
## 注意
按钮组中可放置一个到多个按钮，按钮组所需的的最小宽度等于每个单个按钮的最小值的叠加。
split 属性不可与 vertical 属性同时使用。

45
src/components/button-group/button-group.css.ts
View File

@ -1,12 +1,55 @@
import {css} from 'lit'
export default css`
:host {
display: block;
width: 100%;
border-radius: inherit;
}
div {
position: relative;
width: 100%;
display: inline-flex;
flex-direction: row;
}
div[data-vertical] {
div[vertical] {
flex-direction: column;
}
div[split]::before {
content: '';
position: absolute;
display: block;
color: rgba(0, 0, 0, 0.09);
border-left: var(--auto-1px) solid rgba(0, 0, 0, 0.09);
height: var(--auto-38px);
left: calc(50% - var(--auto-1px) / 2);
top: calc(50% - var(--auto-38px) / 2);
}
/* 倒角继承 */
slot,
div {
border-radius: inherit;
}
::slotted(:first-child) {
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
}
::slotted(:last-child) {
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
}
::slotted(:first-child::after) {
content: ' ';
border: 1px solid rgba(0, 0, 0, 0.09);
}
::slotted(star-button) {
flex: 1;
width: calc(100% / var(--item-length, 1));
}
`

30
src/components/button-group/button-group.ts
View File

@ -17,9 +17,12 @@ export class StarButtonGroup extends LitElement {
// 默认为水平
@property({type: Boolean}) vertical = false
// 分割线默认为关闭
@property({type: Boolean}) split = false
renderButtonGroup(): TemplateResult {
return html`
<div ?data-vertical=${this.vertical}>
<div ?vertical=${this.vertical} ?split=${this.split}>
<slot></slot>
</div>
`
@ -28,6 +31,31 @@ export class StarButtonGroup extends LitElement {
render() {
return this.renderButtonGroup()
}
/**
* 垂直模式时，不设置 --item-length，使用后备值1，即宽为 100%
*/
updateCssValue() {
const buttonsLength = this.querySelectorAll('star-button').length
if (this.vertical) {
this.style.setProperty('--item-length', '1')
} else {
this.style.setProperty('--item-length', String(buttonsLength))
}
}
attributeChangedCallback(name: string, _old: string, value: string) {
super.attributeChangedCallback(name, _old, value)
if (name === 'vertical' || name === 'split') {
this.updateCssValue()
}
}
constructor() {
super()
this.updateComplete.then(this.updateCssValue.bind(this))
}
}
declare global {

2
src/components/button/README.md
View File

@ -1,6 +1,6 @@
# star-button
更新日期：2022.10.27
更新日期：2022.11.11
组件说明：本按钮组件为星光组件-基础组件的一部分，目前本组件已按照设计稿完成结构设计及组件封装。

30
src/components/button/button.css.ts
View File

@ -21,8 +21,10 @@ export default [
/* main element: button */
/* base style */
button {
width: inherit;
height: inherit;
width: 100%;
height: 100%;
min-width: inherit;
min-height: inherit;
text-align: center;
color: inherit;
font-size: inherit;
@ -141,8 +143,6 @@ export default [
:host([type='pure'][label]) button {
padding-inline-start: var(--auto-32px);
padding-inline-end: var(--auto-32px);
margin: auto;
width: auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -164,7 +164,8 @@ export default [
:host([type='normal'][size='small']) {
min-width: var(--auto-200px);
max-width: var(--auto-520px);
height: var(--auto-64px);
min-height: var(--auto-64px);
max-height: var(--auto-64px);
color: var(--color-btn-normal-default);
font-size: var(--auto-28px);
border-radius: var(--auto-34px);
@ -172,13 +173,15 @@ export default [
}
:host([type='normal'][size='middle']) {
min-width: var(--auto-260px);
height: var(--auto-80px);
min-height: var(--auto-80px);
max-height: var(--auto-80px);
font-size: var(--auto-32px);
border-radius: var(--auto-40px);
}
:host([type='normal'][size='large']) {
min-width: var(--auto-320px);
height: var(--auto-96px);
min-height: var(--auto-96px);
max-height: var(--auto-96px);
font-size: var(--auto-34px);
border-radius: var(--auto-48px);
}
@ -206,17 +209,20 @@ export default [
:host([type='pure'][label]) {
min-width: var(--auto-208px);
max-width: var(--auto-520px);
height: var(--auto-64px);
min-height: var(--auto-64px);
max-height: var(--auto-64px);
border-radius: var(--auto-34px);
}
:host([type='pure'][label][size='middle']) {
min-width: var(--auto-260px);
height: var(--auto-80px);
min-height: var(--auto-80px);
max-height: var(--auto-80px);
border-radius: var(--auto-40px);
}
:host([type='pure'][label][size='large']) {
min-width: var(--auto-320px);
height: var(--auto-96px);
min-height: var(--auto-96px);
max-height: var(--auto-96px);
border-radius: var(--auto-48px);
}
:host([type='pure'][variant='establish']) {
@ -259,9 +265,9 @@ export default [
/* text 类型按钮 */
:host([type='text']) {
max-width: var(--auto-520px);
font-size: var(--auto-28px);
height: var(--auto-112px);
min-height: var(--auto-112px);
max-height: var(--auto-112px);
}
:host([type='text']) button {
padding-inline-start: var(--auto-56px);

21
src/components/ul/ul.css.ts
View File

@ -43,7 +43,26 @@ export default css`
max-width: 88vw;
background: var(--bg-ul, var(--pure-white));
box-shadow: rgb(64 60 67 / 16%) 1px 1px 5px 1px;
border-radius: inherit; /* 外部传入 */
border-radius: inherit;
}
/**
* 继承传递外部传入的border-radius倒角
*/
ul,
slot {
border-radius: inherit;
}
::slotted(*) {
border-radius: unset;
}
::slotted(:first-child) {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
::slotted(:last-child) {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
header,

111
src/test/panels/button/button-group.ts Normal file
View File

@ -0,0 +1,111 @@
import {html, css, CSSResultArray, LitElement} from 'lit'
import {customElement} from 'lit/decorators.js'
import '../../../components/button-group/button-group'
@customElement('panel-button-group')
export class PanelButtonGroup extends LitElement {
render() {
return html`
<star-ul type="onlyheader" id="dialog" title="水平" type="base">
<star-button-group>
<star-button type="text" variant="default" label="取消"></star-button>
<star-button type="text" variant="primary" label="确定"></star-button>
</star-button-group>
</star-ul>
<star-ul
type="onlyheader"
id="dialog"
title="单行弧度继承"
type="base"
style="border-radius: 25px !important;"
>
<star-button-group>
<star-button type="text" variant="default" label="取消"></star-button>
<star-button type="text" variant="primary" label="确定"></star-button>
</star-button-group>
</star-ul>
<star-ul
type="onlyheader"
id="dialog"
title="多行弧度继承"
type="base"
style="border-radius: 25px !important;"
>
<star-button-group>
<star-button
type="text"
variant="default"
label="空白的第一行按钮"
></star-button>
</star-button-group>
<star-button-group>
<star-button
type="text"
variant="default"
label="空白的第二行按钮"
></star-button>
</star-button-group>
<star-button-group>
<star-button type="text" variant="default" label="取消"></star-button>
<star-button type="text" variant="primary" label="确定"></star-button>
</star-button-group>
</star-ul>
<star-ul type="onlyheader" id="dialog" title="垂直" type="base">
<star-button-group vertical>
<star-button type="text" variant="default" label="取消"></star-button>
<star-button type="text" variant="primary" label="确定"></star-button>
</star-button-group>
</star-ul>
<star-ul type="onlyheader" id="dialog" title="带分隔符" type="base">
<star-button-group split>
<star-button type="text" variant="default" label="取消"></star-button>
<star-button type="text" variant="primary" label="确定"></star-button>
</star-button-group>
</star-ul>
<star-ul type="onlyheader" id="dialog" title="水平多文字" type="base">
<star-button-group>
<star-button
type="text"
variant="default"
label="取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消"
></star-button>
<star-button
type="text"
variant="primary"
label="确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定"
></star-button>
</star-button-group>
</star-ul>
<star-ul type="onlyheader" id="dialog" title="垂直多文字" type="base">
<star-button-group vertical>
<star-button
type="text"
variant="default"
label="取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消取消"
></star-button>
<star-button
type="text"
variant="primary"
label="确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定确定"
></star-button>
</star-button-group>
</star-ul>
`
}
static get styles(): CSSResultArray {
return [css``]
}
}
declare global {
interface HTMLElementTagNameMap {
'panel-button-group': PanelButtonGroup
}
}

20
src/test/panels/button/button.ts
View File

@ -326,26 +326,6 @@ export class PanelButton extends LitElement {
</star-ul>
<h3>TODO: 以下内容归至按钮组</h3>
<star-ul type="onlyheader" title="弹窗内联按钮" id="dialog" background="var(--bg-dialog)">
<star-li type="base">
<star-button type="text" variant="default" label="取消"></star-button>
<span class="split">|</span>
<star-button type="text" variant="primary" label="确定"></star-button>
</star-li>
</star-ul>
<star-ul type="base" id="dialog" background="var(--bg-dialog)">
<star-button type="text" variant="primary" label="好的"></star-button>
</star-ul>
<star-ul type="base" id="dialog" background="var(--bg-dialog)">
<star-li type="base">
<star-button type="text" variant="default" label="取消"></star-button>
<span class="split">|</span>
<star-button type="text" variant="warn" label="卸载"></star-button>
</star-li>
</star-ul>
<star-ul type="onlyheader" title="菜单" id="menu" background="var(--bg-dialog-gradient)">
<star-button type="text" variant="default" label="锁屏壁纸"></star-button>
<star-button type="text" variant="default" label="桌面壁纸"></star-button>

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

@ -12,6 +12,7 @@ import './battery/battery'
import './battery-square/battery-square'
import './blur/use-blur'
import './button/button'
import './button/button-group.ts'
import './card/card'
import './clock/clock'
import './confirm/confirm'
@ -20,10 +21,10 @@ import './container/homescreen-container'
import './control-center/control-center'
import './dialog/dialog'
import './digicipher/digicipher'
import './icon/icon'
import './gauss_canvas/gauss-blur'
import './general/general'
import './gesture/gesture'
import './icon/icon'
import './indicators/deformation-indicator'
import './indicators/home-indicator'
import './indicators/point-indicator'
@ -304,7 +305,7 @@ export class PanelRoot extends LitElement {
iconcolor="blue"
href="#battery"
></star-li>
<star-li
type=${LiType.ICON_LABEL}
label="电池"
@ -321,7 +322,7 @@ export class PanelRoot extends LitElement {
href="#animation"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="IconFont图标"
@ -393,6 +394,14 @@ export class PanelRoot extends LitElement {
iconcolor="red"
href="#button"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="StarButtonGroup-按钮组"
icon="play-circle"
iconcolor="red"
href="#button-group"
></star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="生产用弹窗">