Language

Last updated: 20 days ago

OrcaUI's language packs are stored in src/scripts/lang directory, using en-US English by default, with built-in multilingual support for framework internationalization; customize by modifying specific...

Language20 days ago

Basic Usage

The OrcaUI frontend framework uses English language pack (en-US) by default, with built-in support for Chinese and other languages. To use other language packs:

 
import orca from './node_modules/orcaui/src/script/orca';
import lang from './node_modules/orcaui/src/lang/zh-CN';
orca.lang=lang;

Global Configuration

If your project consistently uses one language, you can modify the lang property in the namespace file at:

 
'./node_modules/orcaui/src/script/global/namespace';

Custom Language Packs

There are two approaches for customizing language packs:

Global modification - directly edit language pack files (lang/en-US.ts) to change framework language globally
Instance-specific configuration - set the lang parameter for specific components. For example, the orca.Message module's options.lang parameter can set instance-specific language, with properties matching those in language pack's message section. This doesn't change global language pack, only affects specific instances.

 
import orca from './node_modules/orcaui/src/script/orca';
new orca.Message({
  content:'test',
  lang:{
    heading: {
            warn: 'Warning!',
            succ: 'Success!',
            error: 'Error!',
            issue: 'Question!',
            info: 'Information!',
        },
        content: {
            warn: 'Warning! Potential issues detected during operation, please check!',
            succ: 'Operation completed successfully!',
            error: 'Operation failed! An error occurred!',
            issue: 'Please confirm this operation!',
            info: 'System notification!',
        },
  }
})

We can modify default language using the Message module's lang parameter.

Output
HTML
JS

```
                
                
            
```

                
                demo0001.onclick = ()=>{
                  new orca.Message().show();
                }
                demo0002.onclick = ()=>{
                  new orca.Message({
                    lang:{
                      content:{
                        info:'Modified default info message content',
                      }
                    }
                  }).show();
                }

Language

Basic Usage

Global Configuration

Custom Language Packs

New Launch: 20% Off All Products