TASK #105401 StarWebComponent开发-button-优化代码，修改样式
This commit is contained in:
yajun
parent
48ec1d0eab
commit
e1d1418c71
|
|
@ -4,41 +4,49 @@
|
|||
|
||||
## 介绍
|
||||
|
||||
star-button组件包含六种属性，分别为：
|
||||
1. variant属性：用于选择对应的按钮类型，包括accent、primary、secondary、negative、black和white，默认为accent。
|
||||
star-button属性：
|
||||
1. type：按钮类型，包括文本按钮base、图标文本按钮iconlabel和图标按钮icononly。
|
||||
|
||||
```html demo
|
||||
<star-button type="base" label="文本按钮"></star-button>
|
||||
<star-button type="iconlabel" label="图标文本按钮"></star-button>
|
||||
<star-button type="icononly" label="图标按钮"></star-button>
|
||||
```
|
||||
|
||||
2. variant：按钮样式，包括accent、primary、secondary、negative、black和white，默认为accent。
|
||||
|
||||
```html demo
|
||||
<star-button type="base" variant="accent" label="accent"></star-button>
|
||||
<star-button type="base" variant="primary" label="primary"></star-button>
|
||||
```
|
||||
|
||||
2. size属性：控制按钮大小，包括small、medium、large和extralarge四种，默认为medium。
|
||||
3. size：控制按钮大小，包括small、medium、large和extralarge四种，默认为medium。
|
||||
|
||||
```html demo
|
||||
<star-button type="base" variant="accent" label="accent" size="small"></star-button>
|
||||
<star-button type="base" variant="primary" label="primary" size="large"></star-button>
|
||||
```
|
||||
|
||||
3. label属性：显示按钮名，如省略则显示为“默认”。
|
||||
4. label：显示按钮名，如省略则显示为“默认”。
|
||||
|
||||
```html demo
|
||||
<star-button type="base" variant="accent" label="按钮名"></star-button>
|
||||
```
|
||||
|
||||
4. disabled属性：控制按钮状态，默认为：flase。
|
||||
5. disabled：控制按钮禁用状态，默认为：false。
|
||||
|
||||
```html demo
|
||||
<star-button type="base" variant="accent" label="禁用" disabled></star-button>
|
||||
```
|
||||
|
||||
5. treatment属性：控制按钮填充状态，包括fill和outline，默认为：fill。
|
||||
6. treatment：控制按钮填充状态，包括fill和outline，默认为：fill。
|
||||
|
||||
```html demo
|
||||
<star-button type="base" variant="accent" label="fill" treatment="fill"></star-button>
|
||||
<star-button type="base" variant="accent" label="outline" treatment="outline"></star-button>
|
||||
```
|
||||
|
||||
6. icon和iconcolor属性：控制图标样式和其颜色。
|
||||
7. icon和iconcolor：控制图标样式和其颜色。
|
||||
|
||||
```html demo
|
||||
<star-button type="base" variant="accent" label="图标按钮" icon="alarm" iconcolor="white"></star-button>
|
||||
|
|
|
|||
|
|
@ -1,147 +1,161 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
|
||||
export const sharedStyles: CSSResult = css`
|
||||
.test {
|
||||
color: darkred;
|
||||
font-weight: bold;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
line-height: 18.2px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
color: #606266;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 20px;
|
||||
transition: 0.1s;
|
||||
font-weight: 500;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
font-size: 14px;
|
||||
padding: 12px 23px 14px 23px;
|
||||
border: none;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
[size='small'] {
|
||||
.small {
|
||||
font-size: 12px;
|
||||
height: 24px;
|
||||
line-height: 15.6px;
|
||||
min-height: 24px;
|
||||
min-width: 54px;
|
||||
padding: 0px 10px 0px 10px;
|
||||
}
|
||||
|
||||
[size='medium'] {
|
||||
.medium {
|
||||
font-size: 14px;
|
||||
height: 32.2px;
|
||||
line-height: 18.2px;
|
||||
min-height: 32px;
|
||||
min-width: 72px;
|
||||
padding: 0px 14px 0px 14px;
|
||||
}
|
||||
|
||||
[size='large'] {
|
||||
.large {
|
||||
font-size: 16px;
|
||||
height: 40.8px;
|
||||
line-height: 20.8px;
|
||||
min-height: 40px;
|
||||
min-width: 90px;
|
||||
padding: 0px 18px 0px 18px;
|
||||
}
|
||||
|
||||
[size='extralarge'] {
|
||||
.extralarge {
|
||||
font-size: 18px;
|
||||
height: 48.4px;
|
||||
line-height: 23.4px;
|
||||
min-height: 48px;
|
||||
min-width: 100px;
|
||||
padding: 0px 22px 0px 22px;
|
||||
}
|
||||
|
||||
[variant='accent'] {
|
||||
.accent {
|
||||
background-color: #0469e3;
|
||||
color: rgb(255, 255, 255);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
[variant='accent']:hover {
|
||||
background-color: rgb(1, 91, 199);
|
||||
.accent:hover {
|
||||
background-color: #015BC7;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[variant='primary'] {
|
||||
background-color: rgb(34, 34, 34);
|
||||
color: rgb(235, 235, 235);
|
||||
.primary {
|
||||
background-color: #222222;
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
[variant='primary']:hover {
|
||||
background-color: rgb(0, 0, 0);
|
||||
box-shadow: none;
|
||||
color: rgb(255, 255, 255);
|
||||
.primary:hover {
|
||||
background-color: #000000;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
[variant='secondary'] {
|
||||
background-color: rgb(230, 230, 230);
|
||||
color: rgb(34, 34, 34);
|
||||
.secondary {
|
||||
background-color: #E6E6E6;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
[variant='secondary']:hover {
|
||||
background-color: rgb(213, 213, 213);
|
||||
box-shadow: none;
|
||||
color: rgb(0, 0, 0);
|
||||
.secondary:hover {
|
||||
background-color: #D5D5D5;
|
||||
color: #d42222;
|
||||
transition-property: color;
|
||||
transition-duration: 2s;
|
||||
transition-timing-function: linear;
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
[variant='negative'] {
|
||||
background-color: rgb(179, 2, 2);
|
||||
color: rgb(235, 235, 235);
|
||||
.negative {
|
||||
background-color: #B30202;
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
[variant='negative']:hover {
|
||||
background-color: rgb(162, 1, 1);
|
||||
color: rgb(235, 235, 235);
|
||||
.negative:hover {
|
||||
background-color: #A20101;
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
[variant='black'] {
|
||||
color: rgb(34, 34, 34);
|
||||
background-color: rgb(0, 0, 0);
|
||||
.black {
|
||||
color: #222222;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
[variant='white'] {
|
||||
background-color: rgb(255, 255, 255);
|
||||
color: rgb(235, 235, 235);
|
||||
.white {
|
||||
background-color: #FFFFFF;
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
[disabled] {
|
||||
background-color: rgb(230, 230, 230);
|
||||
.disabled {
|
||||
background-color: #E6E6E6;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[treatment='fill'][variant='primary'] {
|
||||
color: rgb(255, 255, 255);
|
||||
.fill.primary {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
[treatment='fill'][variant='primary']:hover {
|
||||
background-color: rgb(0, 0, 0);
|
||||
.fill.primary:hover {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
[treatment='outline'][variant='primary'] {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
.outline.primary {
|
||||
background-color: #f0f0f0;
|
||||
border-style: solid;
|
||||
color: rgb(34, 34, 34);
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
[treatment='outline'][variant='primary']:hover {
|
||||
background-color: rgb(213, 213, 213);
|
||||
.outline.primary:hover {
|
||||
background-color: #D5D5D5;
|
||||
border-style: solid;
|
||||
color: rgb(0, 0, 0);
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button.hasicon::before {
|
||||
font-size: 16px;
|
||||
min-height: 32px;
|
||||
min-width: 72px;
|
||||
font-family: 'gaia-icons';
|
||||
text-align: center;
|
||||
content: attr(data-icon);
|
||||
text-align: center;
|
||||
padding-inline-end: 5px; /**定义元素逻辑块末尾填充 */
|
||||
}
|
||||
|
||||
span.label {
|
||||
button.icononly::before {
|
||||
font-size: 16px;
|
||||
font-family: 'gaia-icons';
|
||||
content: attr(data-icon);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button.icononly {
|
||||
border-radius: 50%;
|
||||
height: auto;
|
||||
line-height: auto;
|
||||
min-height: 32.2px;
|
||||
min-width: 32.2px;
|
||||
padding: 0px;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ import {sharedStyles} from './button-styles'
|
|||
|
||||
export enum ButtonType {
|
||||
BASE = 'base',
|
||||
ICONONLY = 'icononly',
|
||||
ICONLABEL = 'iconlabel',
|
||||
}
|
||||
|
||||
export enum ButtonSize {
|
||||
|
|
@ -36,13 +38,32 @@ export class StarButton extends LitElement {
|
|||
@property({type: String}) type = 'base'
|
||||
@property({type: String}) variant = 'accent'
|
||||
@property({type: String}) size = 'medium'
|
||||
@property({type: String}) label = ''
|
||||
@property({type: String}) label = '默认'
|
||||
@property({type: Boolean}) disabled = false
|
||||
@property({type: String}) treatment = ''
|
||||
@property({type: String}) icon = ''
|
||||
@property({type: String}) icon = 'bug'
|
||||
@property({type: String}) iconcolor = ''
|
||||
|
||||
getBaseButton(): HTMLTemplateResult {
|
||||
if (this.hasAttribute('disabled')) {
|
||||
return html`
|
||||
<button
|
||||
class="disabled ${this.variant} ${this.size} ${this.treatment}"
|
||||
size=${this.size}
|
||||
>
|
||||
${this.label}
|
||||
</button>
|
||||
`
|
||||
} else {
|
||||
return html`
|
||||
<button class="${this.variant} ${this.size} ${this.treatment}">
|
||||
${this.label}
|
||||
</button>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
getIconLabelButton(): HTMLTemplateResult {
|
||||
const colorstyle = this.iconcolor
|
||||
? html`
|
||||
<style>
|
||||
|
|
@ -53,15 +74,11 @@ export class StarButton extends LitElement {
|
|||
`
|
||||
: nothing
|
||||
if (this.hasAttribute('disabled')) {
|
||||
if (this.hasAttribute('icon')) {
|
||||
return html`
|
||||
<button
|
||||
treatment=${this.treatment}
|
||||
variant=${this.variant}
|
||||
size=${this.size}
|
||||
class="disabled hasicon ${this.variant} ${this.size} ${this
|
||||
.treatment}"
|
||||
data-icon=${this.icon}
|
||||
class="hasicon"
|
||||
disabled
|
||||
>
|
||||
${colorstyle} ${this.label}
|
||||
</button>
|
||||
|
|
@ -69,46 +86,55 @@ export class StarButton extends LitElement {
|
|||
} else {
|
||||
return html`
|
||||
<button
|
||||
treatment=${this.treatment}
|
||||
variant=${this.variant}
|
||||
size=${this.size}
|
||||
disabled
|
||||
>
|
||||
${this.label}
|
||||
</button>
|
||||
`
|
||||
}
|
||||
} else {
|
||||
if (this.hasAttribute('icon')) {
|
||||
return html`
|
||||
<button
|
||||
treatment=${this.treatment}
|
||||
variant=${this.variant}
|
||||
size=${this.size}
|
||||
class="hasicon ${this.variant} ${this.size} ${this.treatment}"
|
||||
data-icon=${this.icon}
|
||||
class="hasicon"
|
||||
>
|
||||
${colorstyle} ${this.label}
|
||||
</button>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
getIconOnlyButton(): HTMLTemplateResult {
|
||||
const colorstyle = this.iconcolor
|
||||
? html`
|
||||
<style>
|
||||
button::before {
|
||||
color: ${this.iconcolor} !important;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
: nothing
|
||||
if (this.hasAttribute('disabled')) {
|
||||
return html`
|
||||
<button
|
||||
class="icononly disabled ${this.variant} ${this.size} ${this
|
||||
.treatment}"
|
||||
data-icon=${this.icon}
|
||||
>
|
||||
${colorstyle}
|
||||
</button>
|
||||
`
|
||||
} else {
|
||||
return html`
|
||||
<button
|
||||
treatment=${this.treatment}
|
||||
variant=${this.variant}
|
||||
size=${this.size}
|
||||
class="icononly ${this.variant} ${this.size} ${this.treatment}"
|
||||
data-icon=${this.icon}
|
||||
>
|
||||
${this.label}
|
||||
${colorstyle}
|
||||
</button>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
switch (this.type) {
|
||||
case ButtonType.BASE:
|
||||
return this.getBaseButton()
|
||||
case ButtonType.ICONONLY:
|
||||
return this.getIconOnlyButton()
|
||||
case ButtonType.ICONLABEL:
|
||||
return this.getIconLabelButton()
|
||||
default:
|
||||
console.error('unhanled 【star-button】 type')
|
||||
return nothing
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ export class PanelButton extends LitElement {
|
|||
return html`
|
||||
<div>
|
||||
<h4>按钮类型属性展示</h4>
|
||||
<star-button></star-button>
|
||||
<star-button type="base" variant="accent" label="accent"></star-button>
|
||||
<star-button
|
||||
type="base"
|
||||
|
|
@ -93,46 +94,18 @@ export class PanelButton extends LitElement {
|
|||
<div>
|
||||
<h4>图标按钮展示</h4>
|
||||
<star-button
|
||||
type="base"
|
||||
type="iconlabel"
|
||||
variant="accent"
|
||||
label="图标按钮"
|
||||
label="Icon+Label"
|
||||
icon="alarm"
|
||||
iconcolor="white"
|
||||
></star-button>
|
||||
<star-button
|
||||
type="base"
|
||||
variant="primary"
|
||||
label="图标按钮"
|
||||
icon="bug"
|
||||
iconcolor="white"
|
||||
></star-button>
|
||||
<star-button
|
||||
type="base"
|
||||
variant="secondary"
|
||||
label="图标按钮"
|
||||
icon="help"
|
||||
iconcolor="#222222"
|
||||
></star-button>
|
||||
<star-button
|
||||
type="base"
|
||||
variant="negative"
|
||||
label="图标按钮"
|
||||
icon="airplane"
|
||||
iconcolor="white"
|
||||
></star-button>
|
||||
<star-button
|
||||
type="base"
|
||||
variant="black"
|
||||
label="图标按钮"
|
||||
icon="privacy"
|
||||
iconcolor="#222222"
|
||||
></star-button>
|
||||
<star-button
|
||||
type="base"
|
||||
variant="white"
|
||||
label="图标按钮"
|
||||
type="icononly"
|
||||
variant="accent"
|
||||
label="IconOnly"
|
||||
icon="delete"
|
||||
iconcolor="#EBEBEB"
|
||||
iconcolor="#f9f9f9"
|
||||
></star-button>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -145,7 +118,7 @@ export class PanelButton extends LitElement {
|
|||
disabled
|
||||
></star-button>
|
||||
<star-button
|
||||
type="base"
|
||||
type="iconlabel"
|
||||
variant="accent"
|
||||
label="Icon禁用"
|
||||
icon="alarm"
|
||||
|
|
|
|||
Loading…
Reference in New Issue