Wondering what’s next for npm?Check out our public roadmap! »

    svelte-chota

    1.8.4 • Public • Published

    svelte-chota

    Svelte UI components based on the super light-weight chota CSS framework.

    npm npm

    Why chota?

    When you decide to use Svelte in your projects, you expect very tiny bundles of code.

    chota is a super light-weight CSS framework, which adds only ~3kb of gzipped code to your CSS bundle.

    Svelte-chota is a UI kit for easily using chota in your Svelte projects.

    Documentation

    Installation

    You should install two packages:

    • chota - css framework itself
    • svelte-chota - Svelte components for chota
    npm install -D chota svelte-chota

    Then open the app root file (usually App.svelte) and add chota import at the top of a <script> block:

    <script>
        import 'chota';
        ...
    </script>

    Usage

    Just import the necessary components from the svelte-chota package in your components:

    <script>
        import {Input,Button} from 'svelte-chota';
    </script>
    
    <Input placeholder="What do you want?" /> <Button>Find</Button>

    Events handlers

    You can use any on:eventname directive with any components:

    <script>
        import {Button} from 'svelte-chota';
        let button_text = 'Hover me';
    </script>
    
    <Button 
        on:mouseenter={ e => button_text="Don't touch me!" }
        on:mouseleave={ e => button_text="Ok, hover me again" }
    >{button_text}</Button>

    Attributes

    Any attribute can be passed to the component, even the class attribute.

    <script>
        import {Card} from 'svelte-chota';
    </script>
    
    <Card class="is-rounded text-center" style="height:100px; width:100px" title="Hello">
        <h1>Hey!</h1>
    </Card>

    Install

    npm i svelte-chota

    DownloadsWeekly Downloads

    285

    Version

    1.8.4

    License

    MIT

    Unpacked Size

    110 kB

    Total Files

    24

    Last publish

    Collaborators

    • avatar