javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: [anchor] add locale (#16022)

Browse Source
This commit is contained in:
赵添
2024-03-04 09:57:54 +08:00
committed by GitHub
parent 6ccc8ee915
commit 6cdb7e08ef
6 changed files with 127 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/.vitepress/crowdin/en-US/component/anchor.json Normal file
View File

@@ -0,0 +1,14 @@
{
"basic-usage": "basic-usage",
"horizontal-mode": "horizontal-mode",
"scroll-container": "scroll-container",
"anchor-api": "anchor-api",
"anchor-attributes": "anchor-attributes",
"anchor-events": "anchor-events",
"Basic Usage": "Basic Usage",
"Horizontal Mode": "Horizontal Mode",
"Scroll Container": "Scroll Container",
"Anchor API": "Anchor API",
"Anchor Attributes": "Anchor Attributes",
"Anchor events": "Anchor events"
}

32
docs/examples/anchor/affix.vue
View File

@@ -1,18 +1,34 @@
<template>
<el-affix :offset="60">
<el-anchor :offset="70" style="width: 300px">
<el-anchor-link href="#basic-usage">Basic Usage</el-anchor-link>
<el-anchor-link href="#horizontal-mode">Horizontal Mode</el-anchor-link>
<el-anchor-link href="#scroll-container">Scroll Container</el-anchor-link>
<el-anchor-link href="#anchor-api">
Anchor API
<el-anchor-link :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['horizontal-mode']}`">
{{ locale['Horizontal Mode'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['scroll-container']}`">
{{ locale['Scroll Container'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['anchor-api']}`">
{{ locale['Anchor API'] }}
<template #sub-link>
<el-anchor-link href="#anchor-attributes">
Anchor Attributes
<el-anchor-link :href="`#${locale['anchor-attributes']}`">
{{ locale['Anchor attributes'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['anchor-events']}`">
{{ locale['Anchor events'] }}
</el-anchor-link>
<el-anchor-link href="#anchor-events">Anchor events</el-anchor-link>
</template>
</el-anchor-link>
</el-anchor>
</el-affix>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import anchorLocale from '../../.vitepress/i18n/component/anchor.json'
import { useLang } from '~/composables/lang'
const lang = useLang()
const locale = computed(() => anchorLocale[lang.value])
</script>

32
docs/examples/anchor/basic.vue
View File

@@ -1,16 +1,32 @@
<template>
<el-anchor :offset="70">
<el-anchor-link href="#basic-usage">Basic Usage</el-anchor-link>
<el-anchor-link href="#horizontal-mode">Horizontal Mode</el-anchor-link>
<el-anchor-link href="#scroll-container">Scroll Container</el-anchor-link>
<el-anchor-link href="#anchor-api">
Anchor API
<el-anchor-link :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['horizontal-mode']}`">
{{ locale['Horizontal Mode'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['scroll-container']}`">
{{ locale['Scroll Container'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['anchor-api']}`">
{{ locale['Anchor API'] }}
<template #sub-link>
<el-anchor-link href="#anchor-attributes">
Anchor Attributes
<el-anchor-link :href="`#${locale['anchor-attributes']}`">
{{ locale['Anchor attributes'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['anchor-events']}`">
{{ locale['Anchor events'] }}
</el-anchor-link>
<el-anchor-link href="#anchor-events">Anchor events</el-anchor-link>
</template>
</el-anchor-link>
</el-anchor>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import anchorLocale from '../../.vitepress/i18n/component/anchor.json'
import { useLang } from '~/composables/lang'
const lang = useLang()
const locale = computed(() => anchorLocale[lang.value])
</script>

31
docs/examples/anchor/change.vue
View File

@@ -1,21 +1,36 @@
<template>
<el-anchor :offset="70" @change="handleChange">
<el-anchor-link href="#basic-usage">Basic Usage</el-anchor-link>
<el-anchor-link href="#horizontal-mode">Horizontal Mode</el-anchor-link>
<el-anchor-link href="#scroll-container">Scroll Container</el-anchor-link>
<el-anchor-link href="#anchor-api">
Anchor API
<el-anchor-link :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['horizontal-mode']}`">
{{ locale['Horizontal Mode'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['scroll-container']}`">
{{ locale['Scroll Container'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['anchor-api']}`">
{{ locale['Anchor API'] }}
<template #sub-link>
<el-anchor-link href="#anchor-attributes">
Anchor Attributes
<el-anchor-link :href="`#${locale['anchor-attributes']}`">
{{ locale['Anchor attributes'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['anchor-events']}`">
{{ locale['Anchor events'] }}
</el-anchor-link>
<el-anchor-link href="#anchor-events">Anchor events</el-anchor-link>
</template>
</el-anchor-link>
</el-anchor>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import anchorLocale from '../../.vitepress/i18n/component/anchor.json'
import { useLang } from '~/composables/lang'
const lang = useLang()
const locale = computed(() => anchorLocale[lang.value])
const handleChange = (href: string) => {
console.log(`anchor change: ${href}`)
}

20
docs/examples/anchor/horizontal.vue
View File

@@ -1,7 +1,21 @@
<template>
<el-anchor :offset="70" direction="horizontal">
<el-anchor-link href="#basic-usage">Basic Usage</el-anchor-link>
<el-anchor-link href="#horizontal-mode">Horizontal Mode</el-anchor-link>
<el-anchor-link href="#scroll-container">Scroll Container</el-anchor-link>
<el-anchor-link :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['horizontal-mode']}`">
{{ locale['Horizontal Mode'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['scroll-container']}`">
{{ locale['Scroll Container'] }}
</el-anchor-link>
</el-anchor>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import anchorLocale from '../../.vitepress/i18n/component/anchor.json'
import { useLang } from '~/composables/lang'
const lang = useLang()
const locale = computed(() => anchorLocale[lang.value])
</script>

33
docs/examples/anchor/underline.vue
View File

@@ -1,16 +1,33 @@
<template>
<el-anchor type="underline" :offset="70">
<el-anchor-link href="#basic-usage">Basic Usage</el-anchor-link>
<el-anchor-link href="#horizontal-mode">Horizontal Mode</el-anchor-link>
<el-anchor-link href="#scroll-container">Scroll Container</el-anchor-link>
<el-anchor-link href="#anchor-api">
Anchor API
<el-anchor-link :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['horizontal-mode']}`">
{{ locale['Horizontal Mode'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['scroll-container']}`">
{{ locale['Scroll Container'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['anchor-api']}`">
{{ locale['Anchor API'] }}
<template #sub-link>
<el-anchor-link href="#anchor-attributes">
Anchor Attributes
<el-anchor-link :href="`#${locale['anchor-attributes']}`">
{{ locale['Anchor attributes'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['anchor-events']}`">
{{ locale['Anchor events'] }}
</el-anchor-link>
<el-anchor-link href="#anchor-events">Anchor events</el-anchor-link>
</template>
</el-anchor-link>
</el-anchor>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import anchorLocale from '../../.vitepress/i18n/component/anchor.json'
import { useLang } from '~/composables/lang'
const lang = useLang()
const locale = computed(() => anchorLocale[lang.value])
</script>