Format Bytes
<wa-format-bytes>
Formats a number as a human readable bytes value.
<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('input', () => (formatter.value = input.value || 0)); </script>
Examples
Jump to heading
Formatting Bytes
Jump to heading
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
Jump to heading
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
Jump to heading
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>
Importing
Jump to heading
Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.
To manually import this component from NPM, use the following code.
import '@awesome.me/webawesome/dist/components/format-bytes/format-bytes.js';
To manually import this component from React, use the following code.
import WaFormatBytes from '@awesome.me/webawesome/dist/react/format-bytes';
Attributes & Properties
Jump to heading
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
css |
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type
CSSResultGroup | undefined |
||
customStates |
Methods for setting and checking custom states.
Type
objectDefault
{ /** Adds or removes the specified custom state. / set: (customState: string, active: boolean) => { if (!Boolean(this.internals?.states)) return; try { if (active) { this.internals.states.add(customState); } else { this.internals.states.delete(customState); } } catch (e) { if (String(e).includes("must start with '--'")) { / eslint-disable-next-line / console.error('Your browser implements an outdated version of CustomStateSet. Consider using a polyfill'); } else { throw e; } } }, /* Determines whether or not the element currently has the specified state. */ has: (customState: string) => { if (!Boolean(this.internals?.states)) return false; try { return this.internals.states.has(customState); } catch { return false; } }, } |
||
displaydisplay |
Determines how to display the result, e.g. "100 bytes", "100 b", or "100b".
Type
'long' | 'short' | 'narrow'Default
'short' |
||
unitunit |
The type of unit to display.
Type
'byte' | 'bit'Default
'byte' |
||
valuevalue |
The number to format in bytes.
Type
numberDefault
0 |
Methods
Jump to heading
Learn more about methods.
| Name | Description | Arguments |
|---|---|---|
relayNativeEvent() |
Given a native event, this function cancels it and dispatches it again from the host element using the desired event options. |
event: Event,
eventOptions: EventInit
|