Merge branch 'master' into container_exchange_strategy
This commit is contained in:
luojiahao
commit
d938f4657b
|
|
@ -4,6 +4,7 @@ export const autoPxStyle: CSSResult = css`
|
|||
:root {
|
||||
--hostDevicePixelRatio: var(--devicePixelRatio, 1);
|
||||
--auto-6px: calc(6px / var(--hostDevicePixelRatio));
|
||||
--auto-9px: calc(9px / var(--hostDevicePixelRatio));
|
||||
--auto-10px: calc(10px / var(--hostDevicePixelRatio));
|
||||
--auto-12px: calc(12px / var(--hostDevicePixelRatio));
|
||||
--auto-14px: calc(14px / var(--hostDevicePixelRatio));
|
||||
|
|
|
|||
|
|
@ -231,7 +231,7 @@ const baseStyle = css`
|
|||
--base-slider-black: #2e2e2e;
|
||||
--base-normal-bgc: var(--base-white);
|
||||
/* 底色/base黑 */
|
||||
--base-black: #110101; //////提交时更新
|
||||
--base-black: #1a1a1a;
|
||||
/****************************主题色汇总*************************************/
|
||||
/* /主题色/紫 */
|
||||
--theme-purple: #8c66ff;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
| type | 'normal'，'pure'，'text'，'icon'，'ghost'，'specail' |
|
||||
| variant | 'primary'，'default'，'warn'，'establish' |
|
||||
| label | 字符串 |
|
||||
| width | 字符串 | | 用于自定义 Normal 按钮的宽度 |
|
||||
| special | 'corner-marker'，'hang-up'，'answer-call'，'go-back' |
|
||||
| icon | 对应 gaia-icons 中的图标名 |
|
||||
| disabled | true，false | false |
|
||||
|
|
@ -53,9 +52,12 @@
|
|||
- type 必需: type="normal"。
|
||||
- size 可选， 默认为 "small"，可选 "small", "middle", "large"。
|
||||
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn"。
|
||||
- width 可选, 有效值区间[200,520], 抵近对应按钮的最小宽度和最大宽度。
|
||||
- disabled 可选， 默认为 false。
|
||||
- theme 可选，默认为 light，可选 "light"，"dark"。
|
||||
- 可直接在 <star-button> 上设置各种单位的宽度, 宽度值的有效值区间(最小宽度和最大宽度):
|
||||
- small: [200,520]
|
||||
- middle: [260,520]
|
||||
- large: [320,520]
|
||||
|
||||
### 2. Pure - 纯按钮
|
||||
|
||||
|
|
@ -83,6 +85,10 @@
|
|||
- 插槽<slot name="asset">可选，其内包裹 svg。
|
||||
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者。
|
||||
- theme 可选，默认为 light，可选 "light"，"dark"。
|
||||
- 图标+文字时，可直接在 <star-button> 上设置各种单位的宽度, 宽度值的有效值区间(最小宽度和最大宽度):
|
||||
- small: [208,520]
|
||||
- middle: [260,520]
|
||||
- large: [320,520]
|
||||
|
||||
### 3. Text - 文本按钮
|
||||
|
||||
|
|
@ -102,6 +108,8 @@
|
|||
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn"。
|
||||
- disabled 可选，默认为 false。
|
||||
- theme 可选，默认为 light，可选 "light"，"dark"。
|
||||
- 可直接在 <star-button> 上设置各种单位的宽度, 宽度值的有效值区间(最小宽度和最大宽度):
|
||||
- small: [112,520]
|
||||
|
||||
### 4. Icon - 图标按钮
|
||||
|
||||
|
|
|
|||
|
|
@ -1,159 +0,0 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
|
||||
export const sharedStyles: CSSResult = css`
|
||||
button {
|
||||
display: inline-block;
|
||||
line-height: 18.2px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
color: #606266;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
transition: 0.1s;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
padding: 12px 23px 14px 23px;
|
||||
border: none;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 12px;
|
||||
height: 24px;
|
||||
line-height: 15.6px;
|
||||
min-height: 24px;
|
||||
min-width: 54px;
|
||||
padding: 0px 10px 0px 10px;
|
||||
}
|
||||
|
||||
.medium {
|
||||
font-size: 14px;
|
||||
height: 32.2px;
|
||||
line-height: 18.2px;
|
||||
min-height: 32px;
|
||||
min-width: 72px;
|
||||
padding: 0px 14px 0px 14px;
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: 16px;
|
||||
height: 40.8px;
|
||||
line-height: 20.8px;
|
||||
min-height: 40px;
|
||||
min-width: 90px;
|
||||
padding: 0px 18px 0px 18px;
|
||||
}
|
||||
|
||||
.extralarge {
|
||||
font-size: 18px;
|
||||
height: 48.4px;
|
||||
line-height: 23.4px;
|
||||
min-height: 48px;
|
||||
min-width: 100px;
|
||||
padding: 0px 22px 0px 22px;
|
||||
}
|
||||
|
||||
.accent {
|
||||
background-color: #0469e3;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.accent:hover {
|
||||
background-color: #015bc7;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.primary {
|
||||
background-color: #222222;
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.primary:hover {
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background-color: #e6e6e6;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.secondary:hover {
|
||||
background-color: #d5d5d5;
|
||||
color: #d42222;
|
||||
}
|
||||
|
||||
.negative {
|
||||
background-color: #b30202;
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.negative:hover {
|
||||
background-color: #a20101;
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.black {
|
||||
color: #222222;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.white {
|
||||
background-color: #ffffff;
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
background-color: #e6e6e6;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fill.primary {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.fill.primary:hover {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.outline.primary {
|
||||
background-color: #f0f0f0;
|
||||
border-style: solid;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.outline.primary:hover {
|
||||
background-color: #d5d5d5;
|
||||
border-style: solid;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button.hasicon::before {
|
||||
font-size: 16px;
|
||||
font-family: 'gaia-icons';
|
||||
content: attr(data-icon);
|
||||
text-align: center;
|
||||
padding-inline-end: 5px; /**定义元素逻辑块末尾填充 */
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
.start-button-confirm {
|
||||
display: inline-block;
|
||||
}
|
||||
`
|
||||
|
|
@ -136,21 +136,51 @@ export default [
|
|||
white-space: normal;
|
||||
}
|
||||
|
||||
/* 按钮共性 */
|
||||
:host([type='normal']) button,
|
||||
: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;
|
||||
border-radius: inherit;
|
||||
}
|
||||
:host([type='normal']) button.middle,
|
||||
:host([type='pure'][label]) button.middle {
|
||||
padding-inline-start: var(--auto-40px);
|
||||
padding-inline-end: var(--auto-40px);
|
||||
}
|
||||
:host([type='normal']) button.large,
|
||||
:host([type='pure'][label]) button.large {
|
||||
padding-inline-start: var(--auto-48px);
|
||||
padding-inline-end: var(--auto-48px);
|
||||
}
|
||||
|
||||
/* normal 类型按钮 */
|
||||
:host([type='normal']),
|
||||
:host([type='normal'][size='small']) {
|
||||
min-width: var(--auto-200px);
|
||||
max-width: var(--auto-520px);
|
||||
height: var(--auto-64px);
|
||||
color: var(--color-btn-normal-default);
|
||||
font-size: var(--auto-28px);
|
||||
border-radius: var(--auto-34px);
|
||||
background-color: var(--bgc-btn-noraml);
|
||||
}
|
||||
:host([type='normal'][size='middle']) {
|
||||
min-width: var(--auto-260px);
|
||||
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);
|
||||
font-size: var(--auto-34px);
|
||||
border-radius: var(--auto-50px);
|
||||
border-radius: var(--auto-48px);
|
||||
}
|
||||
:host([type='normal'][variant='primary']) {
|
||||
color: var(--font-main-white);
|
||||
|
|
@ -159,30 +189,6 @@ export default [
|
|||
:host([type='normal'][variant='warn']) {
|
||||
color: var(--theme-red);
|
||||
}
|
||||
:host([type='normal']) button,
|
||||
:host([type='normal']) button.small {
|
||||
min-width: var(--auto-200px);
|
||||
max-width: var(--auto-520px);
|
||||
height: var(--auto-64px);
|
||||
padding-inline-start: var(--auto-30px);
|
||||
padding-inline-end: var(--auto-30px);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
border-radius: inherit;
|
||||
}
|
||||
:host([type='normal']) button.middle {
|
||||
min-width: var(--auto-260px);
|
||||
height: var(--auto-80px);
|
||||
padding-inline-start: var(--auto-66px);
|
||||
padding-inline-end: var(--auto-66px);
|
||||
}
|
||||
:host([type='normal']) button.large {
|
||||
min-width: var(--auto-320px);
|
||||
height: var(--auto-96px);
|
||||
padding-inline-start: var(--auto-92px);
|
||||
padding-inline-end: var(--auto-92px);
|
||||
}
|
||||
|
||||
/* pure 类型按钮 */
|
||||
:host([type='pure']) {
|
||||
|
|
@ -191,68 +197,79 @@ export default [
|
|||
color: var(--color-btn-pure);
|
||||
background-color: var(--bgc-btn-pure);
|
||||
}
|
||||
/* 只针对label */
|
||||
:host([type='pure'][label]:not([icon])) button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
:host([type='pure'][label]) {
|
||||
min-width: var(--auto-208px);
|
||||
max-width: var(--auto-520px);
|
||||
height: var(--auto-64px);
|
||||
border-radius: var(--auto-34px);
|
||||
}
|
||||
:host([type='pure'][label][size='middle']) {
|
||||
min-width: var(--auto-260px);
|
||||
height: var(--auto-80px);
|
||||
border-radius: var(--auto-40px);
|
||||
}
|
||||
:host([type='pure'][label][size='large']) {
|
||||
min-width: var(--auto-320px);
|
||||
height: var(--auto-96px);
|
||||
border-radius: var(--auto-48px);
|
||||
}
|
||||
:host([type='pure'][variant='establish']) {
|
||||
color: var(--font-main-white);
|
||||
background-color: var(--theme-blue);
|
||||
}
|
||||
:host([type='pure'][size='small']) {
|
||||
/* 只针对icon */
|
||||
:host([type='pure']:not([label])[size='small']) {
|
||||
width: var(--auto-64px);
|
||||
height: var(--auto-64px);
|
||||
font-size: var(--auto-25_6px);
|
||||
}
|
||||
:host([type='pure'][size='middle']) {
|
||||
:host([type='pure']:not([label])[size='middle']) {
|
||||
width: var(--auto-80px);
|
||||
height: var(--auto-80px);
|
||||
font-size: var(--auto-32px);
|
||||
}
|
||||
:host([type='pure'][size='large']) {
|
||||
:host([type='pure']:not([label])[size='large']) {
|
||||
width: var(--auto-96px);
|
||||
height: var(--auto-96px);
|
||||
font-size: var(--auto-38_4px);
|
||||
}
|
||||
:host([type='pure'][size='extralarge']) {
|
||||
:host([type='pure']:not([label])[size='extralarge']) {
|
||||
width: var(--auto-152px);
|
||||
height: var(--auto-152px);
|
||||
font-size: var(--auto-44_8px);
|
||||
color: var(--color-btn-pure-default);
|
||||
background-color: var(--bgc-btn-pure-default);
|
||||
}
|
||||
:host([type='pure'][label][size='small']) {
|
||||
width: var(--auto-208px);
|
||||
border-radius: var(--auto-32px);
|
||||
}
|
||||
:host([type='pure'][label][size='middle']) {
|
||||
width: var(--auto-260px);
|
||||
border-radius: var(--auto-40px);
|
||||
}
|
||||
:host([type='pure'][label][size='large']) {
|
||||
width: var(--auto-312px);
|
||||
border-radius: var(--auto-48px);
|
||||
}
|
||||
:host([type='pure'][label]:not([icon])) button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
:host([type='pure'][label]) button {
|
||||
padding-inline-start: var(--auto-10px);
|
||||
}
|
||||
:host([type='pure'][label]) button.small::before {
|
||||
padding-right: var(--auto-12px);
|
||||
/* 图标与文字之间的间隙 */
|
||||
:host([type='pure'][label]) button::before {
|
||||
padding-right: var(--auto-9px);
|
||||
}
|
||||
:host([type='pure'][label]) button.middle::before {
|
||||
padding-right: var(--auto-15px);
|
||||
padding-right: var(--auto-14px);
|
||||
}
|
||||
:host([type='pure'][label]) button.large::before {
|
||||
padding-right: var(--auto-18px);
|
||||
padding-right: var(--auto-16px);
|
||||
}
|
||||
|
||||
/* text 类型按钮 */
|
||||
:host([type='text']) {
|
||||
max-width: var(--auto-520px);
|
||||
font-size: var(--auto-28px);
|
||||
width: var(--auto-310px);
|
||||
height: var(--auto-112px);
|
||||
}
|
||||
:host([type='text']) button {
|
||||
padding-inline-start: var(--auto-56px);
|
||||
padding-inline-end: var(--auto-56px);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
:host([type='text'][variant='primary']) {
|
||||
color: var(--theme-blue);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import {
|
|||
ifDefined,
|
||||
nothing,
|
||||
property,
|
||||
styleMap,
|
||||
CSSResultArray,
|
||||
HTMLTemplateResult,
|
||||
StarBaseElement,
|
||||
|
|
@ -199,17 +198,9 @@ export class StarButton extends StarBaseElement {
|
|||
*/
|
||||
renderNormalButton(): HTMLTemplateResult {
|
||||
const computeClasses = `${this.variant} ${this.size}`
|
||||
const styles = {
|
||||
width: this.width,
|
||||
}
|
||||
|
||||
return html`
|
||||
<button
|
||||
class="${computeClasses}"
|
||||
style=${ifDefined(this.width) ? styleMap(styles) : nothing}
|
||||
>
|
||||
${this.label}
|
||||
</button>
|
||||
<button class="${computeClasses}">${this.label}</button>
|
||||
`
|
||||
}
|
||||
|
||||
|
|
@ -225,19 +216,16 @@ export class StarButton extends StarBaseElement {
|
|||
*/
|
||||
renderPureButton(): HTMLTemplateResult {
|
||||
const classes = `${this.size} ${this.variant}`
|
||||
/* prettier-ignore */
|
||||
const innerContent = html`${this.hasIcon
|
||||
? nothing
|
||||
: html`<slot name="asset"></slot>`}${this.hasLabel
|
||||
// ? html`<span>${this.label}</span>`
|
||||
? html`${this.label}`
|
||||
: nothing}`
|
||||
/* prettier-ignore */
|
||||
return html`
|
||||
<button class="${classes}" data-icon=${ifDefined(this.icon)}>
|
||||
${this.hasIcon
|
||||
? nothing
|
||||
: html`
|
||||
<slot name="asset"></slot>
|
||||
`}
|
||||
${this.hasLabel
|
||||
? html`
|
||||
<span>${this.label}</span>
|
||||
`
|
||||
: nothing}
|
||||
</button>
|
||||
<button class="${classes}" data-icon=${ifDefined(this.icon)}>${innerContent}</button>
|
||||
`
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -64,4 +64,11 @@ export default css`
|
|||
footer a:visited {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
/* Just for test */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
ul {
|
||||
background-color: var(--base-black);
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -100,9 +100,9 @@ export class PanelButton extends LitElement {
|
|||
<star-button type="normal" variant="warn" label="警告按钮" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="normal" variant="primary" width="100px" size="small" label="自定义长度100px(最小为200px)"></star-button>
|
||||
<star-button type="normal" variant="primary" width="400px" size="middle" label="自定义长度400px"></star-button>
|
||||
<star-button type="normal" variant="primary" width="600px" size="large" label="自定义长度600px(最小为520px)"></star-button>
|
||||
<star-button type="normal" variant="primary" style="width:100px" size="small" label="自定义长度100px(最短为208px)"></star-button>
|
||||
<star-button type="normal" variant="primary" style="width:400px" size="middle" label="自定义长度400px"></star-button>
|
||||
<star-button type="normal" variant="primary" style="width:600px" size="large" label="自定义长度600px(最长为520px)"></star-button>
|
||||
</star-li>
|
||||
</star-ul>
|
||||
|
||||
|
|
@ -178,6 +178,21 @@ export class PanelButton extends LitElement {
|
|||
<star-button type="pure" theme="dark" variant="primary" size="large" icon="bug" label="添加组件"></star-button>
|
||||
<star-button type="pure" theme="dark" variant="primary" size="large" icon="bug" label="添加组件" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" icon="bug" size="small" label="最短"></star-button>
|
||||
<star-button type="pure" icon="bug" size="middle" label="最短"></star-button>
|
||||
<star-button type="pure" icon="bug" size="large" label="最短"></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" icon="bug" size="small" label="最长最长最长最长最长最长最长最长最长"></star-button>
|
||||
<star-button type="pure" icon="bug" size="middle" label="最长最长最长最长最长最长最长"></star-button>
|
||||
<star-button type="pure" icon="bug" size="large" label="最长最长最长最长最长最长最长"></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" icon="bug" style="width:100px" size="small" label="自定义长度100px(最短为200px)"></star-button>
|
||||
<star-button type="pure" icon="bug" style="width:400px" size="middle" label="自定义长度400px"></star-button>
|
||||
<star-button type="pure" icon="bug" style="width:600px" size="large" label="自定义长度600px(最长为520px)"></star-button>
|
||||
</star-li>
|
||||
</star-ul>
|
||||
|
||||
<h3>使用场景:对话框底部按钮</h3>
|
||||
|
|
@ -206,6 +221,12 @@ export class PanelButton extends LitElement {
|
|||
<star-button type="text" theme="dark" variant="warn" label="警告按钮"></star-button>
|
||||
<star-button type="text" theme="dark" variant="warn" label="警告按钮" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="text" variant="primary" label="最长最长最长最长最长最长最长"></star-button>
|
||||
<star-button type="text" variant="primary" style="width:100px" label="自定义长度100px"></star-button>
|
||||
<star-button type="text" variant="primary" style="width:400px" label="自定义长度400px"></star-button>
|
||||
<star-button type="text" variant="primary" style="width:600px" label="自定义长度600px(最长为520px)"></star-button>
|
||||
</star-li>
|
||||
</star-ul>
|
||||
|
||||
<h3>Icon类型按钮使用场景:在base色纯背景上的裸图标按钮</h3>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
import './iconfont/iconfont/iconfont.css'
|
||||
|
||||
export const sharedPickerStyles: CSSResult = css`
|
||||
* {
|
||||
|
|
|
|||
Loading…
Reference in New Issue