new component navbar

lusaxweb · Jun 19, 2020 · 9e07294 · 9e07294
1 parent 9e3c9fe
commit 9e07294
Show file tree

Hide file tree

Showing 19 changed files with 1,797 additions and 68 deletions.
diff --git a/README.md b/README.md
@@ -49,7 +49,7 @@ Every day is being updated and working on **Vuesax 4**, we will announce each ne
 - [x] Input
 - [ ] List
 - [x] Loading
-- [ ] Navbar
+- [x] Navbar
 - [x] Notification
 - [ ] Number Input
 - [x] Pagination
@@ -60,7 +60,7 @@ Every day is being updated and working on **Vuesax 4**, we will announce each ne
 - [ ] Sidebar
 - [ ] Slider
 - [x] Switch
-- [ ] Table
+- [x] Table
 - [ ] Tabs
 - [ ] Textarea
 - [x] Tooltip

diff --git a/packages/docs/.vuepress/components/Navbar/color.vue b/packages/docs/.vuepress/components/Navbar/color.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="center examplex">
+  <div class="center example-nav">
     <vs-navbar text-white :color="active" center-collapsed v-model="active">
       <template #left>
         <img src="/logos/logo-vuesax-logotipo-vuesax-png-4.png" alt="">
@@ -60,7 +60,7 @@ export default {
       align-items center
       justify-content center
       width 100%
-  .examplex
+  .example-nav
     background rgb(240,240,240) !important
     padding 0px !important
     position relative

diff --git a/packages/docs/.vuepress/components/Navbar/default.vue b/packages/docs/.vuepress/components/Navbar/default.vue
@@ -1,31 +1,24 @@
 <template>
-  <div class="center examplex">
-    <vs-navbar text-white :color="active" center-collapsed v-model="active">
+  <div class="center example-nav">
+    <vs-navbar center-collapsed v-model="active">
       <template #left>
-        <img src="/logos/logo-vuesax-logotipo-vuesax-png-4.png" alt="">
+        <img src="/logo2.png" alt="">
       </template>
+      <vs-navbar-item :active="active == 'guide'" id="guide">
+        Guide
+      </vs-navbar-item>
+      <vs-navbar-item :active="active == 'docs'" id="docs">
+        Documents
+      </vs-navbar-item>
+      <vs-navbar-item :active="active == 'components'" id="components">
+        Components
+      </vs-navbar-item>
+      <vs-navbar-item :active="active == 'license'" id="license">
+        license
+      </vs-navbar-item>
       <template #right>
-        <vs-navbar-item :active="active == 'primary'" id="primary">
-          Primary
-        </vs-navbar-item>
-        <vs-navbar-item :active="active == 'success'" id="success">
-          Success
-        </vs-navbar-item>
-        <vs-navbar-item :active="active == 'danger'" id="danger">
-          Danger
-        </vs-navbar-item>
-        <vs-navbar-item :active="active == 'warn'" id="warn">
-          Warn
-        </vs-navbar-item>
-        <vs-navbar-item :active="active == 'dark'" id="dark">
-          Dark
-        </vs-navbar-item>
-        <vs-navbar-item :active="active == '#7d33ff'" id="#7d33ff">
-          HEX
-        </vs-navbar-item>
-        <vs-navbar-item :active="active == 'rgb(59,222,200)'" id="rgb(59,222,200)">
-          RGB
-        </vs-navbar-item>
+        <vs-button flat >Login</vs-button>
+        <vs-button>Get Started</vs-button>
       </template>
     </vs-navbar>
     <div class="square">
@@ -44,7 +37,7 @@
 <script>
 export default {
   data:() => ({
-    active: 'primary'
+    active: 'guide'
   })
 }
 </script>
@@ -60,10 +53,10 @@ export default {
       align-items center
       justify-content center
       width 100%
-  .examplex
+  .example-nav
     background rgb(240,240,240) !important
     padding 0px !important
     position relative
     img
-      max-height 22px
+      max-height 25px
 </style>
diff --git a/packages/docs/.vuepress/components/Navbar/group.vue b/packages/docs/.vuepress/components/Navbar/group.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="center example-nav">
+    <vs-navbar center-collapsed v-model="active">
+      <template #left>
+        <img src="/logo2.png" alt="">
+      </template>
+      <vs-navbar-group>
+        Docs
+        <template #items>
+          <vs-navbar-item :active="active == 'guide'" id="guide">
+            Guide
+          </vs-navbar-item>
+          <vs-navbar-item :active="active == 'docs'" id="docs">
+            Documents
+          </vs-navbar-item>
+          <vs-navbar-item :active="active == 'components'" id="components">
+            Components
+          </vs-navbar-item>
+        </template>
+      </vs-navbar-group>
+
+      <vs-navbar-group>
+        Ecosystem
+
+        <template #items>
+          <h5 class="title">
+            Social
+          </h5>
+
+          <vs-navbar-item :active="active == 'Github'" id="Github">
+            Github
+          </vs-navbar-item>
+          <vs-navbar-item :active="active == 'Discord'" id="Discord">
+            Discord
+          </vs-navbar-item>
+          <vs-navbar-item :active="active == 'Twitter'" id="Twitter">
+            Twitter
+          </vs-navbar-item>
+          <vs-navbar-item :active="active == 'Medium'" id="Medium">
+            Medium
+          </vs-navbar-item>
+        </template>
+      </vs-navbar-group>
+
+      <vs-navbar-item :active="active == 'License'" id="License">
+        License
+      </vs-navbar-item>
+
+      <template #right>
+        <vs-button flat >Login</vs-button>
+        <vs-button>Get Started</vs-button>
+      </template>
+    </vs-navbar>
+    <div class="square">
+      <div class="child">
+        child 1
+      </div>
+      <div class="child">
+        child 2
+      </div>
+      <div class="child">
+        child 3
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data:() => ({
+    active: 'guide'
+  })
+}
+</script>
+<style lang="stylus">
+  .title
+    text-align left
+    margin 0px
+    width 100%
+    padding 5px 6px
+  .square
+    height 400px
+    position relative
+    overflow auto
+    width 100%
+    .child
+      height 400px
+      display flex
+      align-items center
+      justify-content center
+      width 100%
+  .example-nav
+    background rgb(240,240,240) !important
+    padding 0px !important
+    position relative
+    img
+      max-height 25px
+</style>
diff --git a/packages/docs/.vuepress/components/Navbar/hideScroll.vue b/packages/docs/.vuepress/components/Navbar/hideScroll.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="center example-nav">
+    <vs-navbar target-scroll="#hide-scroll-content" hide-scroll center-collapsed v-model="active">
+      <template #left>
+        <img src="/logo2.png" alt="">
+      </template>
+      <vs-navbar-item :active="active == 'guide'" id="guide">
+        Guide
+      </vs-navbar-item>
+      <vs-navbar-item :active="active == 'docs'" id="docs">
+        Documents
+      </vs-navbar-item>
+      <vs-navbar-item :active="active == 'components'" id="components">
+        Components
+      </vs-navbar-item>
+      <vs-navbar-item :active="active == 'license'" id="license">
+        license
+      </vs-navbar-item>
+      <template #right>
+        <vs-button flat >Login</vs-button>
+        <vs-button>Get Started</vs-button>
+      </template>
+    </vs-navbar>
+    <div id="hide-scroll-content" class="square">
+      <div class="child">
+        child 1
+      </div>
+      <div class="child">
+        child 2
+      </div>
+      <div class="child">
+        child 3
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data:() => ({
+    active: 'guide'
+  })
+}
+</script>
+<style lang="stylus">
+  .square
+    height 400px
+    position relative
+    overflow auto
+    width 100%
+    .child
+      height 400px
+      display flex
+      align-items center
+      justify-content center
+      width 100%
+  .example-nav
+    background rgb(240,240,240) !important
+    padding 0px !important
+    position relative
+    overflow hidden
+    img
+      max-height 25px
+</style>
diff --git a/...epress/components/Navbar/default copy.vue → ...s/.vuepress/components/Navbar/notLine.vue b/...epress/components/Navbar/default copy.vue → ...s/.vuepress/components/Navbar/notLine.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="center examplex">
-    <vs-navbar center-collapsed v-model="active">
+  <div class="center example-nav">
+    <vs-navbar not-line center-collapsed v-model="active">
       <template #left>
         <img src="/logo2.png" alt="">
       </template>
