ms.languages

Examples

Show language dropdown (vuejs themes)

<div class="language-dropdown dropdown">
    <span role="button" class="d-inline-flex align-items-center justify-content-between border-0 bg-transparent py-2" data-bs-toggle="dropdown">
        <span v-if="ms.user.language">{{ms.settings.language_details[ms.user.language].nativeName}}</span>
        <i class="bi bi-chevron-down ms-2 lh-1"></i>
    </span>
    <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0">
        <li v-if="ms.user.language" class="selected-langauge">
             <span role="button" class="dropdown-item d-flex align-items-center" role="button">
                <span class="dropdown-radio me-2 border border-4 border-primary rounded-circle overflow-hidden d-block" style="height:15px;width:15px;"></span>
                <span class="dropdown-value">{{ms.settings.language_details[ms.user.language].nativeName}}</span>
            </span>
        </li>
        <li><hr class="dropdown-divider" /></li>
        <template v-for="language in ms.settings.languages">
            <li v-if="language != ms.user.language" :class="{'selected-langauge':language == ms.user.language}">
                 <span role="button" class="dropdown-item d-flex py-2 align-items-center" role="button" @click="ms.setPreferences({language})">
                    <span class="dropdown-radio me-2 border border-dark rounded-circle overflow-hidden d-block" :class="{'border-4':language == ms.user.language}" style="height:15px;width:15px;"></span>
                    <span class="dropdown-value">{{ms.settings.language_details[language].nativeName}} - <span class="lang fw-bold text-dark">{{language}}</span></span>
                </span>
            </li>
        </template>
    </ul>
</div>

Show language dropdown (angular themes)

<span ms-widget="ms.languages">
    <select data-ng-model="selected_language" ng-init="selected_language=base_language"
            class="ms-bg-none ms-br-none"
            data-ng-change="setLanguage(selected_language)"
            data-ng-options="language for language in  languages">
    </select>
</span>