mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-25 12:39:03 +08:00
show error message when demo is missing
This commit is contained in:
parent
4e2cfd1f49
commit
16da584ebd
@ -1,27 +1,32 @@
|
||||
<template>
|
||||
<div class="demo">
|
||||
<div class="demo__preview" v-if="mainFile">
|
||||
<component :is="mainFile" v-if="mode === 'vue'" />
|
||||
<react-renderer :component="mainFile" v-if="mode === 'react'" />
|
||||
</div>
|
||||
<div class="demo__source">
|
||||
<div class="demo__tabs" v-if="showFileNames">
|
||||
<button
|
||||
class="demo__tab"
|
||||
:class="{ 'is-active': currentIndex === index}"
|
||||
v-for="(file, index) in files"
|
||||
:key="index"
|
||||
@click="currentIndex = index"
|
||||
>
|
||||
{{ file.name }}
|
||||
</button>
|
||||
<template v-if="mainFile">
|
||||
<div class="demo__preview">
|
||||
<component :is="mainFile" v-if="mode === 'vue'" />
|
||||
<react-renderer :component="mainFile" v-if="mode === 'react'" />
|
||||
</div>
|
||||
<div class="demo__code" v-if="activeFile" :key="activeFile.path">
|
||||
<prism :code="activeFile.content" :language="activeFile.highlight" :highlight="highlight" />
|
||||
<div class="demo__source">
|
||||
<div class="demo__tabs" v-if="showFileNames">
|
||||
<button
|
||||
class="demo__tab"
|
||||
:class="{ 'is-active': currentIndex === index}"
|
||||
v-for="(file, index) in files"
|
||||
:key="index"
|
||||
@click="currentIndex = index"
|
||||
>
|
||||
{{ file.name }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo__code" v-if="activeFile" :key="activeFile.path">
|
||||
<prism :code="activeFile.content" :language="activeFile.highlight" :highlight="highlight" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo__link">
|
||||
<a :href="githubUrl" target="_blank">Edit on GitHub</a>
|
||||
<div class="demo__link">
|
||||
<a :href="githubUrl" target="_blank">Edit on GitHub</a>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="demo__error">
|
||||
Could not find a demo called “{{ this.name }}”.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -52,4 +52,10 @@
|
||||
&__link {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
&__error {
|
||||
padding: 1rem 1.5rem;
|
||||
color: $colorRed;
|
||||
background-color: rgba($colorRed, 0.1);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user