- Notifications
You must be signed in to change notification settings - Fork20
Svelte UI components based on super lightweight chota CSS framework.
License
AlexxNB/svelte-chota
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
Svelte UI components based on the super light-weightchota CSS framework.
When you decide to useSvelte 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 usingchota in yourSvelte projects.
- Svelte-chotadocumentation.
- chotadocumentation.
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 (usuallyApp.svelte
) and addchota
import at the top of a<script>
block:
<script>import'chota'; ...</script>
Just import the necessary components from the svelte-chota package in your components:
<script>import{Input,Button}from'svelte-chota';</script><Inputplaceholder="What do you want?"/><Button>Find</Button>
You can use anyon:eventname
directive with any components:
<script>import{Button}from'svelte-chota';letbutton_text='Hover me';</script><Buttonon:mouseenter={e => button_text="Don't touch me!" } on:mouseleave={ e => button_text="Ok, hover me again" }>{button_text}</Button>
Any attribute can be passed to the component, even theclass
attribute.
<script>import{Card}from'svelte-chota';</script><Cardclass="is-rounded text-center"style="height:100px; width:100px"title="Hello"><h1>Hey!</h1></Card>
About
Svelte UI components based on super lightweight chota CSS framework.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors7
Uh oh!
There was an error while loading.Please reload this page.