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

Merge pull request #117 in YR/star-web-components from improve-button to master 

* commit 'a9d83c8c33ff94554db333b12116fe8a02a33555':
  (improve)基础组件按钮适应设计内容的修改
This commit is contained in:
汪昌棋 2022-11-03 17:24:07 +08:00
parent 8860833c0d a9d83c8c33
commit 92faf4298a
6 changed files with 191 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,7 @@ export const autoPxStyle: CSSResult = css`
--auto-18px: calc(18px / var(--hostDevicePixelRatio)); --auto-18px: calc(18px / var(--hostDevicePixelRatio));
--auto-24px: calc(24px / var(--hostDevicePixelRatio)); --auto-24px: calc(24px / var(--hostDevicePixelRatio));
--auto-28px: calc(28px / var(--hostDevicePixelRatio)); --auto-28px: calc(28px / var(--hostDevicePixelRatio));
--auto-30px: calc(30px / var(--hostDevicePixelRatio));
--auto-32px: calc(32px / var(--hostDevicePixelRatio)); --auto-32px: calc(32px / var(--hostDevicePixelRatio));
--auto-34px: calc(34px / var(--hostDevicePixelRatio)); --auto-34px: calc(34px / var(--hostDevicePixelRatio));
--auto-36px: calc(36px / var(--hostDevicePixelRatio)); --auto-36px: calc(36px / var(--hostDevicePixelRatio));
@ -19,10 +20,13 @@ export const autoPxStyle: CSSResult = css`
--auto-50px: calc(50px / var(--hostDevicePixelRatio)); --auto-50px: calc(50px / var(--hostDevicePixelRatio));
--auto-56px: calc(56px / var(--hostDevicePixelRatio)); --auto-56px: calc(56px / var(--hostDevicePixelRatio));
--auto-64px: calc(64px / var(--hostDevicePixelRatio)); --auto-64px: calc(64px / var(--hostDevicePixelRatio));
--auto-66px: calc(66px / var(--hostDevicePixelRatio));
--auto-80px: calc(80px / var(--hostDevicePixelRatio)); --auto-80px: calc(80px / var(--hostDevicePixelRatio));
--auto-92px: calc(92px / var(--hostDevicePixelRatio));
--auto-96px: calc(96px / var(--hostDevicePixelRatio)); --auto-96px: calc(96px / var(--hostDevicePixelRatio));
--auto-112px: calc(112px / var(--hostDevicePixelRatio)); --auto-112px: calc(112px / var(--hostDevicePixelRatio));
--auto-152px: calc(152px / var(--hostDevicePixelRatio)); --auto-152px: calc(152px / var(--hostDevicePixelRatio));
--auto-200px: calc(200px / var(--hostDevicePixelRatio));
--auto-208px: calc(208px / var(--hostDevicePixelRatio)); --auto-208px: calc(208px / var(--hostDevicePixelRatio));
--auto-260px: calc(260px / var(--hostDevicePixelRatio)); --auto-260px: calc(260px / var(--hostDevicePixelRatio));
--auto-310px: calc(310px / var(--hostDevicePixelRatio)); --auto-310px: calc(310px / var(--hostDevicePixelRatio));

2
src/components/base/star-base-element.ts
View File

