pp-display

The pp-display attribute is used to hide and show an element in the user interface by specifying the duration in milliseconds. It is commonly used to temporarily hide and show an element after a certain period, such as displaying a notification message or a loading indicator, or removing an element from the user interface.

Use Cases

Display: Use when you need the element to be completely removed from the layout. For example, conditionally showing or hiding elements based on user interactions or media queries.

Syntax

pp-display="duration": Hides the element after the specified duration. The duration can be specified in milliseconds (ms), seconds (s), or minutes (m). If no unit is provided, it will be considered as milliseconds by default.
pp-display="{'end': 'duration'}": Hides the element after the specified duration. The duration can be specified in milliseconds (ms), seconds (s), or minutes (m). If no unit is provided, it will be considered as milliseconds by default.
pp-display="{'start': 'duration'}": Hides the element and shown after the specified duration. The duration can be specified in milliseconds (ms), seconds (s), or minutes (m). If no unit is provided, it will be considered as milliseconds by default.
pp-display="{'start': 'duration', 'end': 'duration'}": Hides the element and shown after the start duration and hides it after the end duration. The durations can be specified in milliseconds (ms), seconds (s), or minutes (m). If no unit is provided, it will be considered as milliseconds by default.

Note: The pp-display="duration" and pp-display="{'end': 'duration'}" attributes both hide the element after the specified duration. They work in the same way and are just different syntax options for achieving the same functionality.

Example Usage

<div pp-display="3000">This element will be hidden after 3000 mili seconds</div>
  <div pp-display="5000ms">This element will be hidden after 5000 mili seconds</div>
  <div pp-display="10s">This element will be hidden after 10 seconds</div>
  <div pp-display="1m">This element will be hidden after 1 minute</div>
  <hr>
  <div pp-display="{'end': '3000'}">This element will be hidden after 3000 mili seconds</div>
  <div pp-display="{'end': '5000ms'}">This element will be hidden after 5000 mili seconds</div>
  <div pp-display="{'end': '10s'}">This element will be hidden after 10 seconds</div>
  <div pp-display="{'end': '1m'}">This element will be hidden after 1 minute</div>
  <hr>
  <div pp-display="{'start': '3000'}">This element will be hidden and shown after 3000 mili seconds</div>
  <div pp-display="{'start': '5000ms'}">This element will be hidden and shown after 5000 mili seconds</div>
  <div pp-display="{'start': '10s'}">This element will be hidden and shown after 10 seconds</div>
  <div pp-display="{'start': '1m'}">This element will be hidden and shown after 1 minute</div>
  <hr>
  <div pp-display="{'start': '3000', 'end': '5000'}">This element will be hidden and shown after 3000 mili seconds and hidden after 5000 mili seconds</div>
  <div pp-display="{'start': '5000ms', 'end': '10s'}">This element will be hidden and shown after 5000 mili seconds and hidden after 10 seconds</div>
  <div pp-display="{'start': '10s', 'end': '1m'}">This element will be hidden and shown after 10 seconds and hidden after 1 minute</div>
  <div pp-display="{'start': '1m', 'end': '2m'}">This element will be hidden and shown after 1 minute and hidden after 2 minutes</div>