svelte-chota
v1.8.6
Published
Svelte UI components based on super lightweight chota CSS framework.
Downloads
409
Maintainers
Readme
svelte-chota
Svelte UI components based on the super light-weight chota CSS framework.
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
- Svelte-chota documentation.
- chota documentation.
Installation
You should install two packages:
chota
- css framework itselfsvelte-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>