Format Bytes

<pc-format-bytes>

1.0.0-alpha.1

experimental

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

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>

Code

Edit

Demos#

Formatting bytes#

Set the value attribute to a number to get the value in bytes.

<pc-format-bytes value="12"></pc-format-bytes>
<br />
<pc-format-bytes value="1200"></pc-format-bytes>
<br />
<pc-format-bytes value="1200000"></pc-format-bytes>
<br />
<pc-format-bytes value="1200000000"></pc-format-bytes>

Code

Edit

Formatting bits#

To get the value in bits, set the unit attribute to bit.

<pc-format-bytes value="12" unit="bit"></pc-format-bytes>
<br />
<pc-format-bytes value="1200" unit="bit"></pc-format-bytes>
<br />
<pc-format-bytes value="1200000" unit="bit"></pc-format-bytes>
<br />
<pc-format-bytes value="1200000000" unit="bit"></pc-format-bytes>

Code

Edit

Localisation#

Use the lang attribute to set the number formatting locale.

<pc-format-bytes value="12" lang="fr"></pc-format-bytes>
<br />
<pc-format-bytes value="1200" lang="fr"></pc-format-bytes>
<br />
<pc-format-bytes value="1200000" lang="fr"></pc-format-bytes>
<br />
<pc-format-bytes value="1200000000" lang="fr"></pc-format-bytes>

Code

Edit

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.

<pc-format-bytes value="12" use-si></pc-format-bytes>
<br />
<pc-format-bytes value="1200" use-si></pc-format-bytes>
<br />
<pc-format-bytes value="1200000" use-si></pc-format-bytes>
<br />
<pc-format-bytes value="1200000000" use-si></pc-format-bytes>

Code

Edit

Eigenschaften#

Name	Beschreibung	Standard
`value`	The number to format in bytes. Typ: `number`	`0`
`unit`	The type of unit to display. Typ: `"byte" \| "bit"`	`"byte"`
`display`	Determines how to display the result. (Narrow: 100B, Short: 100 B, Long: 100 bytes) Typ: `"long" \| "short" \| "narrow"`	`"short"`
`useSI` `use-si`	Forces the component to use the SI standard for formatting. This overrides locale‐specific rules. Typ: `boolean`	`false`
`updateComplete`	Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde.	‐

Erfahre mehr über Attribute und Eigenschaften.

Importieren#

Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.

CDN (Skript‐Tag)

CDN (Import)

npm (Import)

Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in dein HTML ein.

  <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/format-bytes/format-bytes.js"></script> 

Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

  import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/format-bytes/format-bytes.js"; 

Um diese Komponente manuell via npm zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

import "placer-toolkit/dist/components/format-bytes/format-bytes.js";