Ngorei Doc
v.4.0.2
search
CTRL K

Ngorei NexaUI

Popovers

Dokumentasi komponen Popovers yang dapat digunakan dalam NexaUI framework.

Popover Dasar

Popover dasar dengan berbagai posisi yang dapat disesuaikan menggunakan atribut data-position top | right | bottom | left.

Demo:

Components

<!-- Top -->
<button class="nx-btn nx-popover" data-position="top">
  <img src="img/logo/500pxb.png" class="nx-avatar nx-avatar-sm" alt="User">
  <div class="popover-content">
    <div class="popover-header">
      <img src="img/logo/500pxb.png" class="nx-avatar" alt="User">
      <div class="user-info">
        <h4>John Doe</h4>
        <p class="user-role">Software Engineer</p>
      </div>
    </div>
    <div class="popover-body">
      <div class="user-stats">
        <div class="stat">
          <span class="stat-value">1.2K</span>
          <span class="stat-label">Followers</span>
        </div>
        <div class="stat">
          <span class="stat-value">234</span>
          <span class="stat-label">Following</span>
        </div>
      </div>
    </div>
  </div>
</button>

<!-- Right -->
<button class="nx-btn nx-popover" data-position="right">
  <img src="img/logo/500pxb.png" class="nx-avatar nx-avatar-sm" alt="User">
  <div class="popover-content notification-popover">
    <div class="popover-header">
      <h4>Notifikasi</h4>
      <span class="badge">3 Baru</span>
    </div>
    <div class="popover-body">
      <div class="notification-item">
        <img src="img/logo/500pxb.png" class="nx-avatar nx-avatar-sm" alt="User">
        <div class="notification-content">
          <p><strong>Ahmad</strong> mengomentari postingan Anda</p>
          <span class="notification-time">5 menit yang lalu</span>
        </div>
      </div>
      <div class="notification-item">
        <img src="img/logo/500pxb.png" class="nx-avatar nx-avatar-sm" alt="User">
        <div class="notification-content">
          <p><strong>Sarah</strong> menyukai foto Anda</p>
          <span class="notification-time">1 jam yang lalu</span>
        </div>
      </div>
      <div class="notification-item">
        <img src="img/logo/500pxb.png" class="nx-avatar nx-avatar-sm" alt="User">
        <div class="notification-content">
          <p><strong>Budi</strong> mengikuti Anda</p>
          <span class="notification-time">2 jam yang lalu</span>
        </div>
      </div>
    </div>
    <div class="popover-footer">
      <a href="#" class="view-all">Lihat Semua Notifikasi</a>
    </div>
  </div>
</button>

<!-- Bottom -->
<button class="nx-btn nx-popover" data-position="bottom">
  <img src="img/logo/500pxb.png" class="nx-avatar nx-avatar-sm" alt="User">
  <div class="popover-content menu-popover">
    <div class="menu-item">
      <i class="fas fa-edit"></i>
      <span>Edit Profil</span>
    </div>
    <div class="menu-item">
      <i class="fas fa-cog"></i>
      <span>Pengaturan</span>
    </div>
    <div class="menu-divider"></div>
    <div class="menu-item danger">
      <i class="fas fa-sign-out-alt"></i>
      <span>Keluar</span>
    </div>
  </div>
</button>

<!-- Left -->
<button class="nx-btn nx-popover" data-position="left">
  <img src="img/logo/500pxb.png" class="nx-avatar nx-avatar-sm" alt="User">
  <div class="popover-content">
    <div class="popover-header">
      <img src="img/logo/500pxb.png" class="nx-avatar" alt="User">
      <div class="user-info">
        <h4>John Doe</h4>
        <p class="user-role">Software Engineer</p>
      </div>
    </div>
    <div class="popover-body">
      <div class="user-stats">
        <div class="stat">
          <span class="stat-value">1.2K</span>
          <span class="stat-label">Followers</span>
        </div>
        <div class="stat">
          <span class="stat-value">234</span>
          <span class="stat-label">Following</span>
        </div>
      </div>
    </div>
  </div>
</button>
        
<!-- Value position ( top | right | bottom | left ) -->
<Popover 
 position="right" 
 avatar="img/logo/500pxb.png" 
 name="John Doe" 
 role="Software Engineer">
    <div  class="user-stats">
        <div  class="stat">
            <span  class="stat-value">1.2K</span>
            <span  class="stat-label">Followers</span>
        </div>
        <div  class="stat">
            <span  class="stat-value">234</span>
            <span  class="stat-label">Following</span>
        </div>
    </div>
</Popover>