• Loading...
  • English (US)
    Deutsch
    Español
    Français
    Português (BR)
    简体中文
    لعربية (ae)
  • 3
    Cart items
    • Wireless Headphones
      $75
    • Ladies Hand Bag
      $49
    • Advanced Smart Watch
      $87.03
    • Proceed to checkout
  • Notifications
    4 unread
    • General Update

      New features are now available!
    • Success Message

      The profile was successfully updated.
    • Support Ticket Submitted

      We need your attention on ticket #45678.
    • Low Inventory Alert

      Only 5 items left in inventory.
  • Bookmark
    • Forms
      Profile
      Tables
    • Add Bookmark
    • Back
    • Account
    • Inbox
    • Taskboard
    • Settings
    • Log out
  • Back
  • Pinned
  • General
  • Dashboard
    • Default
    • Ecommerce
  • Widgets
    • General
    • Chart
  • Page layout
    • Boxed
    • RTL
    • Dark Layout
    • Hide Nav Scroll
    • Footer Light
    • Footer Dark
    • Footer Fixed
  • Applications
  • Projects
    • Project Details
    • Project List
    • Create new
  • File manager
  • kanban Board
  • Ecommerce
    • Products
      • Add Product
      • Products Grid
      • Products List
      • Product Details
    • Category
    • Seller
      • Seller List
      • Seller Details
    • Orders
      • Order History
      • Order Details
    • Invoices
      • Invoice-1
      • Invoice-2
      • Invoice-3
      • Invoice-4
      • Invoice-5
      • Invoice-6
    • Cart
    • Wishlist
    • Checkout
    • Manage Review
    • Settings
  • Mail Box
  • Chat
    • Private Chat
    • Group Chat
  • Users
    • User Profile
    • Add User
    • User List
    • User Cards
    • Roles & Permission
  • Reports
    • Products
    • Sales
    • Sales Return
    • Customer Order
  • Bookmarks
  • Contacts
  • Tasks
  • Calendar
  • Social App
  • To-Do
  • Search Result
  • Forms & Table
  • Forms
    • Form Controls
      • Form Validation
      • Base Inputs
      • Checkbox & Radio
      • Input Groups
      • Input Mask
      • Mega Options
    • Form Widgets
      • Datepicker
      • Touchspin
      • Select2
      • Switch
      • Typeahead
      • Clipboard
    • Form layout
      • Form Wizard 1
      • Form Wizard 2
      • Two Factor
  • Tables
    • Bootstrap Tables
      • Basic Tables
      • Table components
    • Data Tables
      • Basic Init
      • Advance Init
      • API
      • Data Sources
      • Extensions
    • Js Grid Table
  • Components
  • Ui Kits
    • Typography
    • Avatars
    • Divider
    • helper classes
    • Grid
    • Tags & pills
    • Progress
    • Modal
    • Alert
    • Popover
    • Placeholders
    • Tooltip
    • Dropdown
    • Accordion
    • Tabs
    • Offcanvas
    • Navigate Links
    • Lists
  • Bonus Ui
    • Scrollable
    • Tree view
    • Toasts
    • BlockUI
    • Rating
    • dropzone
    • Tour
    • Sweet Alert2
    • Animated Modal
    • Owl Carousel
    • Ribbons
    • Pagination
    • ScrollSpy
    • Breadcrumb
    • Range Slider
    • Ratios
    • Image cropper
    • Basic Card
    • Creative Card
    • Draggable Card
    • Timeline
  • Animations
    • Animate
    • Scroll Reveal
    • AOS animation
    • Tilt Animation
    • Wow Animation
    • Flash Icons
  • Icons
    • Flag icon
    • Fontawesome Icon
    • Ico Icon
    • Themify Icon
    • Feather icon
    • Weather Icon
  • Button
  • Charts
    • Apex Chart
    • Google Chart
    • Sparkline chart
    • Flot Chart
    • Knob Chart
    • Morris Chart
    • Chatjs Chart
    • Chartist Chart
    • Peity Chart
  • Pages
  • Landing page
  • Sample page
  • Internationalization
  • Starter kit
  • Error Pages
    • Error 403
    • Error 404
    • Error 500
  • Authentication
    • Login Simple
    • Login with bg image
    • Login with image two
    • Login With Image Three
    • Login with tooltip
    • Login with sweetalert
    • Register Simple
    • Register with Bg Image
    • Register with image two
    • Register wizard
    • Account Restricted
    • Unlock User
    • Forgot Password
    • Reset Password
    • Maintenance
  • Coming Soon
    • Coming Simple
    • Coming with Bg video
    • Coming with Bg Image
  • Email templates
    • Basic Email
    • Basic With Header
    • Ecomerce Template
    • Email Template 2
    • Ecommerce Email
    • Order Success
  • Manage API
  • Site Map
  • Pricing
  • FAQ
  • Subscribed User
  • Miscellaneous
  • Gallery
    • Gallery Grid
    • Gallery Grid Desc
    • Masonry Gallery
    • Masonry with Desc
    • Hover Effects
    • Gallery Placeholder
  • Blog
    • Blog
    • Blog Details
    • Add Blog
  • Jobs
    • Cards view
    • List View
    • Job Details
    • Candidates
    • Companies
    • Apply
  • Courses
    • Course List
    • Course Details
  • Maps
    • Maps JS
    • Vector Maps
  • Editors
    • Quill Editor
    • CK Editor
    • ACE Code Editor
  • Knowledgebase
  • Support Ticket

