@guillaumecatel/wivi-ui NPM

Wivi UI

Wivi UI est une bibliothèque de composants d'interface utilisateur réactifs pour Vue.js basée sur les guides de style du Wivi. 🎨

NPM

Installation

Après avoir créer un projet Vue.js avec vue-cli.

npm install @guillaumecatel/wivi-ui

Note importante ! Le tarball NPM est visible à cette adresse.

Utilisation

Librarie complète

import Vue from 'vue'
import WiviUI from '@guillaumecatel/wivi-ui'
import '@guillaumecatel/wivi-ui/lib/wivi-ui.min.css'

Vue.use(WiviUI)

Par composant (pas de tremblement d'arbre !)

import Vue from 'vue'
import { WButton } from '@guillaumecatel/wivi-ui'
import '@guillaumecatel/wivi-ui/lib/components/button.min.css'

Vue.component('WButton', WButton)

Par composant (avec tremblement d'arbre !)

import Vue from 'vue'
import { WButton } from '@guillaumecatel/wivi-ui/lib/components/button'
import '@guillaumecatel/wivi-ui/lib/components/button.min.css'

Vue.component('WButton', WButton)

Autonome

Utilisation de CDN ou téléchargement de fichiers pour servir localement

Installation

Usage

Librarie complète

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/@guillaumecatel/wivi-ui/dist/wivi-ui.min.css">
</head>

<body>
    <div id="app">
        <w-button>Click me :)</w-button>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/@guillaumecatel/wivi-ui/dist/wivi-ui.min.js"></script>
    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>
</html>

Par composant

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/@guillaumecatel/wivi-ui/dist/components/button.min.css">
</head>

<body>
    <div id="app">
        <w-button>Click me :)</w-button>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/@guillaumecatel/wivi-ui/dist/components/button.min.js"></script>
    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>
</html>