Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-09 23:15:35 +00:00
Code Issues Projects Releases Wiki Activity

Add Go to top component

Browse Source
This commit is contained in:
khatabwedaa
2020-05-31 00:10:23 +02:00
parent c824ba828d
commit b0f9940d7a
4 changed files with 46 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -11,6 +11,7 @@
"autoprefixer": "^9.7.6", "autoprefixer": "^9.7.6",
"core-js": "^3.6.4", "core-js": "^3.6.4",
"highlight.js": "^10.0.2", "highlight.js": "^10.0.2",
"jquery": "^3.5.1",
"js-beautify": "^1.11.0", "js-beautify": "^1.11.0",
"tailwindcss": "^1.4.4", "tailwindcss": "^1.4.4",
"vue": "^2.6.11", "vue": "^2.6.11",

6
src/components/Main.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="container mx-auto px-6"> <div class="container mx-auto px-6" id="main">
<div class="py-16 text-center"> <div class="py-16 text-center">
<h1 class="text-xl md:text-3xl text-gray-800 font-medium">Discover new components. Build amazing things 🔥</h1> <h1 class="text-xl md:text-3xl text-gray-800 font-medium">Discover new components. Build amazing things 🔥</h1>
@@ -29,6 +29,8 @@
</view-component> </view-component>
</div> </div>
</div> </div>
<goto-top></goto-top>
</div> </div>
</template> </template>
@@ -72,6 +74,7 @@ import FooterWithSubscribeForm from "./UI/Footers/FooterWithSubscribeForm";
import Component from "../Models/Component"; import Component from "../Models/Component";
import ViewComponent from "./Utilities/ViewComponent"; import ViewComponent from "./Utilities/ViewComponent";
import GotoTop from "./Utilities/GotoTop";
export default { export default {
components: { components: {
@@ -111,6 +114,7 @@ export default {
SimpleFooter, SimpleFooter,
FooterWithSubscribeForm, FooterWithSubscribeForm,
GotoTop,
ViewComponent, ViewComponent,
}, },
data() { data() {

32
src/components/Utilities/CodeSnippet.vue
View File

@@ -5,25 +5,25 @@
</template> </template>
<script> <script>
import hljs from 'highlight.js/lib/core'; import hljs from 'highlight.js/lib/core';
hljs.registerLanguage('html', require('highlight.js/lib/languages/xml')); hljs.registerLanguage('html', require('highlight.js/lib/languages/xml'));
import 'highlight.js/styles/atom-one-dark.css'; import 'highlight.js/styles/atom-one-dark.css';
export default { export default {
props: ['code'], props: ['code'],
mounted() { mounted() {
this.highlightCode(); this.highlightCode();
}, },
methods: { methods: {
highlightCode() { highlightCode() {
this.$nextTick(() => { this.$nextTick(() => {
document.querySelectorAll('pre code').forEach((block) => { document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block); hljs.highlightBlock(block);
});
}); });
}, });
}, },
} },
}
</script> </script>

24
src/components/Utilities/GotoTop.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<a id="goToTop" href="#main" class="bg-gray-800 text-white fixed bottom-0 right-0 my-10 mx-10 p-2 rounded-md hidden">
<svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
</svg>
</a>
</template>
<script>
import $ from "jquery";
export default {
mounted() {
$(document).scroll(function() {
let y = $(this).scrollTop();
if (y > 800) {
$('#goToTop').fadeIn();
} else {
$('#goToTop').fadeOut();
}
});
}
}
</script>