Skip to main content

JapaneseText3 完整功能示例

🌟 组件概述

JapaneseText3 是一个功能强大的日语学习组件,支持注音、翻译、笔记、键盘快捷键等全方位功能。本示例展示了所有可用功能。

📚 基础示例

简单文本显示

📝

没有文本内容

请提供要显示的日文文本。

🎯 完整功能示例

综合示例 - 日本旅行对话

📝

没有文本内容

请提供要显示的日文文本。

🎨 主题和样式示例

暗色主题示例

📝

没有文本内容

请提供要显示的日文文本。

📖 学习场景示例

语法练习 - 敬语表达

📝

没有文本内容

请提供要显示的日文文本。

🎵 文学作品示例

俳句 - 松尾芭蕉

📝

没有文本内容

请提供要显示的日文文本。

🚀 高级功能示例

复杂语法结构

📝

没有文本内容

请提供要显示的日文文本。

🎛️ 简洁控制面板功能

控制面板已简化为4个核心功能开关:

基本显示控制

  • 注音 (F) - 显示/隐藏假名注音
  • 翻译 (T) - 显示/隐藏中文翻译
  • 笔记 (N) - 显示/隐藏词汇笔记
  • 行号 (L) - 显示/隐藏行号(圆形小巧设计)

这4个开关涵盖了日语学习的核心需求,界面简洁清爽。行号采用精致的圆形设计,小巧而不突兀。

📝 笔记交互功能

打开笔记

  • 点击高亮的词汇即可打开对应笔记
  • 笔记面板会出现在词汇下方,包含详细说明

关闭笔记

  • 点击笔记面板右上角的 × 按钮
  • 点击页面任意空白处(点击其他词汇或背景区域)
  • 按 ESC 键

移动端优化

  • 移动端笔记面板会居中显示
  • 添加半透明背景遮罩
  • 点击遮罩区域也可关闭笔记

⌨️ 键盘快捷键使用指南

以下快捷键在上述示例中都可以使用:

  • F - 切换注音显示/隐藏
  • T - 切换翻译显示/隐藏
  • N - 切换笔记显示/隐藏
  • L - 切换行号显示/隐藏
  • +/= - 增大字体
  • - - 减小字体
  • ESC - 关闭当前打开的笔记
  • - 下一个笔记
  • - 上一个笔记

🎯 使用场景

1. 日语教学

  • 显示注音帮助学习发音
  • 提供详细的语法和文化注释
  • 支持不同难度级别的内容

2. 阅读理解

  • 对照翻译提高理解
  • 词汇笔记扩展知识
  • 行号便于讨论和引用

3. 考试准备

  • 语法点详细解释
  • 文化背景知识补充
  • 发音标注和练习

4. 文学欣赏

  • 俳句、短歌等文学作品展示
  • 古典文学的现代解读
  • 文学技巧和美学解析

🔧 自定义配置

基本配置选项

initialPreferences={{
display: {
showFurigana: true, // 显示注音
showTranslation: true, // 显示翻译
showNotes: true, // 显示笔记
showLineNumbers: false // 显示行号
}
}}

快速配置模板

学习模式(显示所有功能)

initialPreferences={{
display: {
showFurigana: true,
showTranslation: true,
showNotes: true,
showLineNumbers: true
}
}}

阅读模式(简洁显示)

initialPreferences={{
display: {
showFurigana: true,
showTranslation: false,
showNotes: false,
showLineNumbers: false
}
}}

注音练习模式

initialPreferences={{
display: {
showFurigana: false, // 隐藏注音进行练习
showTranslation: true,
showNotes: true,
showLineNumbers: true
}
}}

这个组件提供了丰富的日语学习功能,可以根据不同的使用场景进行灵活配置。通过注音、翻译、笔记等功能的组合使用,能够显著提升日语学习和阅读的效果。