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>
import FancyButton from './FancyButton.svelte';
import CustomButton from './CustomButton.svelte';
function handleClick() {
alert('clicked');
}
</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>
import FancyButton from './FancyButton.svelte';
import CustomButton from './CustomButton.svelte';
function handleClick() {
alert('clicked');
}
</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>
import FancyButton from './FancyButton.svelte';
import CustomButton from './CustomButton.svelte';
function handleClick() {
alert('clicked');
}
</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.
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
<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: [{
code: "avoid-is",
message: "The 'is' attribute is not supported cross-browser and should be avoided",
pos: 97,
pos: 98,
start: {
character: 97,
character: 98,
column: 8,
line: 7
},
end: {
character: 114,
column: 25,
character: 116,
column: 26,
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"/>
<script>
import './fancy-button.js';
import './custom-button.js';
</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 button = el.shadowRoot.querySelector('button');
assert.ok(button instanceof customElements.get('fancy-button'));
assert.ok(button instanceof customElements.get('custom-button'));
}
Loading…
Cancel
Save