feat(theme): add link feature in homepage features (#984) (#1404)

close #984 
close #1070 

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Co-authored-by: Kia Ishii <kia.king.08@gmail.com>
pull/1568/head
jimmyxuexue 3 years ago committed by GitHub
parent ac8619f841
commit 84b4abc5fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -197,9 +197,23 @@ interface Feature {
// Details of the feature. // Details of the feature.
details: string details: string
// Link when clicked on feature component. The link can
// be both internal or external.
//
// e.g. `guide/theme-home-page` or `htttps://example.com`
link?: string
// Link text to be shown inside feature component. Best
// used with `link` option.
//
// e.g. `Learn more`, `Visit page`, etc.
linkText?: string
} }
``` ```
You may learn more about it in [Theme: Home Page](../guide/theme-home-page).
## aside ## aside
- Type: `boolean` - Type: `boolean`

@ -115,5 +115,17 @@ interface Feature {
// Details of the feature. // Details of the feature.
details: string details: string
// Link when clicked on feature component. The link can
// be both internal or external.
//
// e.g. `guide/theme-home-page` or `htttps://example.com`
link?: string
// Link text to be shown inside feature component. Best
// used with `link` option.
//
// e.g. `Learn more`, `Visit page`, etc.
linkText?: string
} }
``` ```

@ -1,26 +1,56 @@
<script setup lang="ts"> <script setup lang="ts">
import VPLink from './VPLink.vue'
import VPIconArrowRight from './icons/VPIconArrowRight.vue'
defineProps<{ defineProps<{
icon?: string icon?: string
title: string title: string
details: string details: string
link?: string
linkText?: string
}>() }>()
</script> </script>
<template> <template>
<article class="VPFeature"> <VPLink class="VPFeature" :href="link" :no-icon="true">
<article class="box">
<div v-if="icon" class="icon">{{ icon }}</div> <div v-if="icon" class="icon">{{ icon }}</div>
<h2 class="title">{{ title }}</h2> <h2 class="title">{{ title }}</h2>
<p class="details">{{ details }}</p> <p class="details">{{ details }}</p>
<div v-if="linkText" class="link-text">
<p class="link-text-value">
{{ linkText }} <VPIconArrowRight class="link-text-icon" />
</p>
</div>
</article> </article>
</VPLink>
</template> </template>
<style scoped> <style scoped>
.VPFeature { .VPFeature {
display: block;
border: 1px solid var(--vp-c-bg-soft); border: 1px solid var(--vp-c-bg-soft);
border-radius: 12px; border-radius: 12px;
padding: 24px;
height: 100%; height: 100%;
background-color: var(--vp-c-bg-soft); background-color: var(--vp-c-bg-soft);
transition: border-color 0.25s, background-color 0.25s;
}
.VPFeature.link:hover {
border-color: var(--vp-c-brand);
background-color: var(--vp-c-bg);
}
.dark .VPFeature.link:hover {
background-color: var(--vp-c-bg-mute);
}
.box {
display: flex;
flex-direction: column;
padding: 24px;
height: 100%;
} }
.icon { .icon {
@ -33,10 +63,11 @@ defineProps<{
width: 48px; width: 48px;
height: 48px; height: 48px;
font-size: 24px; font-size: 24px;
transition: background-color 0.25s;
} }
.dark .icon { .dark .icon {
background-color: var(--vp-c-bg); background-color: var(--vp-c-gray-dark-5);
} }
.title { .title {
@ -46,10 +77,36 @@ defineProps<{
} }
.details { .details {
flex-grow: 1;
padding-top: 8px; padding-top: 8px;
line-height: 24px; line-height: 24px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
} }
.link-text {
padding-top: 8px;
}
.link-text-value {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
color: var(--vp-c-brand);
transition: color 0.25s;
}
.VPFeature.link:hover .link-text-value {
color: var(--vp-c-brand-dark);
}
.link-text-icon {
display: inline-block;
margin-left: 6px;
width: 14px;
height: 14px;
fill: currentColor;
}
</style> </style>

@ -6,6 +6,8 @@ export interface Feature {
icon?: string icon?: string
title: string title: string
details: string details: string
link?: string
linkText?: string
} }
const props = defineProps<{ const props = defineProps<{
@ -38,6 +40,8 @@ const grid = computed(() => {
:icon="feature.icon" :icon="feature.icon"
:title="feature.title" :title="feature.title"
:details="feature.details" :details="feature.details"
:link="feature.link"
:link-text="feature.linkText"
/> />
</div> </div>
</div> </div>

Loading…
Cancel
Save