The Placer Toolkit alpha has
arrived! 🎉
Plenty of changes are coming your
way—some big, some breaking, some
even nuclear! Beware the changelog…
Format Bytes
<pc-format-bytes> Formats a number as a human‐readable byte value.
<div class="format-bytes-overview">
<p>
The file is <pc-format-bytes value="1000"></pc-format-bytes> in size.
</p>
<pc-input
label="Number to format"
type="number"
value="1000"
style="max-inline-size: 180px"
></pc-input>
</div>
<script>
const container = document.querySelector(".format-bytes-overview");
const formatter = container.querySelector("pc-format-bytes");
const input = container.querySelector("pc-input");
input.addEventListener("pc-input", () => (formatter.value = input.value || 0));
</script>Demos#
Formatting bytes#
Set the value attribute to a number to get the value in bytes.
Formatting bits#
To get the value in bits, set the unit attribute to bit.
Localisation#
Use the lang attribute to set the number formatting locale.
SI conventions
Add the use-si attribute to change the formatting of the component to follow SI conventions.
This property is experimental and renders the byte/bit unit as short instead of long.
Properties#
| Name | Description | Reflects | Default |
|---|---|---|---|
value | The number to format in bytes. Type: number |
| 0 |
unit | The type of unit to display. Type: "byte" | "bit" |
| "byte" |
display | Determines how to display the result. (Narrow: 100B, Short: 100 B, Long: 100 bytes) Type: "long" | "short" | "narrow" |
| "short" |
useSIuse-si | Forces the component to use the SI standard for formatting. This overrides locale‐specific rules. Type: boolean |
| false |
updateComplete | A read‐only promise that resolves when the component has finished updating. | ‐ |
Learn more about attributes and properties.
Importing#
If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.
To manually import this component from the CDN, copy this code snippet and paste it in your HTML.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.1/cdn/components/format-bytes/format-bytes.js"></script>To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.1/cdn/components/format-bytes/format-bytes.js";To manually import this component from npm, copy this code snippet and paste it in your JavaScript file.
import "placer-toolkit/dist/components/format-bytes/format-bytes.js";