sva

svantic

Svantic is a set of UI components for Svelte framework based on the Fomantic-UI library

Showing:

Popularity

Downloads/wk

2

GitHub Stars

8

Maintenance

Last Commit

18d ago

Contributors

2

Package

Dependencies

1

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

SVANTIC A set of UI components for Svelte framework based on Fomantic-UI library

npm version license

Documentation

-- Coming soon --

Installation

# npm
npm install svantic
# yarn
yarn add svantic

Quick start with new project

Create a new project based on sveltejs/template

npx degit sveltejs/template svantic-app
cd svantic-app
# npm
npm install
# yarn
yarn install

Or you can use our svantic template, it comes pre-configured

npx degit ryu-man/svantic-template#main svantic-app
cd svantic-app
# npm
npm install
# yarn
yarn install

NOTE: There are of course other ways to set up a project using svelte. This is just the quickest way to start.

Rollup Configuration

Because svantic uses dymanic import for better footprint and performance you have to configure rollup as following:


output: {
  ...,
  dir: "path to output directory",
  entryFileNames: "index.js",
  chunkFileNames: "[name].js"
},

Usage

Add svantic and modify src/App.svelte file in the following way

<script>
  // import any components you want
  import { Button } from 'svantic'
</script>

<button>Hello world</button>
<script>
    // import modules
    import { Dropdown, Icon } from 'svantic';

</script>

// Every module have two props: onMount{function} and setting{object}

// onMount function: allows control module behaviors
// settings: pass module settings
<Dropdown selection onMount={(controller) => {}} settings={{}}>
    <Icon name="caret down" />
    <Dropdown.text>Select language</Dropdown.text>
    <Dropdown.menu>
        <Dropdown.item>English</Dropdown.item>
        <Dropdown.item>Arabic</Dropdown.item>
        <Dropdown.item>Spanish</Dropdown.item>
        <Dropdown.item>German</Dropdown.item>
    </Dropdown.menu>
</Dropdown>

...then start Rollup

npm run dev

Navigate to localhost:5000

Development

  1. Clone this repo: git clone https://github.com/ryu-man/svantic.git
  2. Install dependencies: npm i
  3. Start building fomantic: npm run build:fomantic
  4. Start the automated build: npm run build
  5. Open url that console prints in your browser

License

Code released under MIT license

Copyright © - ryu-man.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial