File size: 1.45 kB
import { FormatByte, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Text textStyle="lg">
File size: <FormatByte value={1450.45} />
</Text>
)
}
用法
¥Usage
import { FormatByte } from "@chakra-ui/react"
<FormatByte value={1000} />
示例
¥Examples
尺寸
¥Sizes
格式化函数适用于任何大小的字节。
¥The format functions works for any size of bytes.
50 byte
5 kB
5 MB
5 GB
import { FormatByte, Stack, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack>
<Text textStyle="lg">
<FormatByte value={50} />
</Text>
<Text textStyle="lg">
<FormatByte value={5000} />
</Text>
<Text textStyle="lg">
<FormatByte value={5000000} />
</Text>
<Text textStyle="lg">
<FormatByte value={5000000000} />
</Text>
</Stack>
)
}
格式位
¥Format Bits
使用 unit
属性将字节格式更改为位。
¥Use the unit
prop to change the byte format to bits.
File size: 1.45 kb
import { FormatByte, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Text textStyle="lg">
File size: <FormatByte value={1450.45} unit="bit" />
</Text>
)
}
语言环境
¥Locale
将 FormatByte
组件封装在 LocaleProvider
中以更改语言环境。
¥Wrap the FormatByte
component within the LocaleProvider
to change the
locale.
de-DE
1,45 kBzh-CN
1.45 kBimport { FormatByte, HStack, LocaleProvider, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Text textStyle="lg">
<HStack>
<Text fontWeight="medium">de-DE</Text>
<LocaleProvider locale="de-DE">
<FormatByte value={1450.45} />
</LocaleProvider>
</HStack>
<HStack>
<Text fontWeight="medium">zh-CN</Text>
<LocaleProvider locale="zh-CN">
<FormatByte value={1450.45} />
</LocaleProvider>
</HStack>
</Text>
)
}
单元显示
¥Unit Display
使用 unitDisplay
属性将字节格式更改为紧凑表示法。
¥Use the unitDisplay
prop to change the byte format to compact notation.
50.3kB
50.3 kB
50.3 kilobytes
import { FormatByte, Stack, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack>
<Text textStyle="lg">
<FormatByte value={50345.53} unitDisplay="narrow" />
</Text>
<Text textStyle="lg">
<FormatByte value={50345.53} unitDisplay="short" />
</Text>
<Text textStyle="lg">
<FormatByte value={50345.53} unitDisplay="long" />
</Text>
</Stack>
)
}
属性
¥Props
Prop | Default | Type |
---|---|---|
value * | number The byte size to format | |
unit | 'bit' | 'byte' The unit granularity to display | |
unitDisplay | 'long' | 'short' | 'narrow' The unit display |