Primary Title
Penjelasan ringkas atas warning yang diberikan kepada user.
Informasi yang berhubungan dengan aksi yang akan dilakukan oleh user, misal info user yang terkena dampak.
Modal Komponen
Struktur Modal
Modal Title
<div class="modal">
<div class="modal__wrapper">
<div class="modal__header">
<div class="modal__header-wrapper">
<h3 class="modal__title">Modal Title</h3>
</div>
<span class="icon icon-x-mark-mini" data-dismiss="modal"></span>
</div>
<form action="#">
<div class="modal__body">
<div class="card">
<div class="grid">
<div class="col-12 col-md-6">
<div class="form-control">
<label class="form-control__label" for="start-date">Tanggal Mulai</label>
<input type="date" name="start_date" id="start-date">
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-control">
<label class="form-control__label" for="end-date">Tanggal Berakhir</label>
<input type="date" name="end_date" id="end-date">
</div>
</div>
<div class="col-12">
<div class="form-control">
<label class="form-control__label" for="select">Jenis</label>
<select name="Jenis" id="select">
<option value="1">Satu</option>
<option value="2">Dua</option>
<option value="3">Tiga</option>
<option value="4">Empat</option>
<option value="5">Lima</option>
</select>
</div>
</div>
<div class="col-12">
<div class="form-control">
<label class="form-control__label">Tanggal Mulai</label>
<div class="form-control__group">
<input type="radio" class="form-control__radio" id="label-1" name="group">
<label for="label-1" class="form-control__label-radio">Radio Basic</label>
<input type="radio" class="form-control__radio" id="label-2" name="group">
<label for="label-2" class="form-control__label-radio">Radio Basic</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal__footer">
<button class="btn btn_outline-default btn_small" data-dismiss="modal">
Batal
</button>
<button class="btn btn_primary btn_small" type="submit">Filter</button>
</div>
</form>
</div>
</div>
Macam Confirmation
Modal yang mendukung aksi konfirmasi untuk pengguna
<!-- Button trigger modal -->
<button class="btn btn_primary" data-toggle="modal" data-target="#warning-confirmation">
Warning Confirmation
</button>
<button class="btn btn_primary" data-toggle="modal" data-target="#error-confirmation">
Error Confirmation
</button>
<button class="btn btn_primary" data-toggle="modal" data-target="#primary-confirmation">
Info Confirmation
</button>
<button class="btn btn_primary" data-toggle="modal" data-target="#success-confirmation">
Success Confirmation
</button>
<!-- Modal Confirmation Primary-->
<div id="primary-confirmation" class="modal modal_confirmation-primary">
<div class="modal__overlay" data-dismiss="modal"></div>
<div class="modal__wrapper">
<div class="modal__header">
<div class="modal-header_content">
<h3 class="title">Primary Title</h3>
<p class="subtitle">
Penjelasan ringkas atas warning yang diberikan
kepada user.
</p>
</div>
</div>
<div class="modal__body-confirmation">
<p>Informasi yang berhubungan dengan aksi yang akan
dilakukan oleh user,
misal info user yang terkena dampak.</p>
</div>
<div class="modal__footer">
<button class="btn btn_outline-default" data-dismiss="modal">
Batal
</button>
<button class="btn btn_primary">Primary Action</button>
</div>
</div>
</div>
<!-- Modal Confirmation Success-->
<div id="success-confirmation" class="modal modal_confirmation-success">
<div class="modal__overlay" data-dismiss="modal"></div>
<div class="modal__wrapper">
<div class="modal__header">
<div class="modal-header_content">
<h3 class="title">Success Title</h3>
<p class="subtitle">
Penjelasan ringkas atas warning yang diberikan
kepada user.
</p>
</div>
</div>
<div class="modal__body-confirmation">
<p>Informasi yang berhubungan dengan aksi yang akan
dilakukan oleh user,
misal info user yang terkena dampak.</p>
</div>
<div class="modal__footer">
<button class="btn btn_outline-default" data-dismiss="modal">
Batal
</button>
<button class="btn btn_primary">Primary Action</button>
</div>
</div>
</div>
<!-- Modal Confirmation Warning-->
<div id="warning-confirmation" class="modal modal_confirmation-warning">
<div class="modal__overlay" data-dismiss="modal"></div>
<div class="modal__wrapper">
<div class="modal__header">
<div class="modal-header_content">
<h3 class="title">Warning Title</h3>
<p class="subtitle">
Penjelasan ringkas atas warning yang diberikan
kepada user.
</p>
</div>
</div>
<div class="modal__body-confirmation">
<p>Informasi yang berhubungan dengan aksi yang akan
dilakukan oleh user,
misal info user yang terkena dampak.</p>
</div>
<div class="modal__footer">
<button class="btn btn_outline-default" data-dismiss="modal">
Batal
</button>
<button class="btn btn_primary">Primary Action</button>
</div>
</div>
</div>
<!-- Modal Confirmation Error-->
<div id="error-confirmation" class="modal modal_confirmation-error">
<div class="modal__overlay" data-dismiss="modal"></div>
<div class="modal__wrapper">
<div class="modal__header">
<div class="modal-header_content">
<h3 class="title">Error Title</h3>
<p class="subtitle">
Penjelasan ringkas atas warning yang diberikan
kepada user.
</p>
</div>
</div>
<div class="modal__body-confirmation">
<p>Informasi yang berhubungan dengan aksi yang akan
dilakukan oleh user,
misal info user yang terkena dampak.</p>
</div>
<div class="modal__footer">
<button class="btn btn_danger">Primary Action</button>
<button class="btn btn_outline-default" data-dismiss="modal">
Batal
</button>
</div>
</div>
</div>
Macam Content
Macam isi modal
<!-- Button trigger modal -->
<button class="btn btn_primary" data-toggle="modal" data-target="#filter-lain">
Modal Filter
</button>
<button class="btn btn_primary" data-toggle="modal" data-target="#module">
Modal Modul
</button>
<!-- Modal Modul -->
<div id="module" class="modal modal_module">
<div class="modal__overlay" data-dismiss="modal"></div>
<div class="modal__wrapper">
<div class="modal__header">
<div class="modal__header-wrapper">
<h3 class="modal__title">Pilih Modul</h3>
</div>
<span class="icon icon-x-mark-mini" data-dismiss="modal"></span>
</div>
<form action="#">
<div class="modal__body">
<div class="card">
<div class="module">
<div class="module__item">
<input type="radio" name="mdl">
<div class="module__icon-wrapper">
<img src="/assets/images/flags/indonesia.svg" alt="flag"/>
</div>
<div class="module__content">
<h3>SIM Kepegawaian</h3>
<p>Super Administrator</p>
</div>
</div>
<hr/>
<div class="module__item">
<input type="radio" name="mdl">
<div class="module__icon-wrapper">
<img src="/assets/images/flags/malasya.svg" alt="flag"/>
</div>
<div class="module__content">
<h3>SIM Administrasi Aplikasi</h3>
<p>Super Administrator</p>
</div>
</div>
<hr/>
<div class="module__item">
<input type="radio" name="mdl">
<div class="module__icon-wrapper">
<img src="/assets/images/flags/singapore.svg" alt="flag"/>
</div>
<div class="module__content">
<h3>SIM Keuangan</h3>
<p>Super Administrator</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal__footer">
<button class="btn btn_outline-default btn_small" data-dismiss="modal">
Batal
</button>
<button class="btn btn_primary btn_small" type="submit">Konfirmasi</button>
</div>
</form>
</div>
</div>
<!-- Modal Filter -->
<div id="filter-lain" class="modal">
<div class="modal__overlay" data-dismiss="modal"></div>
<div class="modal__wrapper">
<div class="modal__header">
<div class="modal__header-wrapper">
<h3 class="modal__title">Filter Lain</h3>
</div>
<span class="icon icon-x-mark-mini" data-dismiss="modal"></span>
</div>
<form action="#">
<div class="modal__body">
<div class="card">
<div class="grid">
<div class="col-12 col-md-6">
<div class="form-control">
<label class="form-control__label" for="start-date">Tanggal Mulai</label>
<input type="date" name="start_date" id="start-date">
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-control">
<label class="form-control__label" for="end-date">Tanggal Berakhir</label>
<input type="date" name="end_date" id="end-date">
</div>
</div>
<div class="col-12">
<div class="form-control">
<label class="form-control__label" for="select">Jenis</label>
<select name="Jenis" id="select">
<option value="1">Satu</option>
<option value="2">Dua</option>
<option value="3">Tiga</option>
<option value="4">Empat</option>
<option value="5">Lima</option>
</select>
</div>
</div>
<div class="col-12">
<div class="form-control">
<label class="form-control__label">Tanggal Mulai</label>
<div class="form-control__group">
<input type="radio" class="form-control__radio" id="label-1" name="group">
<label for="label-1" class="form-control__label-radio">Radio Basic</label>
<input type="radio" class="form-control__radio" id="label-2" name="group">
<label for="label-2" class="form-control__label-radio">Radio Basic</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal__footer">
<button class="btn btn_outline-default btn_small" data-dismiss="modal">
Batal
</button>
<button class="btn btn_primary btn_small" type="submit">Filter</button>
</div>
</form>
</div>
</div>
Success Title
Penjelasan ringkas atas warning yang diberikan kepada user.
Informasi yang berhubungan dengan aksi yang akan dilakukan oleh user, misal info user yang terkena dampak.
Warning Title
Penjelasan ringkas atas warning yang diberikan kepada user.
Informasi yang berhubungan dengan aksi yang akan dilakukan oleh user, misal info user yang terkena dampak.
Error Title
Penjelasan ringkas atas warning yang diberikan kepada user.
Informasi yang berhubungan dengan aksi yang akan dilakukan oleh user, misal info user yang terkena dampak.