Svelte 官方入门教程(11) - 样式

上一讲是动画，动画这块是svelte的一个非常不错的亮点。今天讲下样式

一、类指令

与任何其他属性一样，您可以使用 JavaScript 属性指定类，如下所示：

<script>
	let current = 'foo';
</script>

<button
	class="{current === 'foo' ? 'selected' : ''}"
	on:click="{() => current = 'foo'}"
>foo</button>

<button
	class="{current === 'bar' ? 'selected' : ''}"
	on:click="{() => current = 'bar'}"
>bar</button>

<button
	class="{current === 'baz' ? 'selected' : ''}"
	on:click="{() => current = 'baz'}"
>baz</button>

<style>
	button {
		display: block;
	}

	.selected {
		background-color: #ff3e00;
		color: white;
	}
</style>

这是 UI 开发中的一种常见模式，Svelte 包含一个特殊指令来简化它：

<button
	class:selected="{current === 'foo'}"
	on:click="{() => current = 'foo'}"
>foo</button>

selected 类在表达式的值为真时添加到元素中，为假时删除它。

通过上面例子可以看出这个特殊指令就是class:样式名={expression}

二、class 指令简写形式

通常，如果说类的名称与它所依赖的值的名称相同，例如：

<div class:big={big}>
	<!-- ... -->
</div>

在这样的情况下，我们可以使用简写形式：

<div class:big>
	<!-- ... -->
</div>

三、行内/内联样式

除了在样式标签中添加样式外，您还可以使用样式属性为单个元素添加样式。 通常您会希望通过 CSS 进行样式设置，但样式属性对于动态样式非常有用，尤其是与 CSS 自定义属性结合使用时。
来看例子：

<script>
	let bgOpacity = 0.5;
	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
</script>

<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />

<p>This is a paragraph.</p>

<style>
	p {
		font-family: "Comic Sans MS", cursive;
		background: rgba(255, 62, 0, var(--opacity));
	}
</style>

将以下样式属性添加到p元素： style="color: {color}; --opacity: {bgOpacity};"

<p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>

太好了，现在您可以使用根据您的输入更改的变量来设置p的样式，而无需为每个可能的值创建一个类了。

REPL

四、style 指令

能够动态设置 CSS 属性很好。 但是，如果您必须编写一个长字符串，这可能会变得笨拙。 缺少任何分号等错误可能会使整个字符串无效。 因此，Svelte 提供了一种更好的方式来使用 style 指令编写内联样式。

依然使用上面的例子，将p的样式属性更改为以下内容：

<p 
	style:color 
	style:--opacity="{bgOpacity}"
>

style 指令与 class 指令有一些共同点。 当属性名称和变量名称相同时，您可以使用简写。 所以 style:color="{color}" 可以写成 style:color。

与 class 指令类似，如果您尝试通过 style 属性设置相同的属性，则 style 指令将优先。这其实就是告诉你style优先级高于class。

总结

本讲总体来说还是比较简单的，其实就是原生的class和style的加强版本。

• class指令和style指令在属性名称和变量名称相同可以简写
• style指令优先级高于class指令
• 内联样式对于动态样式非常有用，当然style指令更好些。
• 需要注意Props那一讲的时候说到了属性传递,我们需要注意class传递会报错的，作为保留字导致的，你可以使用$$props.class代替

子组件Nested.svelte

<script>
	export let class;
</script>

父组件

<script>
	import Nested from './Nested.svelte';
</script>

<Nested class="active"/>

上面的代码会报错Unexpected keyword 'class',解决的方案就是使用$$props.class代替

<script>
	export let answer;
</script>

<p class={$$props.class}>The answer is {answer}</p>
<style>
	.active {
		color:red;
	}
</style>