Ngorei - framework

Accordion Dasar

Contoh penggunaan accordion dasar dengan beberapa item yang dapat dibuka/tutup.

Demo:

Item 1 expand_more

Konten untuk item accordion pertama

Item 2 expand_more

Konten untuk item accordion kedua

Components

<div class="nx-accordion">
  <div class="nx-accordion-item">
    <div class="nx-accordion-header">
      Item 1
      <span class="material-icons icon">expand_more</span>
    </div>
    <div class="nx-accordion-content">
      Konten untuk item accordion pertama
    </div>
  </div>

<Accordion 
    title="Basic Accordion" 
    content="(Ini adalah contoh accordion sederhana)"
/>

Demo:

Basic Accordion expand_more

Ini adalah contoh accordion sederhana

Accordion dengan Tema

Contoh accordion dengan variasi tema warna.

Demo:

Item Tema Primary expand_more

Konten dengan tema primary

Components


<div class="nx-accordion theme-primary">
  <div class="nx-accordion-item">
    <div class="nx-accordion-header">
      Item Tema Primary
      <span class="material-icons icon">expand_more</span>
    </div>
    <div class="nx-accordion-content">
      Konten dengan tema primary
    </div>
  </div>
</div>

<<div>
</div>

Accordion Multiple

Accordion yang dapat membuka beberapa panel sekaligus dengan menambahkan class multiple.

Demo:

Panel 1 expand_more

Konten panel pertama

Panel 2 expand_more

Konten panel kedua

Components


<div class="nx-accordion multiple">
  <div class="nx-accordion-item">
    <div class="nx-accordion-header">
      Panel 1
      <span class="material-icons icon">expand_more</span>
    </div>
    <div class="nx-accordion-content">
      Konten panel pertama
    </div>
  </div>
  <div class="nx-accordion-item">
    <div class="nx-accordion-header">
      Panel 2
      <span class="material-icons icon">expand_more</span>
    </div>
    <div class="nx-accordion-content">
      Konten panel kedua
    </div>
  </div>
</div>

<<div>
</div>

Accordion Bersarang

Accordion yang dapat memiliki accordion lain di dalamnya.

Demo:

Parent Accordion expand_more

Child Accordion expand_more

Konten accordion anak

Components

<div class="nx-accordion">
  <div class="nx-accordion-item">
    <div class="nx-accordion-header">
      Parent Accordion
      <span class="material-icons icon">expand_more</span>
    </div>
    <div class="nx-accordion-content">
      <div class="nx-accordion">
        <div class="nx-accordion-item">
          <div class="nx-accordion-header">
            Child Accordion
            <span class="material-icons icon">expand_more</span>
          </div>
          <div class="nx-accordion-content">
            Konten accordion anak
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<Accordion 
    title="Rich Content" 
    icon="article"
    iconPosition="left"
    content='(
        <h3>Sub Heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    )'
/>

Demo:

article Rich Content

Sub Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Item 1
Item 2
Item 3

Accordion dengan Ikon Kustom

Accordion dengan ikon yang dapat dikustomisasi.

Demo:

Custom Icon expand_more

Accordion dengan ikon kustom

Components

<div class="nx-accordion">
  <div class="nx-accordion-item">
    <div class="nx-accordion-header">
      Custom Icon
      <span class="material-icons icon">expand_more</span>
    </div>
    <div class="nx-accordion-content">
      Accordion dengan ikon kustom
    </div>
  </div>
</div>

<Accordion 
    title="Custom Icon" 
    icon="arrow_forward"
    iconPosition="left"
    content="(Accordion dengan icon kustom)"
/>

Demo:

arrow_forward Custom Icon

Accordion dengan icon kustom

Accordion dengan Animasi

Accordion dengan efek transisi yang smooth menggunakan class animated.

Demo:

Animated Accordion expand_more

Accordion dengan animasi smooth

Components


<div class="nx-accordion animated">
  <div class="nx-accordion-item">
    <div class="nx-accordion-header">
      Animated Accordion
      <span class="material-icons icon">expand_more</span>
    </div>
    <div class="nx-accordion-content">
      Accordion dengan animasi smooth
    </div>
  </div>
</div>

<<div>
</div>

Accordion Nonaktif

Accordion yang dinonaktifkan menggunakan class disabled.

Demo:

Disabled Accordion expand_more

Konten tidak dapat diakses

Components

<div class="nx-accordion">
  <div class="nx-accordion-item disabled">
    <div class="nx-accordion-header">
      Disabled Accordion
      <span class="material-icons icon">expand_more</span>
    </div>
    <div class="nx-accordion-content">
      Konten tidak dapat diakses
    </div>
  </div>
</div>

<<div>
</div>

Ukuran Accordion

Accordion dengan berbagai ukuran menggunakan class sm, md, atau lg.

Demo:

Small Accordion expand_more

Accordion ukuran kecil

Large Accordion expand_more

Accordion ukuran besar

Components

<div class="nx-accordion sm">
  <div class="nx-accordion-item">
    <div class="nx-accordion-header">
      Small Accordion
      <span class="material-icons icon">expand_more</span>
    </div>
    <div class="nx-accordion-content">
      Accordion ukuran kecil
    </div>
  </div>
</div>

<div class="nx-accordion lg">
  <div class="nx-accordion-item">
    <div class="nx-accordion-header">
      Large Accordion
      <span class="material-icons icon">expand_more</span>
    </div>
    <div class="nx-accordion-content">
      Accordion ukuran besar
    </div>
  </div>
</div>

<<div>
</div>

Ngorei NexaUI

Accordion

Accordion Dasar

Demo:

Components

Demo:

Accordion dengan Tema

Demo:

Components

Accordion Multiple

Demo:

Components

Accordion Bersarang

Demo:

Components

Demo:

Sub Heading

Accordion dengan Ikon Kustom

Demo:

Components

Demo:

Accordion dengan Animasi

Demo:

Components

Accordion Nonaktif

Demo:

Components

Ukuran Accordion

Demo:

Components