The <luna-format-byte> component formats raw byte values into human-readable strings using the browser's native Intl.NumberFormat API.
Paths
/lunadom/components/format-byte/format-byte.js REQUIRED
Basic Usage
File size:
Download:
Cache:
Unit Systems
Decimal (SI) - 1 KB = 1,000 bytes
Binary (IEC) - 1 KiB = 1,024 bytes
Display Formats
Short (default)
Long
Narrow
Precision Control
Default (2 decimals):
No decimals:
High precision:
Real-World Examples
File Sizes
Image.png:
Video.mp4:
Document.pdf:
Memory Usage
Available RAM:
Cache Size:
Customization
Attributes
value - Raw number of bytes to format (required)
unit - Unit system (decimal, binary, default: "decimal")
display - Unit label style (long, short, narrow, default: "short")
max-fraction-digits - Maximum decimal places (default: 2)
Example Code
<!-- Basic byte formatting -->
<luna-format-byte value="1500000"></luna-format-byte>
<!-- Decimal system (SI) -->
<luna-format-byte value="1000000" unit="decimal"></luna-format-byte>
<!-- Binary system (IEC) -->
<luna-format-byte value="1048576" unit="binary"></luna-format-byte>
<!-- Display formats -->
<luna-format-byte value="2500000" display="short"></luna-format-byte>
<luna-format-byte value="2500000" display="long"></luna-format-byte>
<luna-format-byte value="2500000" display="narrow"></luna-format-byte>
<!-- Precision control -->
<luna-format-byte value="1536000" max-fraction-digits="0"></luna-format-byte>
<luna-format-byte value="1536000" max-fraction-digits="4"></luna-format-byte>
<!-- Dynamic value -->
<luna-format-byte id="file-size" value="0"></luna-format-byte>
<script>
const formatter = document.getElementById('file-size');
formatter.setAttribute('value', '2457600');
</script>