css 的 Svelte 自定义按钮组件或样式

Question

我是 Svelte 的新手，我想为网站构建一个主题。当我希望按钮具有特定的外观和动画时，我是创建一个新的 Button 组件并在每次使用插槽时使用它，还是只为这个按钮创建一个 class，其中包含一些 css 代码和使用标准 html 按钮？

当然我可以两种方式都做，但在 svelte 中更喜欢哪一种？

Answer 1

您可以使用此策略为您的应用程序设置主题。您可以使用 $$restProps 来捕获您的类并且在您的组件中，您还可以为按钮设置事件。

App.svelte

<script>
    import Button from "./Button.svelte"
</script>


<Button class="primary">
    My Button
</Button>

<Button class="danger">
    My Button
</Button>

Button.svelte

<script>
    let buttonProps = {
    class:[$$restProps.class]
    }
</script>
    <button on:click
            on:mouseover
            on:mouseenter
            on:mouseleave
        {...buttonProps}>
            <slot/>
    </button>

<style>
    .primary{
        color:green;
    }
    .danger {
        color:red;
    }
</style>

示例REPL。组件是构建大型应用程序的正确方式。

css 的 Svelte 自定义按钮组件或样式

Svelte custom button component or style with css

components

themes

button

svelte