Add suffix slot to MkLink

This commit is contained in:
syuilo 2020-12-03 23:06:46 +09:00
parent 8d0c5268d1
commit 3a33e406c7
2 changed files with 27 additions and 5 deletions

View file

@ -3,12 +3,18 @@
<a class="main _button _formPanel _formClickable" :href="to" target="_blank" v-if="external"> <a class="main _button _formPanel _formClickable" :href="to" target="_blank" v-if="external">
<span class="icon"><slot name="icon"></slot></span> <span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span> <span class="text"><slot></slot></span>
<Fa :icon="faExternalLinkAlt" class="right"/> <span class="right">
<span class="text"><slot name="suffix"></slot></span>
<Fa :icon="faExternalLinkAlt" class="icon"/>
</span>
</a> </a>
<MkA class="main _button _formPanel _formClickable" :class="{ active }" :to="to" v-else> <MkA class="main _button _formPanel _formClickable" :class="{ active }" :to="to" v-else>
<span class="icon"><slot name="icon"></slot></span> <span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span> <span class="text"><slot></slot></span>
<Fa :icon="faChevronRight" class="right"/> <span class="right">
<span class="text"><slot name="suffix"></slot></span>
<Fa :icon="faChevronRight" class="icon"/>
</span>
</MkA> </MkA>
</div> </div>
</template> </template>
@ -84,6 +90,10 @@ export default defineComponent({
> .right { > .right {
margin-left: auto; margin-left: auto;
opacity: 0.7; opacity: 0.7;
> .text:not(:empty) {
margin-right: 0.75em;
}
} }
} }
} }

View file

@ -11,9 +11,21 @@
{{ $t('_aboutMisskey.about') }} {{ $t('_aboutMisskey.about') }}
</section> </section>
<FormGroup> <FormGroup>
<FormLink to="https://github.com/syuilo/misskey" external><template #icon><Fa :icon="faCode"/></template>{{ $t('_aboutMisskey.source') }}</FormLink> <FormLink to="https://github.com/syuilo/misskey" external>
<FormLink to="https://crowdin.com/project/misskey" external><template #icon><Fa :icon="faLanguage"/></template>{{ $t('_aboutMisskey.translation') }}</FormLink> <template #icon><Fa :icon="faCode"/></template>
<FormLink to="https://www.patreon.com/syuilo" external><template #icon><Fa :icon="faHandHoldingMedical"/></template>{{ $t('_aboutMisskey.donate') }}</FormLink> {{ $t('_aboutMisskey.source') }}
<template #suffix>GitHub</template>
</FormLink>
<FormLink to="https://crowdin.com/project/misskey" external>
<template #icon><Fa :icon="faLanguage"/></template>
{{ $t('_aboutMisskey.translation') }}
<template #suffix>Crowdin</template>
</FormLink>
<FormLink to="https://www.patreon.com/syuilo" external>
<template #icon><Fa :icon="faHandHoldingMedical"/></template>
{{ $t('_aboutMisskey.donate') }}
<template #suffix>Patreon</template>
</FormLink>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<template #label>{{ $t('_aboutMisskey.contributors') }}</template> <template #label>{{ $t('_aboutMisskey.contributors') }}</template>