diff --git a/components/xy-button.js b/components/xy-button.js
index beea19f..74df49e 100644
--- a/components/xy-button.js
+++ b/components/xy-button.js
@@ -3,7 +3,7 @@ import './xy-icon.js';
export default class XyButton extends HTMLElement {
//https://mladenplavsic.github.io/css-ripple-effect
- static get observedAttributes() { return ['disabled','icon','loading'] }
+ static get observedAttributes() { return ['disabled','icon','loading','href'] }
constructor() {
super();
@@ -138,7 +138,7 @@ export default class XyButton extends HTMLElement {
transition: none;
}
:host([disabled]) a{
- visibility:hidden;
+ /*visibility:hidden;*/
}
<${this.href?'a':'button'} ${(this.download&&this.href)?'download="'+this.download+'"':''} ${this.href?'href="'+this.href+'" target="'+this.target+'" rel="'+this.rel+'"':''} class="btn" id="btn">${this.href?'a':'button'}>${!this.loading && this.icon && this.icon!='null'?'':''}
@@ -221,8 +221,14 @@ export default class XyButton extends HTMLElement {
if(name == 'disabled' && this.btn){
if(newValue!==null){
this.btn.setAttribute('disabled', 'disabled');
+ if(this.href){
+ this.btn.removeAttribute('href');
+ }
}else{
this.btn.removeAttribute('disabled');
+ if(this.href){
+ this.btn.href = this.href;
+ }
}
}
if( name == 'loading' && this.btn){
@@ -237,6 +243,11 @@ export default class XyButton extends HTMLElement {
if( name == 'icon' && this.ico){
this.ico.name = newValue;
}
+ if( name == 'href' && this.btn){
+ if(!this.disabled){
+ this.btn.href = newValue;
+ }
+ }
}
}
diff --git a/docs/xy-button.md b/docs/xy-button.md
index 21c6f5d..ba83313 100644
--- a/docs/xy-button.md
+++ b/docs/xy-button.md
@@ -38,22 +38,40 @@
visit xy-ui
visit xy-ui
+
```html
visit xy-ui
```
此外,还可以设置`download`、`target`和`rel`属性,同原生`a`标签。
+
+
+download
+
+```html
+download
+```
+
## 禁用`disabled`
通过`disabled`可以禁用按钮,禁用后该按钮上的事件失效。
primary
+
+
dashed
+
+
flat
+
+
default
+visit xy-ui
+
+
```html
primary
dashed
diff --git a/img/Gokou Ruri.gif b/img/Gokou Ruri.gif
new file mode 100644
index 0000000..2d46862
Binary files /dev/null and b/img/Gokou Ruri.gif differ