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

Add copy button on code snippet

Browse Source
This commit is contained in:
khatabwedaa
2020-06-13 22:54:20 +02:00
parent 668261481f
commit 124894fdf9
3 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Header.vue
View File

@@ -4,8 +4,7 @@
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<a href="/" class="text-white text-xl font-bold md:text-2xl inline-flex items-center hover:text-blue-400">
<img class="h-10 w-10 mr-1" src="../assets/svg/logo.svg" alt="logo">
Meraki <span class="text-blue-400">UI</span>
<img class="h-10 w-10 mr-1" src="../assets/svg/logo.svg" alt="logo"> Meraki <span class="text-blue-400">UI</span>
</a>
<a class="text-white text-sm font-normal hover:text-blue-400" href="https://github.com/merakiui/website" target="_blank" aria-label="Github link">
@@ -18,8 +17,8 @@
</nav>
<div class="bg-gray-900">
<div class="container mx-auto px-6">
<div class="md:flex py-8 md:py-0">
<div class="container mx-auto px-6 py-8">
<div class="md:flex">
<div class="flex items-center w-full md:w-1/2">
<div class="max-w-sm text-white">
<div class="text-xs font-light">Simple UI Starter</div>

14
src/components/utilities/CodeSnippet.vue
View File

@@ -1,6 +1,14 @@
<template>
<div class="rounded overflow-hidden">
<div class="relative rounded overflow-hidden">
<pre><code class="px-8 py-6 rounded-md overflow-x-scroll overflow-hidden text-sm">{{ code }}</code></pre>
<div class="absolute right-0 top-0">
<button class="px-3 py-2 text-gray-600 hover:text-gray-400 focus:outline-none" v-clipboard:success="onCopy" v-clipboard:copy="code">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
</svg>
</button>
</div>
</div>
</template>
@@ -24,6 +32,10 @@ export default {
});
});
},
onCopy() {
this.$emit("onCopy");
}
},
}
</script>

3
src/components/utilities/ViewComponent.vue
View File

@@ -3,6 +3,7 @@
<div class="bg-white px-4 py-2 border-b">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="text-gray-700 font-medium capitalize md:text-lg">{{ name }}</div>
<div class="mt-4 md:mt-0">
<button @click="rtl =! rtl" class="rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" :class="rtl? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'" aria-label="Rtl">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none">
@@ -46,7 +47,7 @@
</div>
<div v-if="viewCode">
<code-snippet :code="code"></code-snippet>
<code-snippet @onCopy="onCopy" :code="code"></code-snippet>
</div>
</div>
</template>