Merge pull request #117 in YR/star-web-components from improve-button to master
* commit 'a9d83c8c33ff94554db333b12116fe8a02a33555': (improve)基础组件按钮适应设计内容的修改
This commit is contained in:
汪昌棋
commit
92faf4298a
|
|
@ -11,6 +11,7 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-18px: calc(18px / var(--hostDevicePixelRatio));
|
||||
--auto-24px: calc(24px / var(--hostDevicePixelRatio));
|
||||
--auto-28px: calc(28px / var(--hostDevicePixelRatio));
|
||||
--auto-30px: calc(30px / var(--hostDevicePixelRatio));
|
||||
--auto-32px: calc(32px / var(--hostDevicePixelRatio));
|
||||
--auto-34px: calc(34px / var(--hostDevicePixelRatio));
|
||||
--auto-36px: calc(36px / var(--hostDevicePixelRatio));
|
||||
|
|
@ -19,10 +20,13 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-50px: calc(50px / var(--hostDevicePixelRatio));
|
||||
--auto-56px: calc(56px / var(--hostDevicePixelRatio));
|
||||
--auto-64px: calc(64px / var(--hostDevicePixelRatio));
|
||||
--auto-66px: calc(66px / var(--hostDevicePixelRatio));
|
||||
--auto-80px: calc(80px / var(--hostDevicePixelRatio));
|
||||
--auto-92px: calc(92px / var(--hostDevicePixelRatio));
|
||||
--auto-96px: calc(96px / var(--hostDevicePixelRatio));
|
||||
--auto-112px: calc(112px / var(--hostDevicePixelRatio));
|
||||
--auto-152px: calc(152px / var(--hostDevicePixelRatio));
|
||||
--auto-200px: calc(200px / var(--hostDevicePixelRatio));
|
||||
--auto-208px: calc(208px / var(--hostDevicePixelRatio));
|
||||
--auto-260px: calc(260px / var(--hostDevicePixelRatio));
|
||||
--auto-310px: calc(310px / var(--hostDevicePixelRatio));
|
||||
|
|
|
|||
|
|
@ -130,3 +130,5 @@ export class StarBaseElement extends StarMixin(LitElement) {
|
|||
|
||||
export * from 'lit'
|
||||
export * from 'lit/decorators.js'
|
||||
export * from 'lit/directives/if-defined.js'
|
||||
export * from 'lit-html/directives/style-map.js'
|
||||
|
|
|
|||
|
|
@ -12,8 +12,9 @@
|
|||
| -------------- | ---------------------------------------------------- | -------- | -------------------------------- |
|
||||
| size | 'small'，'middle'，'large'，'extralarge' | 'small' | 不是所有按钮都拥有不同的大小类型 |
|
||||
| type | 'normal'，'pure'，'text'，'icon'，'ghost'，'specail' |
|
||||
| variant | 'primary'，'default'，'warn' |
|
||||
| variant | 'primary'，'default'，'warn'，'establish' |
|
||||
| label | 字符串 |
|
||||
| width | 字符串 | | 用于自定义 Normal 按钮的宽度 |
|
||||
| special | 'corner-marker'，'hang-up'，'answer-call'，'go-back' |
|
||||
| icon | 对应 gaia-icons 中的图标名 |
|
||||
| disabled | true，false | false |
|
||||
|
|
@ -45,13 +46,13 @@
|
|||
- `<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" label="警告按钮" disabled></star-button>`
|
||||
- `<star-button type="normal" variant="primary" size="extralarge" label="最大号按钮"></star-button>`
|
||||
|
||||
注意：
|
||||
|
||||
- type 必需: type="normal".
|
||||
- size 可选， 默认为 "small"，可选 "small", "middle", "large", "extralarge".
|
||||
- size 可选， 默认为 "small"，可选 "small", "middle", "large".
|
||||
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn".
|
||||
- width 可选, 有效值区间[200,520], 抵近对应按钮的最小宽度和最大宽度
|
||||
- disabled 可选， 默认为 false.
|
||||
|
||||
### 2. Pure - 纯按钮
|
||||
|
|
@ -65,9 +66,10 @@
|
|||
|
||||
使用格式：
|
||||
|
||||
- `<star-button type="pure" size="small" icon="bug"></star-button>`
|
||||
- `<star-button type="pure" 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="small" icon="bug"></star-button>`
|
||||
- `<star-button type="pure" variant="primary" size="small" icon="bug" label="添加" disabled></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".
|
||||
- size 可选， 默认为 "small"，可选 "small", "middle", "large", "extralarge".
|
||||
- variant 可选， 默认为 "default"，可选 "default", "primary", "establish".
|
||||
- disabled 可选，默认为 false.
|
||||
- icon 可选， 其值为 gaia-icons 中支持的图标名.
|
||||
- 插槽<slot name="asset">可选，其内包裹 svg.
|
||||
|
|
|
|||
|
|
@ -137,28 +137,29 @@ export default css`
|
|||
/* normal 类型按钮 */
|
||||
:host([type='normal']) button,
|
||||
:host([type='normal']) button.small {
|
||||
width: var(--auto-200px);
|
||||
min-width: var(--auto-200px);
|
||||
max-width: var(--auto-520px);
|
||||
height: var(--auto-64px);
|
||||
font-size: var(--auto-28px);
|
||||
border-radius: var(--auto-34px);
|
||||
padding-inline-start: var(--auto-30px);
|
||||
padding-inline-end: var(--auto-30px);
|
||||
}
|
||||
:host([type='normal']) button.middle {
|
||||
width: var(--auto-260px);
|
||||
min-width: var(--auto-260px);
|
||||
height: var(--auto-80px);
|
||||
font-size: var(--auto-32px);
|
||||
border-radius: var(--auto-40px);
|
||||
padding-inline-start: var(--auto-66px);
|
||||
padding-inline-end: var(--auto-66px);
|
||||
}
|
||||
:host([type='normal']) button.large {
|
||||
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);
|
||||
min-width: var(--auto-320px);
|
||||
height: var(--auto-96px);
|
||||
font-size: var(--auto-34px);
|
||||
border-radius: var(--auto-50px);
|
||||
padding-inline-start: var(--auto-92px);
|
||||
padding-inline-end: var(--auto-92px);
|
||||
}
|
||||
:host([type='normal']) button.primary {
|
||||
color: var(--font-main-white);
|
||||
|
|
@ -172,9 +173,7 @@ export default css`
|
|||
color: var(--theme-red);
|
||||
background-color: var(--bg-gray-button);
|
||||
}
|
||||
:host([type='normal']) button:not(.primary),
|
||||
:host([type='normal']) button.primary a.mask span {
|
||||
padding: 0px var(--auto-10px);
|
||||
:host([type='normal']) button {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -195,6 +194,10 @@ export default css`
|
|||
:host([type='pure'][label]) button {
|
||||
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 {
|
||||
width: var(--auto-64px);
|
||||
height: var(--auto-64px);
|
||||
|
|
@ -226,7 +229,7 @@ export default css`
|
|||
width: var(--auto-152px);
|
||||
height: var(--auto-152px);
|
||||
font-size: var(--auto-44_8px);
|
||||
background-color: #f4f4f4;
|
||||
background-color: rgba(244, 244, 244, 0.4);
|
||||
}
|
||||
:host([type='pure'][label]) button.small::before {
|
||||
padding-right: var(--auto-12px);
|
||||
|
|
@ -400,15 +403,8 @@ export default css`
|
|||
transition: linear 0.1s;
|
||||
}
|
||||
/* normal 类型按钮 pressed 时的变化 */
|
||||
:host([type='normal'].pressed) button.primary a.mask {
|
||||
display: flex;
|
||||
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.primary {
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), #1D98F0;
|
||||
}
|
||||
:host([type='normal'].pressed) button.default,
|
||||
:host([type='normal'].pressed) button.warn {
|
||||
|
|
@ -418,6 +414,9 @@ export default css`
|
|||
:host([type='pure'].pressed) button:not(.extralarge) {
|
||||
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 时的变化 */
|
||||
:host([type='text'].pressed),
|
||||
:host([type='icon'].pressed) {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import {
|
||||
customElement,
|
||||
html,
|
||||
ifDefined,
|
||||
nothing,
|
||||
property,
|
||||
styleMap,
|
||||
CSSResultArray,
|
||||
HTMLTemplateResult,
|
||||
StarBaseElement,
|
||||
|
|
@ -11,6 +13,7 @@ import buttonStyles from './button.css.js'
|
|||
import '../asset/svg-icon.js'
|
||||
|
||||
export enum ButtonType {
|
||||
/* TBD: Deprecated */
|
||||
BASE = 'base',
|
||||
ICONONLY = 'icononly',
|
||||
ICONLABEL = 'iconlabel',
|
||||
|
|
@ -35,11 +38,11 @@ export enum ButtonVariant {
|
|||
PRIMARY = 'primary',
|
||||
DEFAULT = 'default',
|
||||
WARN = 'warn',
|
||||
ACCENT = 'accent', // (to-delete)
|
||||
SECONDARY = 'secondary', // (to-delete)
|
||||
NEGATIVE = 'negative', // (to-delete)
|
||||
WHITE = 'white', // (to-delete)
|
||||
BLACK = 'black', // (to-delete)
|
||||
ACCENT = 'accent' /* Deprecated */,
|
||||
SECONDARY = 'secondary' /* Deprecated */,
|
||||
NEGATIVE = 'negative' /* Deprecated */,
|
||||
WHITE = 'white' /* Deprecated */,
|
||||
BLACK = 'black' /* Deprecated */,
|
||||
}
|
||||
|
||||
export enum ButtonSpecial {
|
||||
|
|
@ -63,10 +66,10 @@ export class StarButton extends StarBaseElement {
|
|||
|
||||
/**
|
||||
* 按钮类型：
|
||||
* base - 普通按钮(默认)(to-delete)
|
||||
* icononly - 只含图标的按钮(to-delete)
|
||||
* iconlabel - 含图标同时含标签(to-delete)
|
||||
* confirm - 确认框按钮(to-delete)
|
||||
* base - 普通按钮(默认)(Deprecated)
|
||||
* icononly - 只含图标的按钮(Deprecated)
|
||||
* iconlabel - 含图标同时含标签(Deprecated)
|
||||
* confirm - 确认框按钮(Deprecated)
|
||||
* normal - 普通按钮
|
||||
* pure - 纯按钮
|
||||
* text - 文本按钮
|
||||
|
|
@ -81,7 +84,7 @@ export class StarButton extends StarBaseElement {
|
|||
* small - 小(默认)
|
||||
* middle - 中
|
||||
* large - 大
|
||||
* extralarge - 超大
|
||||
* extralarge - 超大-------电源页按钮专用
|
||||
*
|
||||
* 和按钮类型之间应存在约束关系
|
||||
*/
|
||||
|
|
@ -89,9 +92,10 @@ export class StarButton extends StarBaseElement {
|
|||
|
||||
/**
|
||||
* 按钮多样性:
|
||||
* primary - 强调样式
|
||||
* default - 普通样式
|
||||
* warn - 警告样式
|
||||
* primary - 强调样式
|
||||
* default - 普通样式
|
||||
* warn - 警告样式
|
||||
* establish - Pure按钮强调样式
|
||||
*/
|
||||
@property({type: String}) variant = 'default'
|
||||
|
||||
|
|
@ -122,16 +126,29 @@ export class StarButton extends StarBaseElement {
|
|||
@property({type: Boolean}) disabled = false
|
||||
|
||||
@property({type: String}) iconcolor = ''
|
||||
|
||||
/**
|
||||
* 支持自定义宽度
|
||||
*
|
||||
* 可以是: 250px 200% calc(100% + 50px)
|
||||
*
|
||||
* 未对值进行检查
|
||||
*
|
||||
* 支持的按钮类型: Normal类型
|
||||
*/
|
||||
@property({type: String}) width = ''
|
||||
|
||||
@property({type: String}) fontsize = ''
|
||||
|
||||
// attributeChangedCallback(name: string, _old: string, value: string): void {
|
||||
// super.attributeChangedCallback(name, _old, value)
|
||||
protected get hasLabel(): boolean {
|
||||
return this.label !== ''
|
||||
}
|
||||
|
||||
// if (name === 'disabled') {
|
||||
// }
|
||||
// }
|
||||
protected get hasIcon(): boolean {
|
||||
return this.icon !== ''
|
||||
}
|
||||
|
||||
getBaseButton(): HTMLTemplateResult {
|
||||
renderBaseButton(): HTMLTemplateResult {
|
||||
return html`
|
||||
<button>
|
||||
<a>
|
||||
|
|
@ -142,13 +159,13 @@ export class StarButton extends StarBaseElement {
|
|||
`
|
||||
}
|
||||
|
||||
getIconLabelButton(): HTMLTemplateResult {
|
||||
renderIconLabelButton(): HTMLTemplateResult {
|
||||
return html`
|
||||
<button data-icon=${this.icon}>${this.label}</button>
|
||||
`
|
||||
}
|
||||
|
||||
getIconOnlyButton(): HTMLTemplateResult {
|
||||
renderIconOnlyButton(): HTMLTemplateResult {
|
||||
if (this.fontsize) {
|
||||
return html`
|
||||
<button
|
||||
|
|
@ -163,7 +180,7 @@ export class StarButton extends StarBaseElement {
|
|||
}
|
||||
}
|
||||
|
||||
getConfirmButton(): HTMLTemplateResult {
|
||||
renderConfirmButton(): HTMLTemplateResult {
|
||||
return html`
|
||||
<span class="start-button-confirm"><slot></slot></span>
|
||||
`
|
||||
|
|
@ -173,22 +190,19 @@ export class StarButton extends StarBaseElement {
|
|||
* Primary 样式的 Normal 按钮，使用了主题色，所以
|
||||
* 针对 Primary 样式，需要有一层遮罩，用于遮罩主题色。
|
||||
*/
|
||||
getNormalButton(): HTMLTemplateResult {
|
||||
renderNormalButton(): HTMLTemplateResult {
|
||||
const computeClasses = `${this.variant} ${this.size}`
|
||||
|
||||
/* 强调类型的按钮在底色(主题色)之上有一层蒙版 */
|
||||
if (this.variant === ButtonVariant.PRIMARY) {
|
||||
return html`
|
||||
<button class="${computeClasses}">
|
||||
<a class="mask">
|
||||
<span>${this.label}</span>
|
||||
</a>
|
||||
</button>
|
||||
`
|
||||
const styles = {
|
||||
width: this.width,
|
||||
}
|
||||
|
||||
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>
|
||||
*
|
||||
* 当前只有电源页按钮为： default
|
||||
*
|
||||
* 注意： ::before 伪类和换行的 <span> 标签搭配时，会被解析出“空白占位”
|
||||
* 在此适用 prettier-ignore 跳过
|
||||
*/
|
||||
getPureButton(): HTMLTemplateResult {
|
||||
const content =
|
||||
this.label !== ''
|
||||
? this.icon !== ''
|
||||
renderPureButton(): HTMLTemplateResult {
|
||||
const classes = `${this.size} ${this.variant}`
|
||||
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>
|
||||
`
|
||||
: html`
|
||||
<slot name="asset"></slot>
|
||||
<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>
|
||||
`
|
||||
}
|
||||
: nothing}
|
||||
</button>
|
||||
`
|
||||
}
|
||||
|
||||
getTextButton(): HTMLTemplateResult {
|
||||
renderTextButton(): HTMLTemplateResult {
|
||||
if (this.label === '')
|
||||
throw new Error("The TextButton's label text is empty!")
|
||||
|
||||
|
|
@ -250,42 +246,38 @@ export class StarButton extends StarBaseElement {
|
|||
/**
|
||||
* 可能含有 slot: <slot name="asset"></slot>
|
||||
*/
|
||||
getIconButton(): HTMLTemplateResult {
|
||||
renderIconButton(): HTMLTemplateResult {
|
||||
if (this.size !== 'small' && this.size !== 'middle') {
|
||||
throw new Error("The IconButton's size is wrong!")
|
||||
}
|
||||
|
||||
if (this.icon !== '') {
|
||||
return html`
|
||||
<button data-icon=${this.icon} class="${this.size}"></button>
|
||||
`
|
||||
} else {
|
||||
return html`
|
||||
<button class="${this.size}">
|
||||
<slot name="asset"></slot>
|
||||
</button>
|
||||
`
|
||||
}
|
||||
return html`
|
||||
<button class="${this.size}" data-icon=${ifDefined(this.icon)}>
|
||||
${this.hasIcon
|
||||
? nothing
|
||||
: html`
|
||||
<slot name="asset"></slot>
|
||||
`}
|
||||
</button>
|
||||
`
|
||||
}
|
||||
|
||||
/**
|
||||
* 可能含有 slot: <slot name="asset"></slot>
|
||||
*/
|
||||
getGhostButton(): HTMLTemplateResult {
|
||||
if (this.icon !== '') {
|
||||
return html`
|
||||
<button data-icon=${this.icon} class="${this.size}"></button>
|
||||
`
|
||||
} else {
|
||||
return html`
|
||||
<button class="${this.size}">
|
||||
<slot name="asset"></slot>
|
||||
</button>
|
||||
`
|
||||
}
|
||||
renderGhostButton(): HTMLTemplateResult {
|
||||
return html`
|
||||
<button class="${this.size}" data-icon=${ifDefined(this.icon)}>
|
||||
${this.hasIcon
|
||||
? nothing
|
||||
: html`
|
||||
<slot name="asset"></slot>
|
||||
`}
|
||||
</button>
|
||||
`
|
||||
}
|
||||
|
||||
getSpecialButton(): HTMLTemplateResult | typeof nothing {
|
||||
renderSpecialButton(): HTMLTemplateResult | typeof nothing {
|
||||
if (this.special === '') throw new Error('The special value is empty!')
|
||||
|
||||
switch (this.special) {
|
||||
|
|
@ -337,34 +329,34 @@ export class StarButton extends StarBaseElement {
|
|||
render() {
|
||||
switch (this.type) {
|
||||
case ButtonType.BASE:
|
||||
return this.getBaseButton()
|
||||
return this.renderBaseButton()
|
||||
|
||||
case ButtonType.ICONONLY:
|
||||
return this.getIconOnlyButton()
|
||||
return this.renderIconOnlyButton()
|
||||
|
||||
case ButtonType.ICONLABEL:
|
||||
return this.getIconLabelButton()
|
||||
return this.renderIconLabelButton()
|
||||
|
||||
case ButtonType.Confirm:
|
||||
return this.getConfirmButton()
|
||||
return this.renderConfirmButton()
|
||||
|
||||
case ButtonType.NORMAL:
|
||||
return this.getNormalButton()
|
||||
return this.renderNormalButton()
|
||||
|
||||
case ButtonType.PURE:
|
||||
return this.getPureButton()
|
||||
return this.renderPureButton()
|
||||
|
||||
case ButtonType.TEXT:
|
||||
return this.getTextButton()
|
||||
return this.renderTextButton()
|
||||
|
||||
case ButtonType.ICON:
|
||||
return this.getIconButton()
|
||||
return this.renderIconButton()
|
||||
|
||||
case ButtonType.GHOST:
|
||||
return this.getGhostButton()
|
||||
return this.renderGhostButton()
|
||||
|
||||
case ButtonType.SPECIAL:
|
||||
return this.getSpecialButton()
|
||||
return this.renderSpecialButton()
|
||||
|
||||
default:
|
||||
console.error('unhanled 【star-button】 type')
|
||||
|
|
|
|||
|
|
@ -75,9 +75,19 @@ export class PanelButton extends LitElement {
|
|||
<star-button type="normal" variant="warn" size="large" label="警告按钮"></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="normal" variant="primary" size="large" label="很长很长的强调按钮"></star-button>
|
||||
<star-button type="normal" variant="default" size="large" label="很长很长的普通按钮"></star-button>
|
||||
<star-button type="normal" variant="warn" size="large" label="很长很长的警告按钮"></star-button>
|
||||
<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 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" 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-li>
|
||||
<star-li type="base">
|
||||
<star-button type="normal" variant="primary" size="extralarge" label="应用"></star-button>
|
||||
<star-button type="normal" variant="default" size="extralarge" label="最大号按钮"></star-button>
|
||||
<star-button type="normal" variant="warn" size="extralarge" label="最大号按钮"></star-button>
|
||||
<star-button type="normal" width="100px" size="small" label="自定义长度100px(最小为200px)"></star-button>
|
||||
<star-button type="normal" width="400px" size="middle" label="自定义长度400px"></star-button>
|
||||
<star-button type="normal" width="600px" size="large" label="自定义长度600px(最小为520px)"></star-button>
|
||||
</star-li>
|
||||
</star-ul>
|
||||
|
||||
<h3>使用场景:直接放在图形背景或毛玻璃背景上的按钮</h3>
|
||||
<star-ul type="onlyheader" title="Pure类型不同大小按钮及禁用按钮">
|
||||
<star-li type="base">
|
||||
<star-button type="pure" size="small" icon="bug"></star-button>
|
||||
<star-button type="pure" 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="bug"></star-button>
|
||||
<star-button type="pure" variant="primary" size="small" icon="delete"></star-button>
|
||||
<star-button type="pure" variant="primary" size="small" icon="delete" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" size="middle" icon="bug"></star-button>
|
||||
<star-button type="pure" 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="bug"></star-button>
|
||||
<star-button type="pure" variant="primary" size="middle" icon="delete"></star-button>
|
||||
<star-button type="pure" variant="primary" size="middle" icon="delete" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" size="large" icon="bug"></star-button>
|
||||
<star-button type="pure" 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="bug"></star-button>
|
||||
<star-button type="pure" variant="primary" size="large" icon="delete"></star-button>
|
||||
<star-button type="pure" variant="primary" size="large" icon="delete" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" size="extralarge" icon="bug"></star-button>
|
||||
<star-button type="pure" 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="bug"></star-button>
|
||||
<star-button type="pure" variant="default" size="extralarge" icon="delete"></star-button>
|
||||
<star-button type="pure" variant="default" size="extralarge" icon="delete" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" 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="添"></star-button>
|
||||
<star-button type="pure" variant="primary" size="small" icon="bug" label="添" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" 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="添加"></star-button>
|
||||
<star-button type="pure" variant="primary" size="small" icon="bug" label="添加" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" 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="添加组件"></star-button>
|
||||
<star-button type="pure" variant="primary" size="small" icon="bug" label="添加组件" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" 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="添加组件"></star-button>
|
||||
<star-button type="pure" variant="establish" size="small" icon="bug" label="添加组件" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" size="middle" icon="bug" label="添加组件"></star-button>
|
||||
<star-button type="pure" size="middle" 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-button type="pure" variant="primary" size="small" icon="bug" label="很长名字的组件"></star-button>
|
||||
<star-button type="pure" variant="primary" size="small" icon="bug" label="很长名字的组件" disabled></star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" size="large" 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="添加组件"></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-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" disabled></star-button>
|
||||
</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 type="onlyheader" title="Special类型按钮">
|
||||
|
|
@ -219,16 +230,16 @@ export class PanelButton extends LitElement {
|
|||
|
||||
<star-ul type="onlyheader" title="插入静态图标的Pure、Icon、Ghost按钮">
|
||||
<star-li type="base">
|
||||
<star-button type="pure" size="small">${staticSvg}</star-button>
|
||||
<star-button type="pure" size="middle">${staticSvg}</star-button>
|
||||
<star-button type="pure" size="large">${staticSvg}</star-button>
|
||||
<star-button type="pure" size="extralarge">${staticSvg}</star-button>
|
||||
<star-button type="pure" variant="default" size="small">${staticSvg}</star-button>
|
||||
<star-button type="pure" variant="default" size="middle">${staticSvg}</star-button>
|
||||
<star-button type="pure" variant="default" size="large">${staticSvg}</star-button>
|
||||
<star-button type="pure" variant="default" size="extralarge">${staticSvg}</star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<star-button type="pure" size="small">${staticPowerSvg}</star-button>
|
||||
<star-button type="pure" size="middle">${staticPowerSvg}</star-button>
|
||||
<star-button type="pure" size="large">${staticPowerSvg}</star-button>
|
||||
<star-button type="pure" size="extralarge">${staticPowerSvg}</star-button>
|
||||
<star-button type="pure" variant="default" size="small">${staticPowerSvg}</star-button>
|
||||
<star-button type="pure" variant="default" size="middle">${staticPowerSvg}</star-button>
|
||||
<star-button type="pure" variant="default" size="large">${staticPowerSvg}</star-button>
|
||||
<star-button type="pure" variant="default" size="extralarge">${staticPowerSvg}</star-button>
|
||||
</star-li>
|
||||
<star-li type="base">
|
||||
<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="middle">${staticSvg}</star-button>
|
||||
<star-button type="ghost" size="large">${staticSvg}</star-button>
|
||||
<star-button type="ghost" size="extralarge">${staticSvg}</star-button>
|
||||
</star-li>
|
||||
</star-ul>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue