@ui18n/selector-web

@ui18n/selector-web

Web原生语言选择器组件，支持现代浏览器的自定义元素标准。

⚠️ Experimental Package

This package is currently in experimental stage. API may change in future releases.

For production use, we recommend:

• Use @ui18n/core with CDN for pure JavaScript projects
• Wait for Phase 1 to stabilize before using framework packages
• Follow our roadmap for updates

Why experimental? We are focusing on Phase 1 (pure JavaScript + CDN) following the Lean Beachhead Strategy. Framework packages will be stabilized in Phase 2 after core functionality is validated.

安装

npm install @ui18n/selector-web

快速开始

HTML方式

<!-- 引入组件 -->
<script type="module" src="@ui18n/selector-web"></script>

<!-- 使用组件 -->
<ui18n-language-selector
  languages="zh-CN,en,ja,ko"
  current="zh-CN"
  show-flags="true">
</ui18n-language-selector>

JavaScript方式

import '@ui18n/selector-web';

// 动态创建选择器
const selector = document.createElement('ui18n-language-selector');
selector.setAttribute('languages', 'zh-CN,en,ja');
selector.setAttribute('current', 'zh-CN');
selector.setAttribute('show-flags', 'true');

document.body.appendChild(selector);

// 监听语言变化
selector.addEventListener('language-change', (event) => {
  console.log('语言已切换到:', event.detail.language);
});

API 参考

ui18n-language-selector

属性

属性	类型	默认值	描述
languages	string	''	支持的语言列表，逗号分隔
current	string	''	当前选中的语言
show-flags	boolean	false	是否显示国旗图标
show-labels	boolean	true	是否显示语言标签
theme	string	'light'	主题样式 (light/dark)

事件

• language-change - 语言切换时触发
• selector-ready - 组件初始化完成时触发

方法

• setLanguage(language) - 程序化设置语言
• getAvailableLanguages() - 获取可用语言列表
• refresh() - 刷新组件状态

样式自定义

ui18n-language-selector {
  --ui18n-selector-bg: #ffffff;
  --ui18n-selector-color: #333333;
  --ui18n-selector-border: #ddd;
  --ui18n-selector-hover: #f5f5f5;
}

/* 暗色主题 */
ui18n-language-selector[theme="dark"] {
  --ui18n-selector-bg: #2d2d2d;
  --ui18n-selector-color: #ffffff;
  --ui18n-selector-border: #555;
  --ui18n-selector-hover: #3d3d3d;
}

特性

• 🌐 支持100+语言
• 🎨 完全可定制样式
• 📱 响应式设计
• ⚡ 轻量级 (~5KB gzipped)
• 🔧 零依赖
• 🌍 国际化友好

浏览器支持

• Chrome >= 54
• Firefox >= 63
• Safari >= 10.1
• Edge >= 79

许可证

MIT License

贡献

欢迎提交 Pull Request 和 Issue！