Skip to content

Latest commit

 

History

History
408 lines (305 loc) · 10.1 KB

xy-button.md

File metadata and controls

408 lines (305 loc) · 10.1 KB

xy-button

按钮。用于替代原生button

使用方式

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

风格type

按钮有5种风格,分别为primarydashedflatdanger和默认。

primary dashed flat danger default

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

链接href

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

visit xy-ui visit xy-ui visit xy-ui visit xy-ui

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

此外,还可以设置downloadtargetrel属性,同原生a标签。

download

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

禁用disabled

通过disabled可以禁用按钮,禁用后该按钮上的事件失效。

primary

dashed

flat

default

visit xy-ui

<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操作getset

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

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

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

按钮组xy-button-group

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

button1 button2 button3 button4

button1 button2 button3 button4

button1 button2 button3 button4

button1 button2 button3 button4

button1 button2 button3 button4
<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>

状态切换toggle

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

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

<style> .button-toggle[checked]{ background:var(--themeColor); color:#fff; } </style>

toggle button

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

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

like

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

加载loading

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

loading

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

JavaScript操作getset

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

图标icon

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

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

like search back link

<xy-button type="primary" icon="heart">like</xy-button>
<xy-button type="dashed" icon="search">search</xy-button>
<xy-button type="flat" icon="left">back</xy-button>
<xy-button icon="link">link</xy-button>

JavaScript操作set

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

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

heart right

<xy-button>heart  <xy-icon name="heart"></xy-icon></xy-button>
<xy-button>right  <xy-icon name="right"></xy-icon></xy-button>

形状shape

当只有icon时,可配合shape=circle属性,实现圆形图标按钮。

<xy-button type="primary" icon="heart" shape="circle"></xy-button>
<xy-button type="dashed" icon="heart" shape="circle"></xy-button>
<xy-button type="flat" icon="heart" shape="circle"></xy-button>
<xy-button icon="heart" shape="circle"></xy-button>

块状block

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

primary dashed flat default

<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>

当然该属性只是样式的重置,你可以通过CSS来实现

xy-button{
    diplay:flex;
}

事件event

与普通button标签一致。

onfocus、onblur

focusblur后的回调事件。

primary

<xy-button onfocus="XyMessage.info('focus')" onblur="XyMessage.info('blur')">primary</xy-button>

其他触发方式

btn.onfocus = function(ev){
    console.log(ev)
}

btn.addEventListener('focus',function(ev){
    console.log(ev)
})

其他事件

onclickonmousedown等等,使用方式同上。

方法function

focus

用于主动聚焦focus,聚焦以后可以响应键盘事件,Enter可以触发click事件。

primary 主动聚焦

btn.focus();

自定义样式

目前可以修改的部分样式如下

:host{ 
    display:inline-flex; 
    padding:0 .8em; 
    box-sizing:border-box; 
    height: 36px; 
    align-items:center;
    justify-content: center;
    border:1px solid #ddd; 
    font-size: 14px; 
    color: #333;  
    border-radius: 3px; 
}

下面是一个自定义样式的按钮

<style> .custom-button{ font-size:20px; border-radius:50%; height:100px; width:100px; } </style>

primary

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

也可以通过修改font-size来控制按钮尺寸

<style> .custom-button2{ font-size:30px; } </style>

primary

<style>
.custom-button2{
    font-size:30px;
}
</style>
<xy-button type="primary" class="custom-button2">primary</xy-button>

大部分组件均可通过font-size来控制组件尺寸

此外,所有组件均有主题颜色themeColor,通过CSS自定义属性实现

详细可参考主题