Locale Select

ロケールを切り替えるための選択。

使用法

LocaleSelectコンポーネントはSelectMenuコンポーネントを拡張しているため、color、variant、sizeなどのプロパティを渡すことができます。

このコンポーネントはi18nシステムで使用することを意図しています。詳細については、ガイドを参照してください。

このコンポーネントはi18nシステムで使用することを意図しています。詳細はガイドを参照してください。

フラグはUnicode文字を使用して表示されます。これにより、異なる表示になる可能性があります。例えば、WindowsのMicrosoft Edgeでは、OSフォントにはフラグアイコンが付属していないため、代わりにISO 3166—1 alpha—2コードが表示されます。

ロケール

localesプロパティを@nuxt/ui/localeのロケールの配列で使用します。

<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'

const locale = ref('en')
</script>

<template>
  <ULocaleSelect v-model="locale" :locales="Object.values(locales)" class="w-48" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import * as locales from '@nuxt/ui/locale'

const locale = ref('en')
</script>

<template>
  <ULocaleSelect v-model="locale" :locales="Object.values(locales)" class="w-48" />
</template>

アプリケーションで必要なロケールのみを渡すことができます。

<script setup lang="ts">
import { en, es, fr } from '@nuxt/ui/locale'

const locale = ref('en')
</script>

<template>
  <ULocaleSelect v-model="locale" :locales="[en, es, fr]" />
</template>

動的ロケール

Nuxt i 18 nで使用できます：

<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'

const { locale, setLocale } = useI18n()
</script>

<template>
  <ULocaleSelect
    :model-value="locale"
    :locales="Object.values(locales)"
    @update:model-value="setLocale($event)"
  />
</template>

Vue i 18 nで使用できます：

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import * as locales from '@nuxt/ui/locale'

const { locale, setLocale } = useI18n()
</script>

<template>
  <ULocaleSelect
    :model-value="locale"
    :locales="Object.values(locales)"
    @update:model-value="setLocale($event)"
  />
</template>

API

Props

Prop	Default	Type
`modelValue`		`string`
`locales`		`Locale<any>[]`
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`avatar`		`AvatarProps` Display an avatar on the left side.
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`loading`		`boolean` When `true`, the loading icon will be displayed.
`icon`		`any` Display an icon based on the `leading` and `trailing` props.
`color`	`'primary'`	`"error" \| "neutral" \| "primary" \| "secondary" \| "success" \| "info" \| "warning"`
`autofocus`		`boolean`
`disabled`		`boolean` When `true`, prevents the user from interacting with listbox
`open`		`boolean` The controlled open state of the Combobox. Can be binded with `v-model:open`.
`defaultOpen`		`boolean` The open state of the combobox when it is initially rendered. Use when you do not need to control its open state.
`resetSearchTermOnBlur`	`true`	`boolean` Whether to reset the searchTerm when the Combobox input blurred
`resetSearchTermOnSelect`	`true`	`boolean` Whether to reset the searchTerm when the Combobox value is selected
`resetModelValueOnClear`		`boolean` When `true` the `modelValue` will be reset to `null` (or `[]` if `multiple`)
`highlightOnHover`		`boolean` When `true`, hover over item will trigger highlight
`by`		`string \| (a: Locale<any>[], b: Locale<any>[]): boolean` Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared.
`defaultValue`		`string` The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu.
`multiple`		`false` Whether multiple options can be selected or not.
`required`		`boolean`
`id`		`string`
`placeholder`		`string` The placeholder text when the select is empty.
`searchInput`	`false`	`boolean \| Omit<InputProps<AcceptableValue, ModelModifiers>, "modelValue" \| "defaultValue">` Whether to display the search input or not. Can be an object to pass additional props to the input. `{ placeholder: 'Search...', variant: 'none' }` Set `autofocus: false` to prevent the search input from being focused when the menu opens (e.g. to avoid opening the virtual keyboard on touch devices).
`variant`	`'outline'`	`"outline" \| "soft" \| "subtle" \| "ghost" \| "none"`
`trailingIcon`	`appConfig.ui.icons.chevronDown`	`any` The icon displayed to open the menu.
`selectedIcon`	`appConfig.ui.icons.check`	`any` The icon displayed when an item is selected.
`clear`	`false`	`false \| false & Partial<Omit<ButtonProps, LinkPropsKeys>>` Display a clear button to reset the model value. Can be an object to pass additional props to the Button.
`clearIcon`	`appConfig.ui.icons.close`	`any` The icon displayed in the clear button.
`content`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }`	`ComboboxContentProps & Partial<EmitsToProps<DismissableLayerEmits>>` The content of the menu.
`arrow`	`false`	`boolean \| ComboboxArrowProps` Display an arrow alongside the menu. `{ rounded: true }`
`portal`	`true`	`string \| false \| true \| HTMLElement` Render the menu in a portal.
`virtualize`	`false`	`boolean \| { overscan?: number ; estimateSize?: number \| ((index: number) => number) \| undefined; } \| undefined` Enable virtualization for large lists. Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885).
`valueKey`	`'code'`	`"code"` When `items` is an array of objects, select the field to use as the value instead of the object itself.
`labelKey`	`'name'`	`"name" \| "code" \| "dir" \| "messages"` When `items` is an array of objects, select the field to use as the label.
`descriptionKey`	`'description'`	`"name" \| "code" \| "dir" \| "messages"` When `items` is an array of objects, select the field to use as the description.
`modelModifiers`		`Omit<ModelModifiers, "lazy">`
`highlight`		`boolean` Highlight the ring color like a focus state.
`fixed`		`boolean` Keep the mobile text size on all breakpoints.
`createItem`	`false`	`boolean \| "always" \| { position?: "top" \| "bottom" ; when?: "empty" \| "always" \| undefined; } \| undefined` Determines if custom user input that does not exist in options can be added.
`filterFields`	`[labelKey]`	`string[]` Fields to filter items by.
`ignoreFilter`	`false`	`boolean` When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
`autofocusDelay`		`number`
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`leadingIcon`		`any` Display an icon on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`loadingIcon`	`appConfig.ui.icons.loading`	`any` The icon when the `loading` prop is `true`.
`ui`		{ base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; value?: SlotClass; placeholder?: SlotClass; arrow?: SlotClass; content?: SlotClass; viewport?: SlotClass; group?: SlotClass; empty?: SlotClass; label?: SlotClass; separator?: SlotClass; item?: SlotClass; itemLeadingIcon?: SlotClass; itemLeadingAvatar?: SlotClass; itemLeadingAvatarSize?: SlotClass; itemLeadingChip?: SlotClass; itemLeadingChipSize?: SlotClass; itemTrailing?: SlotClass; itemTrailingIcon?: SlotClass; itemWrapper?: SlotClass; itemLabel?: SlotClass; itemDescription?: SlotClass; input?: SlotClass; focusScope?: SlotClass; trailingClear?: SlotClass; }

Changelog

No recent changes

ColorModeSwitch

A Switch to toggle between light and dark mode.