FormatByte
FormatByteは、バイト値を人間が読みやすい形式にフォーマットするために使用されます。
インポート
import { FormatByte } from "@yamada-ui/react"
使い方
FormatByteは、バイト値の大きさに基づいて最適な単位(B, KB, MB, GB, TB)を自動的に選択します。
FormatByteは、内部的にIntl.NumberFormatを使用しています。
FormatByteは、navigator.languageに基づいてlocaleを自動的に設定します。
編集可能な例
<VStack gap="sm"> <FormatByte value={1024} /> <FormatByte value={1024 * 1024} /> <FormatByte value={1024 * 1024 * 1024} /> <FormatByte value={1024 * 1024 * 1024 * 1024} /> </VStack>
ロケールを変更する
ロケールを変更する場合は、localeに値を設定します。
編集可能な例
<Grid templateColumns="auto 1fr" gap="sm"> <Text fontWeight="semibold">en-US</Text> <FormatByte value={1024} locale="en-US" /> <Text fontWeight="semibold">ja-JP</Text> <FormatByte value={1024} locale="ja-JP" /> <Text fontWeight="semibold">de-DE</Text> <FormatByte value={1024} locale="de-DE" /> <Text fontWeight="semibold">fr-FR</Text> <FormatByte value={1024} locale="fr-FR" /> <Text fontWeight="semibold">zh-CN</Text> <FormatByte value={1024} locale="zh-CN" /> </Grid>
コンフィグからカスタマイズする
アプリケーション全体のロケールの設定をしたい場合は、コンフィグをカスタマイズします。
import { UIProvider, extendConfig } from "@yamada-ui/react"const customConfig = extendConfig({locale: "ja-JP",})const App = () => {return (<UIProvider config={customConfig}><YourApplication /></UIProvider>)}
コンフィグをもっと学びたい場合は、コンフィグをカスタマイズするをご覧ください。
単位を変換する
単位を変換する場合は、unitにbyteまたはbitを設定します。デフォルトは、byteです。
編集可能な例
<Grid templateColumns="auto 1fr" gap="sm"> <Text fontWeight="semibold">Bytes</Text> <FormatByte value={1024} unit="byte" /> <Text fontWeight="semibold">Bits</Text> <FormatByte value={1024} unit="bit" /> </Grid>
単位の表示を変更する
単位の表示を変更する場合は、unitDisplayに値を設定します。
編集可能な例
<Grid templateColumns="auto 1fr" gap="sm"> <Text fontWeight="semibold">Short</Text> <FormatByte value={1024} unitDisplay="short" /> <Text fontWeight="semibold">Narrow</Text> <FormatByte value={1024} unitDisplay="narrow" /> <Text fontWeight="semibold">Long</Text> <FormatByte value={1024} unitDisplay="long" /> </Grid>
GitHubでこのページを編集する