@skyloft/windvane 0.1.6 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,87 @@
|
|
|
1
1
|
# @skyloft/windvane
|
|
2
2
|
|
|
3
3
|
A UI library based on Tailwind and inspired by Material UI.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
You must have Tailwind installed, preferably `^4.0.0`.
|
|
8
|
+
|
|
9
|
+
Then install Windvane.
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
npm install @skyloft/windvane
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Install plugin in Vue startup:
|
|
16
|
+
|
|
17
|
+
```TypeScript
|
|
18
|
+
// main.ts
|
|
19
|
+
|
|
20
|
+
import './assets/main.css';
|
|
21
|
+
import { createApp } from 'vue';
|
|
22
|
+
import App from './App.vue';
|
|
23
|
+
import router from './router';
|
|
24
|
+
|
|
25
|
+
// Perform Windvane imports
|
|
26
|
+
import '@skyloft/windvane/windvane.css';
|
|
27
|
+
import Windvane from '@skyloft/windvane';
|
|
28
|
+
|
|
29
|
+
const app = createApp(App);
|
|
30
|
+
|
|
31
|
+
app.use(router);
|
|
32
|
+
|
|
33
|
+
// Install as plugin
|
|
34
|
+
app.use(Windvane);
|
|
35
|
+
|
|
36
|
+
app.mount('#app');
|
|
37
|
+
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
in your css, set up some theming
|
|
41
|
+
|
|
42
|
+
```CSS
|
|
43
|
+
/* main.css */
|
|
44
|
+
|
|
45
|
+
@import 'tailwindcss';
|
|
46
|
+
|
|
47
|
+
/* Windvane setup */
|
|
48
|
+
@source '../../node_modules/@skyloft/windvane';
|
|
49
|
+
@theme {
|
|
50
|
+
--color-primary: rgb(0, 189, 126);
|
|
51
|
+
--color-card: #1a1a1a;
|
|
52
|
+
--color-bg: black;
|
|
53
|
+
}
|
|
54
|
+
/* Windvane setup end */
|
|
55
|
+
|
|
56
|
+
:root {
|
|
57
|
+
color: white;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
body {
|
|
61
|
+
background-color: black;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Then you're ready to go!
|
|
67
|
+
|
|
68
|
+
```vue
|
|
69
|
+
<script setup lang="ts">
|
|
70
|
+
const selectedTab = ref('general');
|
|
71
|
+
</script>
|
|
72
|
+
|
|
73
|
+
<template>
|
|
74
|
+
<div class="flex flex-col gap-4">
|
|
75
|
+
<Tabs v-model="selectedTab" active-color="primary">
|
|
76
|
+
<Tab name="general">General</Tab>
|
|
77
|
+
<Tab name="security">Security</Tab>
|
|
78
|
+
<Tab name="privacy">Privacy</Tab>
|
|
79
|
+
<Tab name="utilities">Utilities</Tab>
|
|
80
|
+
</Tabs>
|
|
81
|
+
|
|
82
|
+
<div v-if="selectedTab === 'general'">
|
|
83
|
+
<h1>General</h1>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</template>
|
|
87
|
+
```
|