Internationalization

  1. Pages
  2. Internationalization
Internationalization
Static Sub Nav
  • Base
  • Advance
    • Scrollable
    • Tree View
    • Rating
  • Forms
  • Tables
Static Sub Nav
  • Base
  • Advance
    • ScrollableNew
    • Tree ViewFind
    • Rating
  • Forms
  • Tables
How to use it

Add a class .hdg, .hdg_main, .js-languagePageHdg, .hList, .hList_loose, .masthead-nav., js-languageList, .langChoice, .js-languageSelect class to any tag for language translate.

Add a language-picker plugin js

HTML Code

 <div class="site">  <div class="site-bd">    <div class="wrapper">      <div class="card">        <div class="card-header">          <h5 class="hdg hdg_main js-languagePageHdg">Internationalization</h5>        </div>        <div class="main" role="main">          <select class="langChoice js-languageSelect">            <option val="0">English</option>            <option val="1">German</option>            <option val="2">Russian</option>            <option val="3">Arabic</option>          </select>        </div>        <div class="card-body row">          <div class="col-lg-6">            <h5 class="hdg hdg_main js-languagePageHdg">Static Sub Nav</h5>            <div class="masthead" role="banner">              <ul class="icon-lists border navs-icon hList hList_loose masthead-nav js-languageList">                <li>                  <a href="#"><span> Base</span></a>                </li>                <li>                  <a href="#"><span> Advance</span></a>                  <ul class="hList hList_loose masthead-nav js-languageList">                    <li class="ps-4"><a href="#"><span>Scrollable</span></a></li>                    <li class="ps-4"><a href="#"><span>Tree View</span></a></li>                    <li class="ps-4"><a href="#"><span>Rating</span></a></li>                  </ul>                </li>                <li>                  <a href="#"><span data-mlr-text> Forms</span></a>                </li>                <li>                  <a href="#"><span data-mlr-text> Tables</span></a>                </li>              </ul>            </div>          </div>        </div>      </div>    </div>  </div> </div>
How to add language

You can also add other language according to below in js and add language type in langChoice.

var LANGUAGES = {
"English": {
"columns": [
"Base",
"Advance",
"scrollable",
"Tree View",
"Rating",
"News",
"Tables",
"Base",
"Advance",
"scrollable",
"Tree View",
"Rating",
"News",
"Tables"
],
"heading": "Static Sub Nav",
},
"German": {
"columns": [
"Basis",
"Fortschritt",
"scrollable",
"Baumansicht",
"Die Einschaltquote",
"Nachrichten",
"Tische",
"Basis",
"Fortschritt",
"scrollable",
"Baumansicht",
"Die Einschaltquote",
"Nachrichten",
"Tische"
],
"heading": "Statisches U-Boot Nav",
},
"Russian": {
"columns": [
"Основа",
"Прогресс",
"прокручиваемый",
"Представление Дерева",
"Оценка",
"новости",
"Столы",
"Основа",
"Прогресс",
"прокручиваемый",
"Представление Дерева",
"Оценка",
"новости",
"Столы"
],
"heading": "Статический Sub Военно - морской",
},
"Arabic": {
"columns": [
"قاعدة",
"مقدما",
"التمرير",
"عرض الشجرة",
"تصنيف",
"أخبار",
"الجداول",
"قاعدة",
"مقدما",
"التمرير",
"عرض الشجرة",
"تصنيف",
"أخبار",
"الجداول"
],
"heading": "صافي قيمة الأصول شبه الثابتة",
}
};

Copyright © Macao Theme By Pixelstrap