3.0.0-alpha.4 Alpha
Light Dark Light Dark System Search /

Format Bytes

<wa-format-bytes> Since 2.0 stable

Formats a number as a human readable bytes value.

The file is in size. 

<div class="format-bytes-overview">
  The file is <wa-format-bytes value="1000"></wa-format-bytes> in size. <br /><br />
  <wa-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></wa-input>
</div>

<script>
  const container = document.querySelector('.format-bytes-overview');
  const formatter = container.querySelector('wa-format-bytes');
  const input = container.querySelector('wa-input');

  input.addEventListener('wa-input', () => (formatter.value = input.value || 0));
</script>

Examples

Formatting Bytes

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




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

Formatting Bits

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




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

Localization

Use the lang attribute to set the number formatting locale.




<wa-format-bytes value="12" lang="de"></wa-format-bytes><br />
<wa-format-bytes value="1200" lang="de"></wa-format-bytes><br />
<wa-format-bytes value="1200000" lang="de"></wa-format-bytes><br />
<wa-format-bytes value="1200000000" lang="de"></wa-format-bytes>

Properties

Name Description Reflects
value
value
The number to format in bytes.
Type number
Default 0
unit
unit
The type of unit to display.
Type 'byte' | 'bit'
Default 'byte'
display
display
Determines how to display the result, e.g. "100 bytes", "100 b", or "100b".
Type 'long' | 'short' | 'narrow'
Default 'short'

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code.

import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/format-bytes/format-bytes.js';
 Coming soon! Coming soon!
    No results