diff --git a/src/components/button/button-styles.ts b/src/components/button/button-styles.ts index 959dc23..20e80d4 100644 --- a/src/components/button/button-styles.ts +++ b/src/components/button/button-styles.ts @@ -13,7 +13,6 @@ export const sharedStyles: CSSResult = css` white-space: nowrap; cursor: pointer; background: #fff; - border: 1px solid #dcdfe6; color: #606266; -webkit-appearance: none; text-align: center; @@ -26,9 +25,9 @@ export const sharedStyles: CSSResult = css` -webkit-user-select: none; -ms-user-select: none; font-size: 14px; - border-radius: 18px; - border-style: solid; padding: 12px 23px 14px 23px; + border: none; + border-radius: 18px; } [size='small'] { @@ -59,57 +58,97 @@ export const sharedStyles: CSSResult = css` padding: 0px 22px 2px 22px; } - [variant='account']{ + [variant='accent'] { background-color: #0469e3; color: rgb(255, 255, 255); } - [variant='primary']{ - background-color: #ebebeb; - color: rgb(29, 29, 29); - line-height: 18.2px; - text-align: center; - text-decoration: rgb(235, 235, 235); - text-decoration-color: rgb(235, 235, 235); + [variant='accent']:hover { + background-color: rgb(1, 91, 199); + box-shadow: none; } - [variant='secondary']{ - background-color: #3f3f3f; + [variant='primary'] { + background-color: rgb(34, 34, 34); color: rgb(235, 235, 235); } - [variant='negative']{ + [variant='primary']:hover { + background-color: rgb(0, 0, 0); + box-shadow: none; + color: rgb(255, 255, 255); + } + + [variant='secondary'] { + background-color: rgb(230, 230, 230); + color: rgb(34, 34, 34); + } + + [variant='secondary']:hover { + background-color: rgb(213, 213, 213); + box-shadow: none; + color: rgb(0, 0, 0); + } + + [variant='negative'] { + background-color: rgb(179, 2, 2); color: rgb(235, 235, 235); border: 1px solid #f56c6c; - background-color: rgb(187, 2, 2); } - [variant='black']{ + [variant='negative']:hover { + background-color: rgb(162, 1, 1); + color: rgb(235, 235, 235); + border: 1px solid #f56c6c; + } + + [variant='black'] { color: rgb(235, 235, 235); background-color: #000000; } - [variant='white']{ + [variant='white'] { background-color: rgb(255, 255, 255); color: rgb(235, 235, 235); } - [treatment='fill'][variant="primary"]{ - box-shadow: none; - background-color: rgb(255, 255, 255); - color: rgb(235, 235, 235); - } - - [treatment='outline'][variant="primary"]{ - background-color: rgb(84, 84, 84); - color: rgb(235, 235, 235); - } - - [disabled='true']{ + [disabled] { + background-color: rgb(230, 230, 230); cursor: default; - background-color: rgb(63, 63, 63); - color: #909090; - text-decoration: rgb(235, 235, 235); - text-decoration-color: rgb(235, 235, 235); + pointer-events: none; + } + + [treatment='fill'][variant="primary"] { + color: rgb(255, 255, 255); + } + + [treatment='fill'][variant="primary"]:hover { + background-color: rgb(0, 0, 0); + } + + [treatment='outline'][variant="primary"] { + background-color: rgba(0, 0, 0, 0); + border-style: solid; + color: rgb(34, 34, 34); + } + + [treatment='outline'][variant="primary"]:hover { + background-color: rgb(213, 213, 213); + border-style: solid; + color: rgb(0, 0, 0); + } + + button.hasicon::before { + font-size: 16px; + min-height: 32px; + min-width: 72px; + font-family: 'gaia-icons'; + text-align: left; + content: attr(data-icon); + padding-inline-end: var(--li-right-padding); + } + + span.label { + text-align: left; } ` diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 0c601f9..9087006 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -35,26 +35,59 @@ export class StarButton extends LitElement { public static override get styles(): CSSResultArray { return [sharedStyles] } - @property({ type: ButtonType }) type = '' - @property({ type: ButtonVariants }) variant = '' - @property({ type: ButtonSize }) size = '' + @property({ type: ButtonType }) type = 'base' + @property({ type: ButtonVariants }) variant = 'accent' + @property({ type: ButtonSize }) size = 'medium' @property({ type: String }) label = '' - @property({ type: String }) disabled = '' + @property({ type: Boolean }) disabled = false @property({ type: String }) treatment = '' + @property({ type: String }) icon = '' + @property({ type: String }) iconcolor = '' getBaseButton(): HTMLTemplateResult { + const colorstyle = this.iconcolor + ? html` + + ` + : nothing if (this.hasAttribute("disabled")) { - return html` - - ` + if (this.hasAttribute("icon")) { + return html` + + ` + } else { + return html` + + ` + } } else { - return html` - - ` + if (this.hasAttribute("icon")) { + return html` + + ` + } else { + return html` + + ` + } } } diff --git a/src/test/panels/button/button.ts b/src/test/panels/button/button.ts index 1e83e4d..65c88a8 100644 --- a/src/test/panels/button/button.ts +++ b/src/test/panels/button/button.ts @@ -1,76 +1,57 @@ import { html, LitElement, CSSResultArray } from 'lit' -import { customElement, property, state } from 'lit/decorators.js' +import { customElement, eventOptions } from 'lit/decorators.js' import { starbuttonStyles } from '../starbutton-styles' -import { ButtonSize } from '../../../components/button/button' -import {UlType} from '../../../components/ul/ul' +import { StarButton } from '../../../components/button/button' @customElement('panel-button') export class PanelButton extends LitElement { - @property() - foo = '' - - @state() - bar = '' + @eventOptions({ passive: false }) + handleEvent(evt: Event) { + switch (evt.type) { + case 'click': + if ((evt.target as StarButton).label === 'Click') { + alert('这是一次点击事件测试') + } + break + } + } render() { return html` - - +
+

按钮类型属性展示

+ - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
+

按钮大小属性展示

+ + + + +
+
+

按钮填充状态展示

+ + +
+
+

按钮禁用状态展示

+ + +
+
+

按钮点击事件展示

+ +
+
+

图标按钮展示

+ +
` }