site: turn fancybutton into custombutton (#4476)

pull/4472/head
Antony Jones 5 years ago committed by GitHub
parent dc3e9c4bed
commit 7831766fa0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,9 +1,9 @@
<script> <script>
import FancyButton from './FancyButton.svelte'; import CustomButton from './CustomButton.svelte';
function handleClick() { function handleClick() {
alert('clicked'); alert('clicked');
} }
</script> </script>
<FancyButton on:click={handleClick}/> <CustomButton on:click={handleClick}/>

@ -0,0 +1,22 @@
<style>
button {
height: 4rem;
width: 8rem;
background-color: #aaa;
border-color: #f1c40f;
color: #f1c40f;
font-size: 1.25rem;
background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
background-position: 100%;
background-size: 400%;
transition: background 300ms ease-in-out;
}
button:hover {
background-position: 0;
color: #aaa;
}
</style>
<button on:click>
Click me
</button>

@ -1,15 +0,0 @@
<style>
button {
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
padding: 0.5em 1em;
color: royalblue;
background: gold;
border-radius: 1em;
box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
</style>
<button on:click>
Click me
</button>

@ -1,9 +1,9 @@
<script> <script>
import FancyButton from './FancyButton.svelte'; import CustomButton from './CustomButton.svelte';
function handleClick() { function handleClick() {
alert('clicked'); alert('clicked');
} }
</script> </script>
<FancyButton on:click={handleClick}/> <CustomButton on:click={handleClick}/>

@ -0,0 +1,22 @@
<style>
button {
height: 4rem;
width: 8rem;
background-color: #aaa;
border-color: #f1c40f;
color: #f1c40f;
font-size: 1.25rem;
background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
background-position: 100%;
background-size: 400%;
transition: background 300ms ease-in-out;
}
button:hover {
background-position: 0;
color: #aaa;
}
</style>
<button>
Click me
</button>

@ -1,15 +0,0 @@
<style>
button {
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
padding: 0.5em 1em;
color: royalblue;
background: gold;
border-radius: 1em;
box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
</style>
<button>
Click me
</button>

@ -1,9 +1,9 @@
<script> <script>
import FancyButton from './FancyButton.svelte'; import CustomButton from './CustomButton.svelte';
function handleClick() { function handleClick() {
alert('clicked'); alert('clicked');
} }
</script> </script>
<FancyButton on:click={handleClick}/> <CustomButton on:click={handleClick}/>

@ -0,0 +1,22 @@
<style>
button {
height: 4rem;
width: 8rem;
background-color: #aaa;
border-color: #f1c40f;
color: #f1c40f;
font-size: 1.25rem;
background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
background-position: 100%;
background-size: 400%;
transition: background 300ms ease-in-out;
}
button:hover {
background-position: 0;
color: #aaa;
}
</style>
<button on:click>
Click me
</button>

@ -1,15 +0,0 @@
<style>
button {
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
padding: 0.5em 1em;
color: royalblue;
background: gold;
border-radius: 1em;
box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
</style>
<button on:click>
Click me
</button>

@ -4,7 +4,7 @@ title: DOM event forwarding
Event forwarding works for DOM events too. Event forwarding works for DOM events too.
We want to get notified of clicks on our `<FancyButton>` — to do that, we just need to forward `click` events on the `<button>` element in `FancyButton.svelte`: We want to get notified of clicks on our `<CustomButton>` — to do that, we just need to forward `click` events on the `<button>` element in `CustomButton.svelte`:
```html ```html
<button on:click> <button on:click>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

@ -2,15 +2,15 @@ export default {
warnings: [{ warnings: [{
code: "avoid-is", code: "avoid-is",
message: "The 'is' attribute is not supported cross-browser and should be avoided", message: "The 'is' attribute is not supported cross-browser and should be avoided",
pos: 97, pos: 98,
start: { start: {
character: 97, character: 98,
column: 8, column: 8,
line: 7 line: 7
}, },
end: { end: {
character: 114, character: 116,
column: 25, column: 26,
line: 7 line: 7
} }
}] }]

@ -0,0 +1,2 @@
class CustomButton extends HTMLButtonElement {}
customElements.define('custom-button', CustomButton, { extends: 'button' });

@ -1,2 +0,0 @@
class FancyButton extends HTMLButtonElement {}
customElements.define('fancy-button', FancyButton, { extends: 'button' });

@ -1,7 +1,7 @@
<svelte:options tag="custom-element"/> <svelte:options tag="custom-element"/>
<script> <script>
import './fancy-button.js'; import './custom-button.js';
</script> </script>
<button is="fancy-button">click me</button> <button is="custom-button">click me</button>

@ -11,5 +11,5 @@ export default function (target) {
const el = target.querySelector('custom-element'); const el = target.querySelector('custom-element');
const button = el.shadowRoot.querySelector('button'); const button = el.shadowRoot.querySelector('button');
assert.ok(button instanceof customElements.get('fancy-button')); assert.ok(button instanceof customElements.get('custom-button'));
} }
Loading…
Cancel
Save