按钮。用于替代原生button
。
<!-- 引入 -->
<script type="module">
import './node_modules/xy-ui/components/xy-button.js';
</script>
<!-- 使用 -->
<xy-button>button</xy-button>
按钮有5种风格,分别为primary
,dashed
,flat
,danger
和默认。
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
属性时,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>
此外,还可以设置download
、target
和rel
属性,同原生a
标签。
download
<xy-button href="/img/Gokou Ruri.gif" download="Gokou Ruri">download</xy-button>
通过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操作get
、set
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>
<xy-button>button1</xy-button>
<xy-button>button2</xy-button>
<xy-button>button3</xy-button>
<xy-button>button4</xy-button>
</xy-button-group>
可以给按钮添加toggle
属性,来实现简单的按钮状态切换。
可以简单的通过checked
属性改变样式。
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
属性即可让按钮处于加载状态,处于加载状态所有事件会被禁用,类似于disabled
loading
<xy-button type="primary" loading>loading</xy-button>
JavaScript操作get
、set
btn.loading;
btn.loading = false;
btn.loading = true;
//原生属性操作
btn.getAttribute('loading');
btn.setAttribute('loading','');
btn.removeAttribute('loading');
当需要在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>
当只有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
属性将使按钮适合其父宽度。
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;
}
与普通button
标签一致。
focus
、blur
后的回调事件。
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)
})
onclick
、onmousedown
等等,使用方式同上。
用于主动聚焦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
来控制按钮尺寸
primary
<style>
.custom-button2{
font-size:30px;
}
</style>
<xy-button type="primary" class="custom-button2">primary</xy-button>
大部分组件均可通过
font-size
来控制组件尺寸
此外,所有组件均有主题颜色themeColor
,通过CSS
自定义属性实现
详细可参考主题。