Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b4ab08b
commit 5f73392
Showing
30 changed files
with
2,785 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <template> | ||
| <div class="center"> | ||
| <vs-tooltip border> | ||
| <vs-button transparent> | ||
| Do hover here | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| <vs-tooltip danger border> | ||
| <vs-button danger transparent> | ||
| Do hover here | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| <vs-tooltip color="#7d33ff" border-thick> | ||
| <vs-button color="#7d33ff" transparent> | ||
| Do hover here | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data:() => ({ | ||
| active: false | ||
| }) | ||
| } | ||
| </script> | ||
| <style scoped lang="stylus"> | ||
| .vs-button | ||
| margin 0px | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <template> | ||
| <div class="center"> | ||
| <vs-tooltip circle> | ||
| <vs-button circle flat> | ||
| Do hover here | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data:() => ({ | ||
| active: false | ||
| }) | ||
| } | ||
| </script> | ||
| <style scoped lang="stylus"> | ||
| .vs-button | ||
| margin 0px | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| <template> | ||
| <div class="center"> | ||
| <vs-tooltip> | ||
| <vs-button shadow> | ||
| Default | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| <vs-tooltip primary> | ||
| <vs-button flat> | ||
| Primary | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| <vs-tooltip success> | ||
| <vs-button success flat> | ||
| Success | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| <vs-tooltip danger> | ||
| <vs-button danger flat> | ||
| Danger | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| <vs-tooltip warn> | ||
| <vs-button warn flat> | ||
| Warning | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| <vs-tooltip dark> | ||
| <vs-button dark flat> | ||
| Dark | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| <vs-tooltip color="#7d33ff"> | ||
| <vs-button color="#7d33ff" flat> | ||
| HEX | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| <vs-tooltip color="rgb(59,222,200)"> | ||
| <vs-button color="rgb(59,222,200)" flat> | ||
| RGB | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data:() => ({ | ||
| active: false | ||
| }) | ||
| } | ||
| </script> | ||
| <style scoped lang="stylus"> | ||
| .vs-button | ||
| margin 0px | ||
| .vs-tooltip-content | ||
| margin 0px 10px | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| <template> | ||
| <div class="center"> | ||
| <vs-tooltip> | ||
| <vs-button gradient> | ||
| Whats is Vuesax? | ||
| </vs-button> | ||
| <template #tooltip> | ||
| <div class="content-tooltip"> | ||
| <h4> | ||
| Whats is Vuesax? | ||
| </h4> | ||
| <p> | ||
| Vuesax is a framework of UI components created with Vuejs | ||
| </p> | ||
| </div> | ||
| </template> | ||
| </vs-tooltip> | ||
| <vs-tooltip bottom shadow not-hover v-model="activeTooltip1"> | ||
| <vs-button danger @click="activeTooltip1=!activeTooltip1"> | ||
| Click Delete User | ||
| </vs-button> | ||
| <template #tooltip> | ||
| <div class="content-tooltip"> | ||
| <h4 class="center"> | ||
| Confirm | ||
| </h4> | ||
| <p> | ||
| You are sure to delete this user, by doing so you cannot recover the data | ||
| </p> | ||
| <footer> | ||
| <vs-button @click="activeTooltip1=false" danger block> | ||
| Delete | ||
| </vs-button> | ||
| <vs-button @click="activeTooltip1=false" transparent dark block> | ||
| Cancel | ||
| </vs-button> | ||
| </footer> | ||
| </div> | ||
| </template> | ||
| </vs-tooltip> | ||
| <vs-tooltip shadow interactivity> | ||
| <vs-avatar> | ||
| <img src="/avatars/avatar-5.png" alt=""> | ||
| </vs-avatar> | ||
| <template #tooltip> | ||
| <div class="content-tooltip"> | ||
| <div class="body"> | ||
| <div class="text"> | ||
| Cosed Tasks | ||
| <span> | ||
| 89 | ||
| </span> | ||
| </div> | ||
| <vs-avatar circle size="80" @click="activeTooltip1=!activeTooltip1"> | ||
| <img src="/avatars/avatar-5.png" alt=""> | ||
| </vs-avatar> | ||
| <div class="text"> | ||
| Open Tasks | ||
| <span> | ||
| 8 | ||
| </span> | ||
| </div> | ||
| </div> | ||
| <footer> | ||
| <vs-button circle icon border> | ||
| <i class='bx bxs-share-alt'></i> | ||
| </vs-button> | ||
| <vs-button circle> | ||
| Message | ||
| </vs-button> | ||
| <vs-button circle icon border> | ||
| <i class='bx bx-like' ></i> | ||
| </vs-button> | ||
| </footer> | ||
| </div> | ||
| </template> | ||
| </vs-tooltip> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data:() => ({ | ||
| activeTooltip1: false | ||
| }) | ||
| } | ||
| </script> | ||
| <style lang="stylus"> | ||
| getColor(colorx, alpha = 1) | ||
| unquote("rgba(var(--vs-"+colorx+"), "+alpha+")") | ||
| getVar(var) | ||
| unquote("var(--vs-"+var+")") | ||
| .content-tooltip | ||
| .body | ||
| display flex | ||
| align-items flex-start | ||
| justify-content center | ||
| .vs-avatar-content | ||
| margin-top -30px | ||
| border 3px solid getVar('theme-layout') | ||
| box-shadow 0px 4px 15px 0px rgba(0,0,0,.1) | ||
| .text | ||
| display flex | ||
| align-items center | ||
| justify-content center | ||
| flex-direction column | ||
| font-size .55rem | ||
| padding 10px | ||
| font-weight normal | ||
| span | ||
| font-weight bold | ||
| font-size .7rem | ||
| footer | ||
| display flex | ||
| align-items center | ||
| justify-content center | ||
| h4 | ||
| padding 8px | ||
| margin 0px | ||
| text-align left | ||
| p | ||
| text-align left | ||
| padding 0px | ||
| margin 0px | ||
| line-height 1rem | ||
| padding-bottom 5px | ||
| padding-left 8px | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <template> | ||
| <div class="center"> | ||
| <vs-tooltip> | ||
| <vs-button flat> | ||
| Do hover here | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data:() => ({ | ||
| active: false | ||
| }) | ||
| } | ||
| </script> | ||
| <style scoped lang="stylus"> | ||
| .vs-button | ||
| margin 0px | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| <template> | ||
| <div class="center"> | ||
| <vs-tooltip loading> | ||
| <vs-button flat> | ||
| Do hover here loading | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| <vs-tooltip loading> | ||
| <vs-button flat> | ||
| Do hover here loading | ||
| </vs-button> | ||
| <template #tooltip></template> | ||
| </vs-tooltip> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data:() => ({ | ||
| active: false | ||
| }) | ||
| } | ||
| </script> | ||
| <style scoped lang="stylus"> | ||
| .vs-button | ||
| margin 5px | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <template> | ||
| <div class="center"> | ||
| <vs-tooltip not-arrow left> | ||
| <vs-button border> | ||
| left not-arrow | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| <vs-tooltip not-arrow> | ||
| <vs-button border> | ||
| Top not-arrow | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| <vs-tooltip not-arrow bottom> | ||
| <vs-button border> | ||
| Bottom not-arrow | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| <vs-tooltip not-arrow right> | ||
| <vs-button border> | ||
| right not-arrow | ||
| </vs-button> | ||
| <template #tooltip> | ||
| This is a beautiful button | ||
| </template> | ||
| </vs-tooltip> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data:() => ({ | ||
| active: false | ||
| }) | ||
| } | ||
| </script> | ||
| <style scoped lang="stylus"> | ||
| .vs-button | ||
| margin 0px | ||
| .vs-tooltip-content | ||
| margin 0px 5px | ||
| </style> |
Oops, something went wrong.