显示侧边栏

语言切换器组件

flux:x-lang 是 Flux Pro Max 提供的语言切换器组件，用于在多语言网站中展示和选择语言。支持下拉菜单展示，每行显示国旗 emoji 和语言名称，点击后自动切换应用语言并刷新页面。

语言支持

当前文档站点只支持中文简体，组件默认支持中文简体和英文两种语言。当用户选择非这两种语言时，组件将默认展示英文界面。

如需支持更多语言，您可以：

在 config/flux-pro-max.php 的 languages.supported 配置项中添加所需的语言代码
发布对应的 Laravel 语言包（翻译文件）到 lang/{locale} 目录

安装步骤

如果你在项目中新增或更新了前端资源，并发现样式没有及时生效，可以重新构建资源：

1. 重新构建资源

npm run build

基础用法

使用 flux:x-lang 组件需要传入语言列表。

@php
    $languages = [
        ['code' => 'en', 'name' => 'English (US)', 'native_name' => 'English (US)', 'flag' => '🇺🇸'],
        ['code' => 'zh_CN', 'name' => 'Chinese (Simplified)', 'native_name' => '中文（简体）', 'flag' => '🇨🇳'],
        ['code' => 'ja', 'name' => 'Japanese', 'native_name' => '日本語', 'flag' => '🇯🇵'],
    ];
@endphp

<flux:x-lang :languages="$languages" />

自定义语言列表

通过 languages 属性传入语言数组，每个语言对象包含代码、名称、本地名称和国旗。

@php
    $languages = [
        [
            'code' => 'en',
            'name' => 'English (US)',
            'native_name' => 'English (US)',
            'flag' => '🇺🇸',
        ],
        [
            'code' => 'zh_CN',
            'name' => 'Chinese (Simplified)',
            'native_name' => '中文（简体）',
            'flag' => '🇨🇳',
        ],
        [
            'code' => 'ja',
            'name' => 'Japanese',
            'native_name' => '日本語',
            'flag' => '🇯🇵',
        ],
    ];
@endphp

<flux:x-lang :languages="$languages" />

语言对象的属性说明：

属性	类型	说明
code	string	语言代码（如 en、zh_CN、ja）
name	string	英文名称
native_name	string	本地语言名称
flag	string	国旗 emoji（如 🇺🇸、🇨🇳、🇯🇵）

位置和对齐

通过 position 和 align 属性控制下拉菜单的显示位置。

左对齐 (align="start")

<flux:x-lang
    :languages="$languages"
    align="start"
/>

居中对齐 (align="center")

<flux:x-lang
    :languages="$languages"
    align="center"
/>

显示选项

通过 showFlag、showNativeName 和 showEnglishName 属性控制显示内容。

仅显示本地名称（:show-flag="false" :show-english-name="false"）

<flux:x-lang
    :languages="$languages"
    :show-flag="false"
    :show-english-name="false"
/>

显示双语名称（:show-english-name="true"）

<flux:x-lang
    :languages="$languages"
    :show-english-name="true"
/>

完整示例

以下是一些实际应用场景的完整示例。

导航栏语言切换器

导航栏中的语言切换器

<flux:navbar>
    <flux:navbar.item href="/" current>首页</flux:navbar.item>
    <flux:navbar.item href="/about">关于</flux:navbar.item>

    {{-- 语言切换器 --}}
    <flux:x-lang :languages="$languages" />
</flux:navbar>

设置页面语言切换

设置页面中的语言切换

语言设置

选择您的首选语言

<flux:card>
    <flux:heading>语言设置</flux:heading>
    <flux:text class="mb-4">选择您的首选语言</flux:text>

    <flux:x-lang
        :languages="$languages"
        variant="primary"
    />
</flux:card>

属性参考

以下是 flux:x-lang 组件的所有可用属性。

属性	类型	默认值	说明
languages	array	null	语言数组（必需）
current	string	null	当前语言代码。不传则自动从 session 读取当前语言（推荐）
position	string	bottom	下拉菜单位置：top 或 bottom
align	string	end	对齐方式：start、end 或 center
showFlag	boolean	true	是否显示国旗
showNativeName	boolean	true	是否显示本地语言名称
showEnglishName	boolean	false	是否显示英文名称
switchRoute	string	language.switch	语言切换路由名称
variant	string	outline	按钮样式变体
size	string	base	按钮尺寸