Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryu-man/svantic
Svantic is a set of UI components for Svelte framework based on the Fomantic-UI library
https://github.com/ryu-man/svantic
css fomantic-ui html javascript semantic-ui svelte ui ui-components
Last synced: about 2 months ago
JSON representation
Svantic is a set of UI components for Svelte framework based on the Fomantic-UI library
- Host: GitHub
- URL: https://github.com/ryu-man/svantic
- Owner: ryu-man
- License: mit
- Created: 2021-01-31T20:32:28.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-16T10:32:05.000Z (over 2 years ago)
- Last Synced: 2024-07-17T17:52:17.632Z (2 months ago)
- Topics: css, fomantic-ui, html, javascript, semantic-ui, svelte, ui, ui-components
- Language: Svelte
- Homepage:
- Size: 6.74 MB
- Stars: 16
- Watchers: 3
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A set of UI components for Svelte framework based on Fomantic-UI library
## Documentation
-- Coming soon --
## Installation
```bash
# npm
npm install svantic
# yarn
yarn add svantic
```
## Quick start with new project
Create a new project based on [sveltejs/template](https://github.com/sveltejs/template)
```bash
npx degit sveltejs/template svantic-app
cd svantic-app
# npm
npm install
# yarn
yarn install
```
Or you can use our [svantic template](https://github.com/ryu-man/svantic-template), it comes pre-configured
```bash
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:
```js
output: {
...,
dir: "path to output directory",
entryFileNames: "index.js",
chunkFileNames: "[name].js"
},
```
## Breaking Change
### Svantic component
used to load global scripts and stylesheets, must mounted on the top level of the app
```html
import { Svantic, ... } from 'svantic'
//
...
```
### onMount prop
allows acces to the top level dom elem instead of module controller
### module controller
to controll a module you use bind:this={varname} on the component to save an instance of its controller
### controllable store
is a reactive store that allows subscribtion to a module and execute a callback when the component is mounted
```html
// import modules
import { Dropdown, controllable, Svantic } from 'svantic';
const dropdownController = controllable(controller=>{
// do something
})
// ...
```
## Usage
Add svantic and modify `src/App.svelte` file in the following way
```html
// import any components you want
import { Button, Svantic } from 'svantic'
Hello world
```
or
```html
// import modules
import { Dropdown, initDropdown, controllable, Icon, Svantic } from 'svantic';
// call this function if you want to use Module.SubModule syntax, ex: Dropdown.Item
initDropdown()
const dropdownController = controllable(controller=>{
// called when the component is mounted and ready
// access the controller and manupilate dropdown
})
// mount Svantic component on the top level of the app
// onMount: allows control module behaviors
// settings: pass module settings
{}}
settings={{}}
selection >
Select language
English
Arabic
Spanish
German
```
Another way to use Module.SubModule syntax
```html
import { Icon, Svantic } from 'svantic'
import * as Dropdown from 'svantic/modules/dropdown';
Select language
English
Arabic
Spanish
German
```
## 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`
## License
Code released under [MIT license](./Licence)
Copyright © - ryu-man.