mirror of https://github.com/sveltejs/svelte
Rich Harris
7 years ago
parent
26b3e5171b
commit
b2c3eb7ba8
@ -1 +1,70 @@
|
||||
TODO
|
||||
<script>
|
||||
let language = "english";
|
||||
|
||||
const translations = {
|
||||
english: {
|
||||
tooltip: "Switch Languages",
|
||||
},
|
||||
latin: {
|
||||
tooltip: "Itchsway Anguageslay",
|
||||
}
|
||||
};
|
||||
|
||||
function tooltip(node, text) {
|
||||
const tooltip = document.createElement('div');
|
||||
tooltip.textContent = text;
|
||||
|
||||
Object.assign(tooltip.style, {
|
||||
position: 'absolute',
|
||||
background: 'black',
|
||||
color: 'white',
|
||||
padding: '0.5em 1em',
|
||||
fontSize: '12px',
|
||||
pointerEvents: 'none',
|
||||
transform: 'translate(5px, -50%)',
|
||||
borderRadius: '2px',
|
||||
transition: 'opacity 0.4s'
|
||||
});
|
||||
|
||||
function position() {
|
||||
const { top, right, bottom } = node.getBoundingClientRect();
|
||||
tooltip.style.top = `${(top + bottom) / 2}px`;
|
||||
tooltip.style.left = `${right}px`;
|
||||
}
|
||||
|
||||
function append() {
|
||||
document.body.appendChild(tooltip);
|
||||
tooltip.style.opacity = 0;
|
||||
setTimeout(() => tooltip.style.opacity = 1);
|
||||
position();
|
||||
}
|
||||
|
||||
function remove() {
|
||||
tooltip.remove();
|
||||
}
|
||||
|
||||
node.addEventListener('mouseenter', append);
|
||||
node.addEventListener('mouseleave', remove);
|
||||
|
||||
return {
|
||||
update(text) {
|
||||
tooltip.textContent = text;
|
||||
position();
|
||||
},
|
||||
|
||||
destroy() {
|
||||
tooltip.remove();
|
||||
node.removeEventListener('mouseenter', append);
|
||||
node.removeEventListener('mouseleave', remove);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function toggleLanguage() {
|
||||
language = language === 'english' ? 'latin' : 'english'
|
||||
}
|
||||
</script>
|
||||
|
||||
<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
|
||||
{language}
|
||||
</button>
|
||||
@ -1 +1,70 @@
|
||||
TODO
|
||||
<script>
|
||||
let language = "english";
|
||||
|
||||
const translations = {
|
||||
english: {
|
||||
tooltip: "Switch Languages",
|
||||
},
|
||||
latin: {
|
||||
tooltip: "Itchsway Anguageslay",
|
||||
}
|
||||
};
|
||||
|
||||
function tooltip(node, text) {
|
||||
const tooltip = document.createElement('div');
|
||||
tooltip.textContent = text;
|
||||
|
||||
Object.assign(tooltip.style, {
|
||||
position: 'absolute',
|
||||
background: 'black',
|
||||
color: 'white',
|
||||
padding: '0.5em 1em',
|
||||
fontSize: '12px',
|
||||
pointerEvents: 'none',
|
||||
transform: 'translate(5px, -50%)',
|
||||
borderRadius: '2px',
|
||||
transition: 'opacity 0.4s'
|
||||
});
|
||||
|
||||
function position() {
|
||||
const { top, right, bottom } = node.getBoundingClientRect();
|
||||
tooltip.style.top = `${(top + bottom) / 2}px`;
|
||||
tooltip.style.left = `${right}px`;
|
||||
}
|
||||
|
||||
function append() {
|
||||
document.body.appendChild(tooltip);
|
||||
tooltip.style.opacity = 0;
|
||||
setTimeout(() => tooltip.style.opacity = 1);
|
||||
position();
|
||||
}
|
||||
|
||||
function remove() {
|
||||
tooltip.remove();
|
||||
}
|
||||
|
||||
node.addEventListener('mouseenter', append);
|
||||
node.addEventListener('mouseleave', remove);
|
||||
|
||||
return {
|
||||
update(text) {
|
||||
tooltip.textContent = text;
|
||||
position();
|
||||
},
|
||||
|
||||
destroy() {
|
||||
tooltip.remove();
|
||||
node.removeEventListener('mouseenter', append);
|
||||
node.removeEventListener('mouseleave', remove);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function toggleLanguage() {
|
||||
language = language === 'english' ? 'latin' : 'english'
|
||||
}
|
||||
</script>
|
||||
|
||||
<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
|
||||
{language}
|
||||
</button>
|
||||
@ -0,0 +1,29 @@
|
||||
<script>
|
||||
let current = 'foo';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #ff3e00;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button
|
||||
class="{current === 'foo' ? 'active' : ''}"
|
||||
on:click="{() => current = 'foo'}"
|
||||
>foo</button>
|
||||
|
||||
<button
|
||||
class="{current === 'bar' ? 'active' : ''}"
|
||||
on:click="{() => current = 'bar'}"
|
||||
>bar</button>
|
||||
|
||||
<button
|
||||
class="{current === 'baz' ? 'active' : ''}"
|
||||
on:click="{() => current = 'baz'}"
|
||||
>baz</button>
|
||||
@ -0,0 +1,29 @@
|
||||
<script>
|
||||
let current = 'foo';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #ff3e00;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button
|
||||
class:active="{current === 'foo'}"
|
||||
on:click="{() => current = 'foo'}"
|
||||
>foo</button>
|
||||
|
||||
<button
|
||||
class:active="{current === 'bar'}"
|
||||
on:click="{() => current = 'bar'}"
|
||||
>bar</button>
|
||||
|
||||
<button
|
||||
class:active="{current === 'baz'}"
|
||||
on:click="{() => current = 'baz'}"
|
||||
>baz</button>
|
||||
@ -0,0 +1,23 @@
|
||||
---
|
||||
title: The class directive
|
||||
---
|
||||
|
||||
Like any other attribute, you can specify classes with a JavaScript attribute, seen here:
|
||||
|
||||
```html
|
||||
<button
|
||||
class="{current === 'foo' ? 'active' : ''}"
|
||||
on:click="{() => current = 'foo'}"
|
||||
>foo</button>
|
||||
```
|
||||
|
||||
This is such a common pattern in UI development that Svelte includes a special directive to simplify it:
|
||||
|
||||
```html
|
||||
<button
|
||||
class:active="{current === 'foo'}"
|
||||
on:click="{() => current = 'foo'}"
|
||||
>foo</button>
|
||||
```
|
||||
|
||||
The `active` class is added to the element whenever the value of the expression is truthy, and removed when it's falsy.
|
||||
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
let big = false;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.big {
|
||||
font-size: 4em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<label>
|
||||
<input type=checkbox bind:checked={big}>
|
||||
big
|
||||
</label>
|
||||
|
||||
<div class:big={big}>
|
||||
some {big ? 'big' : 'small'} text
|
||||
</div>
|
||||
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
let big = false;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.big {
|
||||
font-size: 4em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<label>
|
||||
<input type=checkbox bind:checked={big}>
|
||||
big
|
||||
</label>
|
||||
|
||||
<div class:big>
|
||||
some {big ? 'big' : 'small'} text
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
---
|
||||
title: Shorthand class directive
|
||||
---
|
||||
|
||||
Often, the name of the class will be the same as the name of the value it depends on:
|
||||
|
||||
```html
|
||||
<div class:big={big}>
|
||||
<!-- ... -->
|
||||
</div>
|
||||
```
|
||||
|
||||
In those cases we can use a shorthand form:
|
||||
|
||||
```html
|
||||
<div class:big>
|
||||
<!-- ... -->
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"title": "Classes"
|
||||
}
|
||||
Loading…
Reference in new issue