https://github.com/eddow/v-semantic

Semantic-ui2 + vue2
https://github.com/eddow/v-semantic

semantic vue

Last synced: about 2 months ago
JSON representation

Semantic-ui2 + vue2

• Host: GitHub
• URL: https://github.com/eddow/v-semantic
• Owner: eddow
• Created: 2017-08-23T14:22:41.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2020-09-15T16:53:33.000Z (about 4 years ago)
• Last Synced: 2024-07-25T13:51:55.111Z (2 months ago)
• Topics: semantic, vue
• Language: Vue
• Size: 6.36 MB
• Stars: 23
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# v-semantic

[![npm](https://img.shields.io/npm/v/v-semantic.svg)](https://www.npmjs.com/package/v-semantic)

Integration of [semantic-ui2](https://semantic-ui.com) with [vue.js2](https://vuejs.org/)

> To use a version of `Vue` <2.6.0, use `v-semantic` version 1

The purpose of the integration is to allow some logic-level approach - ex: the tables are defined by column and not by rows - and to integrate the `jQuery` for it to be invisible to the programer. `jQuery` of course still needs to be installed, but there is no need to use it.

The css-classes specific to a component are set as boolean properties of the component. These two codes are equivalent :

```html

Click me!

Click me!

```

There is a [live demo/preview](https://www.gitcdn.xyz/cdn/eddow/v-semantic/78d011372985bf06320a48d55f317dc9f6839327/demo/run/index.html#/)

## Installation

For usage:

```sh

npm install v-semantic --save

```

```typescript

import vs from 'v-semantic'

Vue.use(vs);

//- or -

import vs from 'v-semantic'

Vue.use(vs, {prefix: 'x'});

//- or -

import {Modal, Command, Button} from 'v-semantic'

@Component({

    components: {Modal, Button},

    directives: {Command}

})

```

Requiring the main library will export each components and directives, and a `default` that lets you `Vue.install(...)`.

The `prefix` (default `"s"`) option will be used before each name of component for registration ('button' --> ``)

### For development

```sh

git clone

npm run demo

```

This will produce `demo/run/app.js` and therefore, the file `demo/run/index.html` will be usable directly in the browser. To compile the library only, use `npm run prepack`

There is no plan to have one-source-file-per-component, it's not a huge library.

## Components

These should work and implement their intended final behaviour, even if details can still change

- [flag](./docs/components/flag.md)

- [breadcrumbs](./docs/components/breadcrumbs.md)

- [icon](./docs/components/icon.md)

- [button](./docs/components/button.md)

- [input](./docs/components/input.md)

- [select](./docs/components/select.md)

- [accordion](./docs/components/accordion.md)

- [modal](./docs/components/modal.md)

- [checkbox](./docs/components/checkbox.md)

- [dimming](./docs/components/dimm.md)

- [form](./docs/components/form.md)

- [progress](./docs/components/progress.md)

- [table](./docs/components/table.md)

- [tabs](./docs/components/tabs.md)

## Globals helpers

- [scroll-bar sizes](./docs/globals/scrollbar.md)

## Concepts

These have been developped deeper in this library even not completely bound to semantic. It is interwined with semantic though.

- [form](./docs/concepts/form.md)

- [commanded](./docs/concepts/commanded.md)

- [panel](./docs/concepts/panel.md)

## Not implemented yet

### NIY - Components

- menus

- radios

- embed (iframe)

- sidebar

- search

- shape

- rating

- reveal?

### NIY - Directives

- popup

- visibility

- messages

### No plans to implement

Some of `semantic-ui` functionalities are just classes to add to some `div` for which the point of making a custom control out of is discussable.

- container

- divider

- header

- image

- list

- rail

- segment

- grid

- advertisement

- card

- transitions (Vue has it)

### Things that might perhaps be automated

- label

- menu (integration with vue-router)

- message (toasters? ...?)

- nag

- sticky

- lists

  - labels

  - buttons

  - comments

  - feeds

  - items

  - statistics

  - steps

## Support development

If you wanna help, please do.

If you are interested in the development of a component, please leave a comment.