@ -130,3 +130,5 @@ export class StarBaseElement extends StarMixin(LitElement) {
export * from 'lit' export * from 'lit'
export * from 'lit/decorators.js' export * from 'lit/decorators.js'
export * from 'lit/directives/if-defined.js'
export * from 'lit-html/directives/style-map.js'

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

@ -12,8 +12,9 @@
| -------------- | ---------------------------------------------------- | -------- | -------------------------------- | | -------------- | ---------------------------------------------------- | -------- | -------------------------------- |
| size | 'small'，'middle'，'large'，'extralarge' | 'small' | 不是所有按钮都拥有不同的大小类型 | | size | 'small'，'middle'，'large'，'extralarge' | 'small' | 不是所有按钮都拥有不同的大小类型 |
| type | 'normal'，'pure'，'text'，'icon'，'ghost'，'specail' | | type | 'normal'，'pure'，'text'，'icon'，'ghost'，'specail' |
| variant | 'primary'，'default'，'warn' | | variant | 'primary'，'default'，'warn'，'establish' |
| label | 字符串 | | label | 字符串 |
| width | 字符串 | | 用于自定义 Normal 按钮的宽度 |
| special | 'corner-marker'，'hang-up'，'answer-call'，'go-back' | | special | 'corner-marker'，'hang-up'，'answer-call'，'go-back' |
| icon | 对应 gaia-icons 中的图标名 | | icon | 对应 gaia-icons 中的图标名 |
| disabled | true，false | false | | disabled | true，false | false |
@ -45,13 +46,13 @@
- `<star-button type="normal" variant="default" size="small" label="普通按钮"></star-button>` - `<star-button type="normal" variant="default" size="small" label="普通按钮"></star-button>`
- `<star-button type="normal" variant="warn" size="small" label="警告按钮"></star-button>` - `<star-button type="normal" variant="warn" size="small" label="警告按钮"></star-button>`
- `<star-button type="normal" variant="warn" label="警告按钮" disabled></star-button>` - `<star-button type="normal" variant="warn" label="警告按钮" disabled></star-button>`
- `<star-button type="normal" variant="primary" size="extralarge" label="最大号按钮"></star-button>`
注意： 注意：
- type 必需: type="normal". - type 必需: type="normal".
- size 可选， 默认为 "small"，可选 "small", "middle", "large", "extralarge". - size 可选， 默认为 "small"，可选 "small", "middle", "large".
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn". - variant 可选， 默认为 "default"，可选 "default", "primary", "warn".
- width 可选, 有效值区间[200,520], 抵近对应按钮的最小宽度和最大宽度
- disabled 可选， 默认为 false. - disabled 可选， 默认为 false.
### 2. Pure - 纯按钮 ### 2. Pure - 纯按钮
@ -65,9 +66,10 @@
使用格式： 使用格式：
- `<star-button type="pure" size="small" icon="bug"></star-button>` - `<star-button type="pure" variant="primary" size="small" icon="bug"></star-button>`
- `<star-button type="pure" size="small" icon="bug" label="添加" disabled></star-button>` - `<star-button type="pure" variant="primary" size="small" icon="bug" label="添加" disabled></star-button>`
- `<star-button type="pure"><A slot="asset"><svg>...</svg></A></star-button>` - `<star-button type="pure" variant="primary" size="large"><A slot="asset"><svg>...</svg></A></star-button>`
- `<star-button type="pure" variant="default" size="extralarge"><A slot="asset"><svg>...</svg></A></star-button>`
注意： 注意：
@ -134,6 +136,7 @@
- type 必需: type="ghost". - type 必需: type="ghost".
- size 可选， 默认为 "small"，可选 "small", "middle", "large", "extralarge". - size 可选， 默认为 "small"，可选 "small", "middle", "large", "extralarge".
- variant 可选， 默认为 "default"，可选 "default", "primary", "establish".
- disabled 可选，默认为 false. - disabled 可选，默认为 false.
- icon 可选， 其值为 gaia-icons 中支持的图标名. - icon 可选， 其值为 gaia-icons 中支持的图标名.
- 插槽<slot name="asset">可选，其内包裹 svg. - 插槽<slot name="asset">可选，其内包裹 svg.

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

@ -137,28 +137,29 @@ export default css`
/* normal 类型按钮 */ /* normal 类型按钮 */
:host([type='normal']) button, :host([type='normal']) button,
:host([type='normal']) button.small { :host([type='normal']) button.small {
width: var(--auto-200px); min-width: var(--auto-200px);
max-width: var(--auto-520px);
height: var(--auto-64px); height: var(--auto-64px);
font-size: var(--auto-28px); font-size: var(--auto-28px);
border-radius: var(--auto-34px); border-radius: var(--auto-34px);
padding-inline-start: var(--auto-30px);
padding-inline-end: var(--auto-30px);
} }
:host([type='normal']) button.middle { :host([type='normal']) button.middle {
width: var(--auto-260px); min-width: var(--auto-260px);
height: var(--auto-80px); height: var(--auto-80px);
font-size: var(--auto-32px); font-size: var(--auto-32px);
border-radius: var(--auto-40px); border-radius: var(--auto-40px);
padding-inline-start: var(--auto-66px);
padding-inline-end: var(--auto-66px);
} }
:host([type='normal']) button.large { :host([type='normal']) button.large {
width: var(--auto-320px); min-width: var(--auto-320px);
height: var(--auto-96px);
font-size: var(--auto-34px);
border-radius: var(--auto-50px);
}
:host([type='normal']) button.extralarge {
width: var(--auto-520px);
height: var(--auto-96px); height: var(--auto-96px);
font-size: var(--auto-34px); font-size: var(--auto-34px);
border-radius: var(--auto-50px); border-radius: var(--auto-50px);
padding-inline-start: var(--auto-92px);
padding-inline-end: var(--auto-92px);
} }
:host([type='normal']) button.primary { :host([type='normal']) button.primary {
color: var(--font-main-white); color: var(--font-main-white);
@ -172,9 +173,7 @@ export default css`
color: var(--theme-red); color: var(--theme-red);
background-color: var(--bg-gray-button); background-color: var(--bg-gray-button);
} }
:host([type='normal']) button:not(.primary), :host([type='normal']) button {
:host([type='normal']) button.primary a.mask span {
padding: 0px var(--auto-10px);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -195,6 +194,10 @@ export default css`
:host([type='pure'][label]) button { :host([type='pure'][label]) button {
padding-inline-start: var(--auto-10px); padding-inline-start: var(--auto-10px);
} }
:host([type='pure'][label]) button.establish {
background-color: var(--theme-blue);
color: var(--font-main-white);
}
:host([type='pure']) button.small { :host([type='pure']) button.small {
width: var(--auto-64px); width: var(--auto-64px);
height: var(--auto-64px); height: var(--auto-64px);
@ -226,7 +229,7 @@ export default css`
width: var(--auto-152px); width: var(--auto-152px);
height: var(--auto-152px); height: var(--auto-152px);
font-size: var(--auto-44_8px); font-size: var(--auto-44_8px);
background-color: #f4f4f4; background-color: rgba(244, 244, 244, 0.4);
} }
:host([type='pure'][label]) button.small::before { :host([type='pure'][label]) button.small::before {
padding-right: var(--auto-12px); padding-right: var(--auto-12px);
@ -400,15 +403,8 @@ export default css`
transition: linear 0.1s; transition: linear 0.1s;
} }
/* normal 类型按钮 pressed 时的变化 */ /* normal 类型按钮 pressed 时的变化 */
:host([type='normal'].pressed) button.primary a.mask { :host([type='normal'].pressed) button.primary {
display: flex; background: linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), #1D98F0;
height: 100%;
align-items: center;
border-radius: inherit;
background-color: rgba(0, 0, 0, 0.12);
}
:host([type='normal'].pressed) button.primary a.mask span {
flex: 1;
} }
:host([type='normal'].pressed) button.default, :host([type='normal'].pressed) button.default,
:host([type='normal'].pressed) button.warn { :host([type='normal'].pressed) button.warn {
@ -418,6 +414,9 @@ export default css`
:host([type='pure'].pressed) button:not(.extralarge) { :host([type='pure'].pressed) button:not(.extralarge) {
background-color: var(--bg-pure-button-pressed); background-color: var(--bg-pure-button-pressed);
} }
:host([type='pure'][label].pressed) button.establish {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), #1D98F0;
}
/* text, icon 类型按钮 pressed 时的变化 */ /* text, icon 类型按钮 pressed 时的变化 */
:host([type='text'].pressed), :host([type='text'].pressed),
:host([type='icon'].pressed) { :host([type='icon'].pressed) {

198
src/components/button/button.ts
View File

@ -1,8 +1,10 @@
import { import {
customElement, customElement,
html, html,
ifDefined,
nothing, nothing,
property, property,
styleMap,
CSSResultArray, CSSResultArray,
HTMLTemplateResult, HTMLTemplateResult,
StarBaseElement, StarBaseElement,
@ -11,6 +13,7 @@ import buttonStyles from './button.css.js'
import '../asset/svg-icon.js' import '../asset/svg-icon.js'
export enum ButtonType { export enum ButtonType {
/* TBD: Deprecated */
BASE = 'base', BASE = 'base',
ICONONLY = 'icononly', ICONONLY = 'icononly',
ICONLABEL = 'iconlabel', ICONLABEL = 'iconlabel',
@ -35,11 +38,11 @@ export enum ButtonVariant {
PRIMARY = 'primary', PRIMARY = 'primary',
DEFAULT = 'default', DEFAULT = 'default',
WARN = 'warn', WARN = 'warn',
ACCENT = 'accent', // (to-delete) ACCENT = 'accent' /* Deprecated */,
SECONDARY = 'secondary', // (to-delete) SECONDARY = 'secondary' /* Deprecated */,
NEGATIVE = 'negative', // (to-delete) NEGATIVE = 'negative' /* Deprecated */,
WHITE = 'white', // (to-delete) WHITE = 'white' /* Deprecated */,
BLACK = 'black', // (to-delete) BLACK = 'black' /* Deprecated */,
} }
export enum ButtonSpecial { export enum ButtonSpecial {
@ -63,10 +66,10 @@ export class StarButton extends StarBaseElement {
/** /**
* 按钮类型： * 按钮类型：
* base - 普通按钮(默认)(to-delete) * base - 普通按钮(默认)(Deprecated)
* icononly - 只含图标的按钮(to-delete) * icononly - 只含图标的按钮(Deprecated)
* iconlabel - 含图标同时含标签(to-delete) * iconlabel - 含图标同时含标签(Deprecated)
* confirm - 确认框按钮(to-delete) * confirm - 确认框按钮(Deprecated)
* normal - 普通按钮 * normal - 普通按钮
* pure - 纯按钮 * pure - 纯按钮
* text - 文本按钮 * text - 文本按钮
@ -81,7 +84,7 @@ export class StarButton extends StarBaseElement {
* small - 小(默认) * small - 小(默认)
* middle - 中 * middle - 中
* large - 大 * large - 大
* extralarge - 超大 * extralarge - 超大-------电源页按钮专用
* *
* 和按钮类型之间应存在约束关系 * 和按钮类型之间应存在约束关系
*/ */
@ -89,9 +92,10 @@ export class StarButton extends StarBaseElement {
/** /**
* 按钮多样性: * 按钮多样性:
* primary - 强调样式 * primary - 强调样式
* default - 普通样式 * default - 普通样式
* warn - 警告样式 * warn - 警告样式
* establish - Pure按钮强调样式
*/ */
@property({type: String}) variant = 'default' @property({type: String}) variant = 'default'
@ -122,16 +126,29 @@ export class StarButton extends StarBaseElement {
@property({type: Boolean}) disabled = false @property({type: Boolean}) disabled = false
@property({type: String}) iconcolor = '' @property({type: String}) iconcolor = ''
/**
* 支持自定义宽度
*
* 可以是: 250px 200% calc(100% + 50px)
*
* 未对值进行检查
*
* 支持的按钮类型: Normal类型
*/
@property({type: String}) width = ''
@property({type: String}) fontsize = '' @property({type: String}) fontsize = ''
// attributeChangedCallback(name: string, _old: string, value: string): void { protected get hasLabel(): boolean {
// super.attributeChangedCallback(name, _old, value) return this.label !== ''
}
// if (name === 'disabled') { protected get hasIcon(): boolean {
// } return this.icon !== ''
// } }
getBaseButton(): HTMLTemplateResult { renderBaseButton(): HTMLTemplateResult {
return html` return html`
<button> <button>
<a> <a>
@ -142,13 +159,13 @@ export class StarButton extends StarBaseElement {
` `
} }
getIconLabelButton(): HTMLTemplateResult { renderIconLabelButton(): HTMLTemplateResult {
return html` return html`
<button data-icon=${this.icon}>${this.label}</button> <button data-icon=${this.icon}>${this.label}</button>
` `
} }
getIconOnlyButton(): HTMLTemplateResult { renderIconOnlyButton(): HTMLTemplateResult {
if (this.fontsize) { if (this.fontsize) {
return html` return html`
<button <button
@ -163,7 +180,7 @@ export class StarButton extends StarBaseElement {
} }
} }
getConfirmButton(): HTMLTemplateResult { renderConfirmButton(): HTMLTemplateResult {
return html` return html`
<span class="start-button-confirm"><slot></slot></span> <span class="start-button-confirm"><slot></slot></span>
` `
@ -173,22 +190,19 @@ export class StarButton extends StarBaseElement {
* Primary 样式的 Normal 按钮，使用了主题色，所以 * Primary 样式的 Normal 按钮，使用了主题色，所以
* 针对 Primary 样式，需要有一层遮罩，用于遮罩主题色。 * 针对 Primary 样式，需要有一层遮罩，用于遮罩主题色。
*/ */
getNormalButton(): HTMLTemplateResult { renderNormalButton(): HTMLTemplateResult {
const computeClasses = `${this.variant} ${this.size}` const computeClasses = `${this.variant} ${this.size}`
const styles = {
/* 强调类型的按钮在底色(主题色)之上有一层蒙版 */ width: this.width,
if (this.variant === ButtonVariant.PRIMARY) {
return html`
<button class="${computeClasses}">
<a class="mask">
<span>${this.label}</span>
</a>
</button>
`
} }
return html` return html`
<button class="${computeClasses}">${this.label}</button> <button
class="${computeClasses}"
style=${ifDefined(this.width) ? styleMap(styles) : nothing}
>
${this.label}
</button>
` `
} }
@ -197,48 +211,30 @@ export class StarButton extends StarBaseElement {
* *
* 可能含有 slot: <slot name="asset"></slot> * 可能含有 slot: <slot name="asset"></slot>
* *
* 当前只有电源页按钮为： default
*
* 注意： ::before 伪类和换行的 <span> 标签搭配时，会被解析出“空白占位” * 注意： ::before 伪类和换行的 <span> 标签搭配时，会被解析出“空白占位”
* 在此适用 prettier-ignore 跳过 * 在此适用 prettier-ignore 跳过
*/ */
getPureButton(): HTMLTemplateResult { renderPureButton(): HTMLTemplateResult {
const content = const classes = `${this.size} ${this.variant}`
this.label !== '' return html`
? this.icon !== '' <button class="${classes}" data-icon=${ifDefined(this.icon)}>
${this.hasIcon
? nothing
: html`
<slot name="asset"></slot>
`}
${this.hasLabel
? html` ? html`
<span>${this.label}</span> <span>${this.label}</span>
` `
: html` : nothing}
<slot name="asset"></slot> </button>
<span>${this.label}</span> `
`
: this.icon !== ''
? html`
<span>${this.label}</span>
`
: html`
<slot name="asset"></slot>
`
const classes = `${this.size} ${
this.label !== ''
? 'primary'
: this.size === 'extralarge'
? 'default'
: 'primary'
}`
if (this.icon !== '') {
return html`
<button data-icon=${this.icon} class="${classes}">${content}</button>
`
} else {
return html`
<button class="${classes}">${content}</button>
`
}
} }
getTextButton(): HTMLTemplateResult { renderTextButton(): HTMLTemplateResult {
if (this.label === '') if (this.label === '')
throw new Error("The TextButton's label text is empty!") throw new Error("The TextButton's label text is empty!")
@ -250,42 +246,38 @@ export class StarButton extends StarBaseElement {
/** /**
* 可能含有 slot: <slot name="asset"></slot> * 可能含有 slot: <slot name="asset"></slot>
*/ */
getIconButton(): HTMLTemplateResult { renderIconButton(): HTMLTemplateResult {
if (this.size !== 'small' && this.size !== 'middle') { if (this.size !== 'small' && this.size !== 'middle') {
throw new Error("The IconButton's size is wrong!") throw new Error("The IconButton's size is wrong!")
} }
if (this.icon !== '') { return html`
return html` <button class="${this.size}" data-icon=${ifDefined(this.icon)}>
<button data-icon=${this.icon} class="${this.size}"></button> ${this.hasIcon
` ? nothing
} else { : html`
return html` <slot name="asset"></slot>
<button class="${this.size}"> `}
<slot name="asset"></slot> </button>
</button> `
`
}
} }
/** /**
* 可能含有 slot: <slot name="asset"></slot> * 可能含有 slot: <slot name="asset"></slot>
*/ */
getGhostButton(): HTMLTemplateResult { renderGhostButton(): HTMLTemplateResult {
if (this.icon !== '') { return html`
return html` <button class="${this.size}" data-icon=${ifDefined(this.icon)}>
<button data-icon=${this.icon} class="${this.size}"></button> ${this.hasIcon
` ? nothing
} else { : html`
return html` <slot name="asset"></slot>
<button class="${this.size}"> `}
<slot name="asset"></slot> </button>
</button> `
`
}
} }
getSpecialButton(): HTMLTemplateResult | typeof nothing { renderSpecialButton(): HTMLTemplateResult | typeof nothing {
if (this.special === '') throw new Error('The special value is empty!') if (this.special === '') throw new Error('The special value is empty!')
switch (this.special) { switch (this.special) {
@ -337,34 +329,34 @@ export class StarButton extends StarBaseElement {
render() { render() {
switch (this.type) { switch (this.type) {
case ButtonType.BASE: case ButtonType.BASE:
return this.getBaseButton() return this.renderBaseButton()
case ButtonType.ICONONLY: case ButtonType.ICONONLY:
return this.getIconOnlyButton() return this.renderIconOnlyButton()
case ButtonType.ICONLABEL: case ButtonType.ICONLABEL:
return this.getIconLabelButton() return this.renderIconLabelButton()
case ButtonType.Confirm: case ButtonType.Confirm:
return this.getConfirmButton() return this.renderConfirmButton()
case ButtonType.NORMAL: case ButtonType.NORMAL:
return this.getNormalButton() return this.renderNormalButton()
case ButtonType.PURE: case ButtonType.PURE:
return this.getPureButton() return this.renderPureButton()
case ButtonType.TEXT: case ButtonType.TEXT:
return this.getTextButton() return this.renderTextButton()
case ButtonType.ICON: case ButtonType.ICON:
return this.getIconButton() return this.renderIconButton()
case ButtonType.GHOST: case ButtonType.GHOST:
return this.getGhostButton() return this.renderGhostButton()
case ButtonType.SPECIAL: case ButtonType.SPECIAL:
return this.getSpecialButton() return this.renderSpecialButton()
default: default:
console.error('unhanled 【star-button】 type') console.error('unhanled 【star-button】 type')

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

@ -75,9 +75,19 @@ export class PanelButton extends LitElement {
<star-button type="normal" variant="warn" size="large" label="警告按钮"></star-button> <star-button type="normal" variant="warn" size="large" label="警告按钮"></star-button>
</star-li> </star-li>
<star-li type="base"> <star-li type="base">
<star-button type="normal" variant="primary" size="large" label="很长很长的强调按钮"></star-button> <star-button type="normal" size="small" label="最短"></star-button>
<star-button type="normal" variant="default" size="large" label="很长很长的普通按钮"></star-button> <star-button type="normal" size="middle" label="最短"></star-button>
<star-button type="normal" variant="warn" size="large" label="很长很长的警告按钮"></star-button> <star-button type="normal" size="large" label="最短"></star-button>
</star-li>
<star-li type="base">
<star-button type="normal" size="small" label="很长的变长按钮"></star-button>
<star-button type="normal" size="middle" label="很长的变长按钮"></star-button>
<star-button type="normal" size="large" label="很长的变长按钮"></star-button>
</star-li>
<star-li type="base">
<star-button type="normal" size="small" label="最长最长最长最长最长最长最长"></star-button>
<star-button type="normal" size="middle" label="最长最长最长最长最长最长最长"></star-button>
<star-button type="normal" size="large" label="最长最长最长最长最长最长最长"></star-button>
</star-li> </star-li>
<star-li type="base"> <star-li type="base">
<star-button type="normal" variant="primary" label="强调按钮" disabled></star-button> <star-button type="normal" variant="primary" label="强调按钮" disabled></star-button>
@ -85,64 +95,69 @@ export class PanelButton extends LitElement {
<star-button type="normal" variant="warn" label="警告按钮" disabled></star-button> <star-button type="normal" variant="warn" label="警告按钮" disabled></star-button>
</star-li> </star-li>
<star-li type="base"> <star-li type="base">
<star-button type="normal" variant="primary" size="extralarge" label="应用"></star-button> <star-button type="normal" width="100px" size="small" label="自定义长度100px(最小为200px)"></star-button>
<star-button type="normal" variant="default" size="extralarge" label="最大号按钮"></star-button> <star-button type="normal" width="400px" size="middle" label="自定义长度400px"></star-button>
<star-button type="normal" variant="warn" size="extralarge" label="最大号按钮"></star-button> <star-button type="normal" width="600px" size="large" label="自定义长度600px(最小为520px)"></star-button>
</star-li> </star-li>
</star-ul> </star-ul>
<h3>使用场景:直接放在图形背景或毛玻璃背景上的按钮</h3> <h3>使用场景:直接放在图形背景或毛玻璃背景上的按钮</h3>
<star-ul type="onlyheader" title="Pure类型不同大小按钮及禁用按钮"> <star-ul type="onlyheader" title="Pure类型不同大小按钮及禁用按钮">
<star-li type="base"> <star-li type="base">
<star-button type="pure" size="small" icon="bug"></star-button> <star-button type="pure" variant="primary" size="small" icon="bug"></star-button>
<star-button type="pure" size="small" icon="delete"></star-button> <star-button type="pure" variant="primary" size="small" icon="delete"></star-button>
<star-button type="pure" size="small" icon="delete" disabled></star-button> <star-button type="pure" variant="primary" size="small" icon="delete" disabled></star-button>
</star-li> </star-li>
<star-li type="base"> <star-li type="base">
<star-button type="pure" size="middle" icon="bug"></star-button> <star-button type="pure" variant="primary" size="middle" icon="bug"></star-button>
<star-button type="pure" size="middle" icon="delete"></star-button> <star-button type="pure" variant="primary" size="middle" icon="delete"></star-button>
<star-button type="pure" size="middle" icon="delete" disabled></star-button> <star-button type="pure" variant="primary" size="middle" icon="delete" disabled></star-button>
</star-li> </star-li>
<star-li type="base"> <star-li type="base">
<star-button type="pure" size="large" icon="bug"></star-button> <star-button type="pure" variant="primary" size="large" icon="bug"></star-button>
<star-button type="pure" size="large" icon="delete"></star-button> <star-button type="pure" variant="primary" size="large" icon="delete"></star-button>
<star-button type="pure" size="large" icon="delete" disabled></star-button> <star-button type="pure" variant="primary" size="large" icon="delete" disabled></star-button>
</star-li> </star-li>
<star-li type="base"> <star-li type="base">
<star-button type="pure" size="extralarge" icon="bug"></star-button> <star-button type="pure" variant="default" size="extralarge" icon="bug"></star-button>
<star-button type="pure" size="extralarge" icon="delete"></star-button> <star-button type="pure" variant="default" size="extralarge" icon="delete"></star-button>
<star-button type="pure" size="extralarge" icon="delete" disabled></star-button> <star-button type="pure" variant="default" size="extralarge" icon="delete" disabled></star-button>
</star-li> </star-li>
<star-li type="base"> <star-li type="base">
<star-button type="pure" size="small" icon="bug" label="添"></star-button> <star-button type="pure" variant="primary" size="small" icon="bug" label="添"></star-button>
<star-button type="pure" size="small" icon="bug" label="添" disabled></star-button> <star-button type="pure" variant="primary" size="small" icon="bug" label="添" disabled></star-button>
</star-li> </star-li>
<star-li type="base"> <star-li type="base">
<star-button type="pure" size="small" icon="bug" label="添加"></star-button> <star-button type="pure" variant="primary" size="small" icon="bug" label="添加"></star-button>
<star-button type="pure" size="small" icon="bug" label="添加" disabled></star-button> <star-button type="pure" variant="primary" size="small" icon="bug" label="添加" disabled></star-button>
</star-li> </star-li>
<star-li type="base"> <star-li type="base">
<star-button type="pure" size="small" icon="bug" label="添加组件"></star-button> <star-button type="pure" variant="primary" size="small" icon="bug" label="添加组件"></star-button>
<star-button type="pure" size="small" icon="bug" label="添加组件" disabled></star-button> <star-button type="pure" variant="primary" size="small" icon="bug" label="添加组件" disabled></star-button>
</star-li> </star-li>
<star-li type="base"> <star-li type="base">
<star-button type="pure" size="small" icon="bug" label="很长名字的组件"></star-button> <star-button type="pure" variant="establish" size="small" icon="bug" label="添加组件"></star-button>
<star-button type="pure" size="small" icon="bug" label="很长名字的组件" disabled></star-button> <star-button type="pure" variant="establish" size="small" icon="bug" label="添加组件" disabled></star-button>
</star-li> </star-li>
<star-li type="base"> <star-li type="base">
<star-button type="pure" size="middle" icon="bug" label="添加组件"></star-button> <star-button type="pure" variant="primary" size="small" icon="bug" label="很长名字的组件"></star-button>
<star-button type="pure" size="middle" icon="bug" label="添加组件" disabled></star-button> <star-button type="pure" variant="primary" size="small" icon="bug" label="很长名字的组件" disabled></star-button>
<star-button type="pure" size="middle" label="添加组件">
<star-svg-icon slot="asset">
<svg width="34" height="36" viewBox="0 0 34 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.6219 6.58135L20.5 0.806252C18.5448 -0.268751 16.254 -0.268751 14.2988 0.806252L3.3746 6.58135C1.30461 7.71549 0.0104369 9.88637 0 12.2521V23.3813C0.0139159 25.74 1.30809 27.9074 3.3746 29.0416L13.5 35C14.4776 35.5392 15.925 36 17 36C18.0715 36 19.5224 35.5392 20.5 35L31 29C33.0665 27.8659 33.9896 25.74 34 23.3743V12.2416C33.9861 9.88289 32.6919 7.71201 30.6219 6.58135ZM15.5 3.5C16.1019 3.1695 16.839 3 17.5 3C18.161 3 18.8981 3.1695 19.5 3.5L27.5 8.5C27.7505 8.63568 28.7913 9.31561 29 9.5L17.5 16L5 9.5C5.20874 9.31909 6.24951 8.63916 6.5 8.5L15.5 3.5ZM5 26.5C3.72322 25.8007 3.00696 24.9473 3 23.5V13C3 12.6973 2.9339 12.2888 3 12L16 19V32C15.7704 31.9235 14.7192 31.6183 14.5 31.5L5 26.5ZM31 23.5C30.993 24.9542 30.7733 25.8007 29.5 26.5L20.5 31.5C20.2773 31.6218 19.2366 31.9235 19 32V19L31 12C31.0661 12.2853 30.9965 12.7008 31 13V23.5Z" fill="#4D4D4D"/>
</svg>
</star-svg-icon>
</star-button>
</star-li> </star-li>
<star-li type="base"> <star-li type="base">
<star-button type="pure" size="large" icon="bug" label="添加组件"></star-button> <star-button type="pure" variant="primary" size="middle" icon="bug" label="添加组件"></star-button>
<star-button type="pure" size="large" icon="bug" label="添加组件" disabled></star-button> <star-button type="pure" variant="primary" size="middle" icon="bug" label="添加组件" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" variant="establish" size="middle" icon="bug" label="添加组件"></star-button>
<star-button type="pure" variant="establish" size="middle" icon="bug" label="添加组件" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" variant="primary" size="large" icon="bug" label="添加组件"></star-button>
<star-button type="pure" variant="primary" size="large" icon="bug" label="添加组件" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" variant="establish" size="large" icon="bug" label="添加组件"></star-button>
<star-button type="pure" variant="establish" size="large" icon="bug" label="添加组件" disabled></star-button>
</star-li> </star-li>
</star-ul> </star-ul>
@ -188,10 +203,6 @@ export class PanelButton extends LitElement {
<star-button type="ghost" icon="bug" size="large"></star-button> <star-button type="ghost" icon="bug" size="large"></star-button>
<star-button type="ghost" icon="bug" size="large" disabled></star-button> <star-button type="ghost" icon="bug" size="large" disabled></star-button>
</star-li> </star-li>
<star-li type="base">
<star-button type="ghost" icon="bug" size="extralarge"></star-button>
<star-button type="ghost" icon="bug" size="extralarge" disabled></star-button>
</star-li>
</star-ul> </star-ul>
<star-ul type="onlyheader" title="Special类型按钮"> <star-ul type="onlyheader" title="Special类型按钮">
@ -219,16 +230,16 @@ export class PanelButton extends LitElement {
<star-ul type="onlyheader" title="插入静态图标的Pure、Icon、Ghost按钮"> <star-ul type="onlyheader" title="插入静态图标的Pure、Icon、Ghost按钮">
<star-li type="base"> <star-li type="base">
<star-button type="pure" size="small">${staticSvg}</star-button> <star-button type="pure" variant="default" size="small">${staticSvg}</star-button>
<star-button type="pure" size="middle">${staticSvg}</star-button> <star-button type="pure" variant="default" size="middle">${staticSvg}</star-button>
<star-button type="pure" size="large">${staticSvg}</star-button> <star-button type="pure" variant="default" size="large">${staticSvg}</star-button>
<star-button type="pure" size="extralarge">${staticSvg}</star-button> <star-button type="pure" variant="default" size="extralarge">${staticSvg}</star-button>
</star-li> </star-li>
<star-li type="base"> <star-li type="base">
<star-button type="pure" size="small">${staticPowerSvg}</star-button> <star-button type="pure" variant="default" size="small">${staticPowerSvg}</star-button>
<star-button type="pure" size="middle">${staticPowerSvg}</star-button> <star-button type="pure" variant="default" size="middle">${staticPowerSvg}</star-button>
<star-button type="pure" size="large">${staticPowerSvg}</star-button> <star-button type="pure" variant="default" size="large">${staticPowerSvg}</star-button>
<star-button type="pure" size="extralarge">${staticPowerSvg}</star-button> <star-button type="pure" variant="default" size="extralarge">${staticPowerSvg}</star-button>
</star-li> </star-li>
<star-li type="base"> <star-li type="base">
<star-button type="pure" size="small" label="添加组件">${staticSvg}</star-button> <star-button type="pure" size="small" label="添加组件">${staticSvg}</star-button>
@ -243,7 +254,6 @@ export class PanelButton extends LitElement {
<star-button type="ghost" size="small">${staticSvg}</star-button> <star-button type="ghost" size="small">${staticSvg}</star-button>
<star-button type="ghost" size="middle">${staticSvg}</star-button> <star-button type="ghost" size="middle">${staticSvg}</star-button>
<star-button type="ghost" size="large">${staticSvg}</star-button> <star-button type="ghost" size="large">${staticSvg}</star-button>
<star-button type="ghost" size="extralarge">${staticSvg}</star-button>
</star-li> </star-li>
</star-ul> </star-ul>