xy-ui
搜索 K

Appearance

目录

button ​

按钮。用于替代原生button。

使用方式 ​

html
<!-- 引入 -->
<script type="module">
    import '../components/button/index.js';
    import '../components/button-group/index.js';
</script>
<!-- 使用 -->
<xy-button>button</xy-button>

风格type ​

按钮有5种风格，分别为primary，dashed，flat，link和默认。

primarydashedflatlinkdefault
html
<xy-button type="primary">primary</xy-button>
<xy-button type="dashed">dashed</xy-button>
<xy-button type="flat">flat</xy-button>
<xy-button type="link">link</xy-button>
<xy-button>default</xy-button>

危险按钮danger ​

添加danger属性可以变成红色

primarydashedflatlinkdefault
html
<xy-button type="primary" danger>primary</xy-button>
<xy-button type="dashed" danger>dashed</xy-button>
<xy-button type="flat" danger>flat</xy-button>
<xy-button type="link" danger>link</xy-button>
<xy-button danger>default</xy-button>

幽灵按钮ghost ​

幽灵按钮将按钮的内容反色，常用在深色背景上。

primarydashedflatlinkdefault
html
<xy-button type="primary" ghost>primary</xy-button>
<xy-button type="dashed" ghost>dashed</xy-button>
<xy-button type="flat" ghost>flat</xy-button>
<xy-button type="link" ghost>link</xy-button>
<xy-button ghost>default</xy-button>

尺寸size ​

按钮有大、中、小三种尺寸，分别为large、default（默认）、small。

largedefaultsmall
primarydashedflatdefault
html
<xy-button type="primary" size="large">primary</xy-button>
<xy-button type="primary" size="small">primary</xy-button>
<xy-button type="primary">primary</xy-button>

链接href ​

当设置href属性时，xy-button内部会渲染成a标签。

visit xy-uivisit xy-uivisit xy-uivisit xy-uivisit xy-ui
html
<xy-button href="https://github.com/XboxYan/xy-ui">visit xy-ui</xy-button>

此外，还可以设置download、target和rel属性，同原生a标签。

download
html
<xy-button href="/img/Gokou Ruri.gif" download="Gokou Ruri">download</xy-button>

禁用disabled ​

通过disabled可以禁用按钮，禁用后该按钮上的事件失效，a链接也会失效。

禁用
primarydashedflatlinkvisit xy-uidefault
html
<xy-button disabled type="primary">primary</xy-button>
<xy-button disabled type="dashed">dashed</xy-button>
<xy-button disabled type="flat">flat</xy-button>
<xy-button disabled >default</xy-button>

JavaScript操作get、set

js
btn.disabled;//获取
btn.disabled = false;
btn.disabled = true;
//原生属性操作
btn.getAttribute('disabled');
btn.setAttribute('disabled','');
btn.removeAttribute('disabled');
btn.toggleAttribute('disabled', [force]);

所有组件关于属性的获取和设置均类似，如下

js
com.props;//获取
com.props = newProps;
//原生属性操作
com.setAttribute('props',newProps);
com.removeAttribute('props');

加载loading ​

添加loading属性即可让按钮处于加载状态，处于加载状态所有事件会被禁用，类似于disabled

loading
html
<xy-button type="primary" loading>loading</xy-button>

JavaScript操作get、set

js
btn.loading;
btn.loading = false;
btn.loading = true;
//原生属性操作
btn.getAttribute('loading');
btn.setAttribute('loading','');
btn.removeAttribute('loading');
btn.toggleAttribute('loading', [force]);

图标icon ​

当需要在xy-button内嵌入xy-icon时，可以设置icon属性。

关于xy-icon的取值可以查看icon

heartthumbs-upmagnifying-glasslink
html
<xy-button type="primary" icon="heart">heart</xy-button>
<xy-button type="dashed" icon="thumbs-up">thumbs-up</xy-button>
<xy-button type="flat" icon="solid/magnifying-glass">magnifying-glass</xy-button>
<xy-button icon="solid/link">link</xy-button>

JavaScript操作set

js
btn.icon = 'name';
//原生属性操作
btn.setAttribute('icon','name');

当然，上述图标均位于文字左侧，如果想位于文字右侧，你可以直接嵌套xy-icon组件。

heartright
html
<xy-button>heart<xy-icon name="heart"></xy-icon></xy-button>
<xy-button>right<xy-icon name="solid/angle-right"></xy-icon></xy-button>

形状shape ​

有 3 种形状，分别是normal、round、circle 其中，当只有icon时，可配合shape=circle属性，实现圆形图标按钮。

heartheart
html
<xy-button icon="heart" shape="circle"></xy-button>
<xy-button icon="heart" shape="round">heart</xy-button>
<xy-button icon="heart">heart</xy-button>

块状block ​

block属性将使按钮适合其父宽度。

primarydashedflatdefault
html
<xy-button type="primary" block>primary</xy-button>
<xy-button type="dashed" block>dashed</xy-button>
<xy-button type="flat" block>flat</xy-button>
<xy-button block>default</xy-button>

自定义样式::part(button) ​

需要注意的是，xy-button本身不包含任意样式，如果需要自定义按钮本身样式，需要深入到shadow dom中，这里暴露了内置伪元素::part(button)用来自定义样式

TIPS

::part可以允许自定义 shadow dom 中指定元素的样式，https://developer.mozilla.org/en-US/docs/Web/CSS/::part

内部结构如下（可查看控制台）：

html
<xy-button>
  # shadow-root
    <button part="button">
primary
html
<style>
.custom-button::part(button){
    font-size:20px;
    border-radius:50%;
    height:100px;
    width:100px;
}
</style>
<xy-button type="primary" class="custom-button">primary</xy-button>

状态切换toggle ​

可以给按钮添加toggle属性，来实现简单的按钮状态切换。

可以简单的通过checked属性改变样式。

toggle button
html
<style>
.button-toggle[checked]::part(button){
    background:var(--primary-color);
    color:#fff;
}
</style>
<xy-button toggle class="button-toggle">toggle button</xy-button>

也可以通过js获取到checked属性。

like
js
btn.addEventListener('click',function(ev){
    if(this.checked){
        //do something
    }else{
        //do something
    }
})

按钮组xy-button-group ​

<xy-button-group>可以将一组同类型的按钮组合起来。

需要引入button-group

js
<script type="module">
    import '../components/button-group/index.js';
</script>
button1button2button3button4button1button2button3button4button1button2button3button4button1button2button3button4button1button2button3button4
html
<xy-button-group>
    <xy-button>button1</xy-button>
    <xy-button>button2</xy-button>
    <xy-button>button3</xy-button>
    <xy-button>button4</xy-button>
</xy-button-group>

也支持整体禁用

禁用
button1button2button3button4
html
<xy-button-group disabled>
    <xy-button>button1</xy-button>
    <xy-button>button2</xy-button>
    <xy-button>button3</xy-button>
    <xy-button>button4</xy-button>
</xy-button-group>

事件event ​

与普通button标签一致。

MIT License.

Copyright © 2023～present xboxyan