Format

The Format components render locale-aware text with the browser’s Intl APIs. They read the locale from LocaleProvider and default to en-US when no provider is present.

Import

<script setup lang="ts">
import { Format } from '@destyler-ui/vue'
</script>

import { Format } from '@destyler-ui/react'

import { Format } from '@destyler-ui/solid'

<script lang="ts">
  import { Format } from '@destyler-ui/svelte/format'
</script>

Named exports FormatByte and FormatNumber are also available.

Basic usage

<script setup lang="ts">
import { Format } from '@destyler-ui/vue'
</script>

<template>
  <p>Price: <Format.Number :value="1234.5" format-style="currency" currency="USD" /></p>
  <p>File size: <Format.Byte :value="1450.45" /></p>
</template>

import { Format } from '@destyler-ui/react'

export function Example() {
  return (
    <>
      <p>Price: <Format.Number value={1234.5} style="currency" currency="USD" /></p>
      <p>File size: <Format.Byte value={1450.45} /></p>
    </>
  )
}

import { Format } from '@destyler-ui/solid'

export function Example() {
  return (
    <>
      <p>Price: <Format.Number value={1234.5} style="currency" currency="USD" /></p>
      <p>File size: <Format.Byte value={1450.45} /></p>
    </>
  )
}

<script lang="ts">
  import { Format } from '@destyler-ui/svelte/format'
</script>

<p>Price: <Format.Number value={1234.5} style="currency" currency="USD" /></p>
<p>File size: <Format.Byte value={1450.45} /></p>

API

Format.Number

Prop	Type	Default	Description
value	number	Required	Number to format.
Intl number options	Intl.NumberFormatOptions	Browser defaults	Options such as style, currency, unit, and notation.

Format.Byte

Prop	Type	Default	Description
value	number	Required	Byte size to format.
unit	'bit' | 'byte'	'byte'	Unit used for the result.
unitDisplay	'long' | 'short' | 'narrow'	'short'	Controls how the unit label is displayed.