logo polydile dile-components


Web Component to check the network status (online / offline).


npm i @dile/dile-network


Import the component.

import '@dile/dile-network/dile-network.js';

Use the component


This component cheks the network status and can display a message in a overlay layer when the network is offline. The message can be configured by a "offLineLabel" property.


Useful methods

Custom events

The event detail is an object containing a onLine bolean property. True means online and false mean offline.

Style customization

To customize the component style (the offline message box) it is possible to use some of the dile-persistent-toast custom properties. In addition there are some specific dile-network custom properties.

Custom propertyDescriptionDefault
--dile-network-toast-paddingOverlay layer padding0.65rem
--dile-network-toast-background-colorOverlay layer background color#e33
--dile-network-label-text-colorMessage text color#fff
--dile-network-warning-icon-colorColor of the warning icon dsplayed on the message#fff
--dile-network-close-icon-colorClose icon color#fff

dile-network demos

Default network status component

<dile-network showOffLineStatus></dile-network>
<p style="margin-bottom: 0;"><i><b>Go offline to see this component in action.</b></i></p>

It is possible to simulate offline status usign the browser developer tools. To do that go to the network tab on the developer tools and select "offline" in the throttling combo box.