TASK #105401 StarWebComponent开发-button-1

2022-08-24 15:38:23 +08:00 · 2022-08-24 15:38:23 +08:00 · df71fb21c2
parent 1c04e9205b
commit df71fb21c2
5 changed files with 155 additions and 36 deletions
--- a/src/components/button/button-styles.ts
+++ b/src/components/button/button-styles.ts
@ -8,57 +8,55 @@ export const sharedStyles: CSSResult = css`
  }

  button {
-    color: blue;
-    padding: 0;
-    width: 100%;
-    border: unset;
-    display: block;
-    font-size: 16px;
-    text-align: left;
-    background: unset;
-    padding-inline-start: var(--li-left-padding);
-    min-height: var(--li-base-height);
-    line-height: var(--li-base-height);
+    display: inline-block;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    color: #606266;
+    -webkit-appearance: none;
+    text-align: center;
+    box-sizing: border-box;
+    outline: none;
+    margin: 20px;
+    transition: .1s;
+    font-weight: 500;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    font-size: 14px;
+    border-radius: 18px;
+    border-style: solid;
+    padding: 12px 23px 14px 23px;
  }

  [size='small'] {
    font-size: 12px;
    min-height: 24px;
    min-width: 54px;
-    padding-bottom: 0px;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 0px;
+    padding: 0px 10px 2px 10px;
  }

  [size='medium'] {
    font-size: 14px;
    min-height: 32px;
    min-width: 72px;
-    padding-bottom: 0px;
-    padding-left: 14px;
-    padding-right: 14px;
-    padding-top: 0px;
+    padding: 0px 14px 2px 14px;
  }

  [size='large'] {
    font-size: 16px;
    min-height: 40px;
    min-width: 90px;
-    padding-bottom: 0px;
-    padding-left: 18px;
-    padding-right: 18px;
-    padding-top: 0px;
+    padding: 0px 18px 2px 18px;
  }

  [size='extralarge'] {
    font-size: 18px;
    min-height: 48px;
    min-width: 100px;
-    padding-bottom: 0px;
-    padding-left: 22px;
-    padding-right: 22px;
-    padding-top: 0px;
+    padding: 0px 22px 2px 22px;
  }

  [variant='account']{
@ -67,27 +65,33 @@ export const sharedStyles: CSSResult = css`
  }

  [variant='primary']{
-    background-color: rgb(235, 235, 235);
+    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='secondary']{
-    background-color: #3f3f3f
+    background-color: #3f3f3f;
+    color: rgb(235, 235, 235);
  }

  [variant='negative']{
-    color: #fff;
+    color: rgb(235, 235, 235);
    border: 1px solid #f56c6c;
-    background-color: #f56c6c;
-  }
-
-  [variant='white']{
-    background-color: #ffffff
+    background-color: rgb(187, 2, 2);
  }

  [variant='black']{
-    background-color: #000000
+    color: rgb(235, 235, 235);
+    background-color: #000000;
+  }
+
+  [variant='white']{
+    background-color: rgb(255, 255, 255);
+    color: rgb(235, 235, 235);
  }

  [treatment='fill'][variant="primary"]{
--- a/src/index.ts
+++ b/src/index.ts
@ -3,6 +3,7 @@ import {customElement, query, state} from 'lit/decorators.js'
 import './components/ul/ul'
 import './components/li/li'
 import './components/section/section'
+import './components/button/button'
 import {StarAnimateSection} from './components/section/section'

 import './test/panels/root'
--- a/src/test/panels/button/button.ts
+++ b/src/test/panels/button/button.ts
@ -0,0 +1,88 @@
+import { html, LitElement, CSSResultArray } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { starbuttonStyles } from '../starbutton-styles'
+import { ButtonSize } from '../../../components/button/button'
+import {UlType} from '../../../components/ul/ul'
+import {LiType} from '../../../components/li/li'
+
+@customElement('panel-button')
+export class PanelButton extends LitElement {
+  @property()
+  foo = ''
+
+  @state()
+  bar = ''
+
+  render() {
+    return html`
+    <star-ul
+      type=${UlType.HEADER_FOOTER}
+      title="Variants"
+      text="Variants Test"
+    >
+      <star-button type="base" variant="account" label="为啥不居中"></star-button>
+      <star-button type="base" variant="primary" label="primary"></star-button>
+      <star-button type="base" variant="secondary" label="secondary"></star-button>
+      <star-button type="base" variant="negative" label="negative"></star-button>
+      <star-button type="base" variant="black" label="black"></star-button>
+      <star-button type="base" variant="white" label="white"></star-button>
+    </star-ul>
+
+    <star-ul
+      type=${UlType.HEADER_FOOTER}
+      title="Size"
+      text="Size Test"
+    >
+    <star-button type="base" variant="account" label="account-small" size="small"></star-button>
+      <star-button type="base" variant="primary" label="primary-medium" size="medium"></star-button>
+      <star-button type="base" variant="black" label="black-extralarge" size=${ButtonSize.EXTRALARGE}></star-button>
+      <star-button type="base" variant="white" label="white-large" size="large"></star-button>
+    </star-ul>
+
+    <star-ul
+      type=${UlType.HEADER_FOOTER}
+      title="Treament"
+      text="Treament Test"
+    >
+      <star-button type="base" treatment="fill" variant="primary" label="primary、fill"></star-button>
+      <star-button type="base" treatment="outline" variant="primary" label="primary、outline"></star-button>
+    </star-ul>
+
+    <star-ul
+      type=${UlType.HEADER_FOOTER}
+      title="State"
+      text="State Test"
+    >
+      <star-button type="base" variant="primary" label="primary、fill"></star-button>
+      <star-button type="base" variant="primary" label="primary、outline" disabled="true"></star-button>
+    </star-ul>
+
+    <star-ul
+      type=${UlType.HEADER_FOOTER}
+      title="Click"
+      text="Click Test"
+    >
+    <star-button @click=${this} type="base" variant="account" label="Click测试"></star-button>
+    </star-ul>
+
+    <star-ul
+      type=${UlType.HEADER_FOOTER}
+      title="Content"
+      text="Content Test"
+    >
+    <star-button type="base" variant="account" label="Icon测试"><img slot="icon" src="2g"></star-button>
+    </star-ul>
+    `
+  }
+
+  public static override get styles(): CSSResultArray {
+    return [starbuttonStyles]
+  }
+
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-button': PanelButton
+  }
+}
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@ -6,6 +6,7 @@ import {sharedStyles} from './shared-styles'
 import './about/about'
 import './icon/icon'
 import './general/general'
+import './button/button'

 type SEID = String

@ -95,6 +96,14 @@ export class PanelRoot extends LitElement {
        href="#general"
      ></star-li>
      <hr />
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="查看所有按钮"
+        icon="play-circle"
+        iconcolor="red"
+        href="#button"
+      ></star-li>
+      <hr />
      <star-li
        type=${LiType.ICON_LABEL}
        label="关于"
--- a/src/test/panels/starbutton-styles.ts
+++ b/src/test/panels/starbutton-styles.ts
@ -0,0 +1,17 @@
+import { css, CSSResult } from 'lit'
+
+export const starbuttonStyles: CSSResult = css`
+  div {
+      padding: 10px 40px;
+    }
+
+    html {
+      scrollbar-width: none;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      background: #f0f0f0;
+    }
+`