logologo
Loading...
  • ENG
    • English
    • Français
    • Español
  • 2

    Cart

    • Watch multicolor
      $500
    • Airpods
      $500.00
    • Order Total : $1000.00
    • Go to your cartCheckout
  • 4

    Notification View all

    • 30-04-2024Today
      Alice Goodwin

      Fashion should be fun. It shouldn't be labelled intellectual.

    • 28-06-20241 hour ago
      Herry Venter

      I am convinced that there can be luxury in simplicity.

    • 04-08-2024Today
      Loain Deo

      I feel that things happen for open new opportunities.

    • 12-11-2024Yesterday
      Fenter Jessy

      Sometimes the simplest things are the most profound.

  • Bookmark

    • Dashboard
    • To-do
    • Chart
  • 15

  • user
    Ava Davis

    Admin

    • Account
    • Inbox
    • Task
    • Log Out
  • Pinned
  • General
  • Dashboards
    3
    • Default
    • Ecommerce
    • Education
  • Widgets
    • General
    • Chart
  • Page layout
    • Box Layout
    • RTL
    • Dark
  • Application
  • Project
    • Project list
    • Project create
  • File Manager
  • Kanban board
  • Ecommerce
    • Add Products
    • Product
    • Product Page
    • Category page
    • Product list
    • Payment Details
    • Order History
    • Invoices
      • Invoices 1
      • Invoices 2
      • Invoices 3
      • Invoices 4
      • Invoices 5
      • Invoices 6
    • Cart
    • Wishlist
    • Checkout
    • Pricing
  • Letter Box
  • Chat
    • Private Chat
    • Group Chat
  • Users
    • Users Profile
    • Users Edit
    • Users Cards
  • Bookmarks
  • Contacts
  • Tasks
  • Calendar
  • Social App
  • To-Do
  • Search Result
  • Components
  • buttons
  • Ui Kits
    • Typography
    • Avatars
    • Alert
    • Helper classes
    • Grid
    • Accordion
    • Tag pills
    • Modal
    • Popover
    • Progress bar
    • Tab bootstrap
    • Tooltip
    • Dropdown
    • List
  • Bonus Ui
    • Scrollable
    • Tree view
    • Toasts
    • Rating
    • Dropzone
    • Tour
    • Sweetalert2
    • Animated Modal
    • Slider
    • Ribbons
    • Pagination
    • Breadcrumb
    • Range slider
    • Image cropper
    • Basic Card
    • Creative Card
    • Dragable Card
    • Timeline
  • Animation
    • aos
    • wow
  • Icon
    • Fontawesome icon
    • Feather icon
    • Iconly icon
    • Themify Icon
  • Charts
    • Echarts
    • Apex Chart
    • Google Chart
    • Sparkline chart
    • Flot Chart
    • Knob Chart
    • Morris Chart
    • Chatjs Chart
    • Chartist Chart
    • Peity Chart
  • Tables & Forms
  • Forms
    • form-control
      • Base input
      • Form validation
      • Checkbox & Radio
      • Input group
      • Input mask
      • Mega Options
    • Form Widgets
      • Datepicker
      • Touchspin
      • Select2
      • Switch
      • Typehead
      • 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
    • Ex. Data Tables
    • Js Grid Table
  • Pages
  • Landing page
  • Sample page
  • Internationalization
  • Starter kit
  • Others
    • Error Page
      • Error page 1
      • Error page 2
      • Error page 3
      • Error page 4
      • Error page 5
      • Error page 6
    • Authentication
      • Login Simple
      • Login with bg image
      • Login with image two
      • Login With validation
      • Login with tooltip
      • Login with sweetalert
      • Register Simple
      • Register with Bg Image
      • Register with image two
      • Register wizard
      • Unlock User
      • Forget 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
  • Miscellaneous
  • Gallery
    • Gallery Grid
    • Gallery Grid Desc
    • Masonary Gallery
    • Masonary With Desc
    • Hover Effects
  • Blog
    • Blog Details
    • Blog Single
    • Add Post
  • FAQ
  • Job Search
    • Card view
    • List view
    • Job details
    • Apply
  • Learning
    • Learning List
    • Learning Detailed
  • Maps
    • Data Map
    • Vector Maps
  • Editors
    • Quill 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-languageSelectclass 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 lanuage 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 2024 © Admiro theme by pixelstrap.

Hand crafted & made with