@@ -37,7 +37,7 @@
 <script>
 export default {
   data:() => ({
-    active: 'license'
+    active: 'guide'
   })
 }
 </script>
@@ -53,10 +53,11 @@ export default {
       align-items center
       justify-content center
       width 100%
-  .examplex
+  .example-nav
     background rgb(240,240,240) !important
     padding 0px !important
     position relative
+    overflow hidden
     img
       max-height 25px
 </style>
diff --git a/packages/docs/.vuepress/components/Navbar/paddingScroll.vue b/packages/docs/.vuepress/components/Navbar/paddingScroll.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="center example-nav">
+    <vs-navbar target-scroll="#padding-scroll-content" padding-scroll center-collapsed v-model="active">
+      <template #left>
+        <img src="/logo2.png" alt="">
+      </template>
+      <vs-navbar-item :active="active == 'guide'" id="guide">
+        Guide
+      </vs-navbar-item>
+      <vs-navbar-item :active="active == 'docs'" id="docs">
+        Documents
+      </vs-navbar-item>
+      <vs-navbar-item :active="active == 'components'" id="components">
+        Components
+      </vs-navbar-item>
+      <vs-navbar-item :active="active == 'license'" id="license">
+        license
+      </vs-navbar-item>
+      <template #right>
+        <vs-button flat >Login</vs-button>
+        <vs-button>Get Started</vs-button>
+      </template>
+    </vs-navbar>
+    <div id="padding-scroll-content" class="square">
+      <div class="child">
+        child 1
+      </div>
+      <div class="child">
+        child 2
+      </div>
+      <div class="child">
+        child 3
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data:() => ({
+    active: 'guide'
+  })
+}
+</script>
+<style lang="stylus">
+  .square
+    height 400px
+    position relative
+    overflow auto
+    width 100%
+    .child
+      height 400px
+      display flex
+      align-items center
+      justify-content center
+      width 100%
+  .example-nav
+    background rgb(240,240,240) !important
+    padding 0px !important
+    position relative
+    overflow hidden
+    img
+      max-height 25px
+</style>