文件大小1.45 kB
import { FormatByte, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Text textStyle="lg">
File size: <FormatByte value={1450.45} />
</Text>
)
}
用法
import { FormatByte } from "@chakra-ui/react"<FormatByte value={1000} />示例
大小
格式化函数适用于任何大小的字节。
50 字节
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>
)
}
格式化比特
使用 unit 属性将字节格式更改为比特。
文件大小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>
)
}
语言环境
将 FormatByte 组件包装在 LocaleProvider 中以更改语言环境。
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>
)
}
单位显示
使用 unitDisplay 属性将字节格式更改为紧凑表示法。
50.3kB
50.3 kB
50.3 千字节
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>
)
}
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
value * | number要格式化的字节大小 | |
unit | 'bit' | 'byte'要显示的单位粒度 | |
unitDisplay | 'long' | 'short' | 'narrow'单位显示方式 |