Components
Last updated 3 months ago
Modal
Contents
The Modal component is a flexible UI element used to display important information, confirmations, or input fields without navigating away from the current page. It enhances user interaction by providing a focused, interactive experience.
Introduction
Modals are overlay elements that appear on top of the main content to capture user attention for specific actions. They are commonly used for confirmations, alerts, data entry, and process steps. The modal design ensures accessibility, responsiveness, and ease of use across different devices.
Code structure
The modal structure follows a consistent format, ensuring usability and accessibility.
HTML
<div class="modal fade" id="modal-id" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center">
<button class="btn btn-sm btn-square modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
<span class="tticon-x btn-icon"></span>
</button>
<img class="modal-icon" src="images/alert-3d-icon.svg" alt=""/>
<span class="d-block mb-2">
<span>الوصف هنا</span>
</span>
<h5 class="modal-title">العنوان هنا</h5>
<p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص.</p>
<div class="d-flex gap-2">
<button class="btn btn-primary w-50">تأكيد</button>
<button class="btn btn-white w-50" data-bs-dismiss="modal" aria-label="Close">تراجع</button>
</div>
</div>
</div>
</div>
</div>
Confirmation Modals
Used for critical actions that require user approval before proceeding. Typically includes a title, message, and action buttons such as Confirm or Cancel. These modals often feature an alert icon to indicate the importance of the action .modal-confirmation.
View Mode
HTML
<button class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#question-modal">نافذة تأكيد!</button>
<button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#warning-modal">نافذة حذف!</button>
<div class="modal fade" id="question-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center">
<button class="btn btn-sm btn-square modal-close-btn" data-bs-dismiss="modal" aria-label="Close"><span class="tticon-x btn-icon"></span></button>
<img class="modal-icon" src="images/question-3d-icon.svg" alt="">
<h5 class="modal-title">هل ترغب في المتابعة؟</h5>
<p>يرجى تأكيد رغبتك في تنفيذ هذه العملية. يمكنك التراجع في أي وقت.</p>
<div class="d-flex gap-2">
<button class="btn btn-dark w-50">متابعة</button>
<button class="btn btn-white w-50" data-bs-dismiss="modal" aria-label="Close">تراجع</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="warning-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center">
<button class="btn btn-sm btn-square modal-close-btn" data-bs-dismiss="modal" aria-label="Close"><span class="tticon-x btn-icon"></span></button>
<img class="modal-icon" src="images/alert-3d-icon.svg" alt="">
<h5 class="modal-title">التأكيد على عملية الحذف؟</h5>
<p>هل أنت متأكد من حذف هذا الحقل, لا يمكنك التراجع عن هذه الخطوة فيما بعد!</p>
<div class="d-flex gap-2">
<button class="btn btn-danger w-50">حذف الحملة</button>
<button class="btn btn-white w-50" data-bs-dismiss="modal" aria-label="Close">تراجع</button>
</div>
</div>
</div>
</div>
</div>
<!-- Usage Example -->
<button class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#question-modal">
نافذة تأكيد!
</button>
<button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#warning-modal">
نافذة حذف!
</button>
<DefaultModal
type="question"
id="question-modal"
title="هل ترغب في المتابعة؟"
message="يرجى تأكيد رغبتك في تنفيذ هذه العملية. يمكنك التراجع في أي وقت."
confirmText="متابعة"
cancelText="الغاء"
/>
<DefaultModal
type="warning"
id="warning-modal"
title="التأكيد على عملية الحذف؟"
message="هل أنت متأكد من حذف هذا الحقل, لا يمكنك التراجع عن هذه الخطوة فيما بعد."
confirmText="حذف الحملة"
cancelText="الغاء"
/>
<!-- Vue Component Code Block -->
<template>
<div
class="modal fade"
:id="id"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center">
<button
class="btn btn-sm btn-square modal-close-btn"
data-bs-dismiss="modal"
aria-label="Close"
>
<span class="tticon-x btn-icon"></span>
</button>
<img
v-if="image || type"
:class="['modal-icon', iconClass]"
:src="image || iconSrc"
alt=""
/>
<h5 class="modal-title">{{ title }}</h5>
<p>{{ message }}</p>
<div class="d-flex gap-2">
<button @click="confirmAction" :class="['btn', buttonClass, 'w-50']">
{{ confirmText }}
</button>
<button class="btn btn-white w-50" data-bs-dismiss="modal" aria-label="Close">
{{ cancelText }}
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
title: String,
message: String,
confirmText: String,
cancelText: String,
confirmAction: Function,
id: String,
type: String,
image: String,
})
const iconSrc = computed(() => {
if (props.type === 'question') return '/images/question-3d-icon.svg'
if (props.type === 'warning') return '/images/alert-3d-icon.svg'
if (props.type === 'info') return '/images/info-3d-icon.svg'
if (props.type === 'success') return '/images/check-3d-icon.svg'
return null // or any fallback icon path
})
const iconClass = computed(() => {
return props.type ? `modal-icon-${props.type}` : ''
})
const buttonClass = computed(() => {
if (props.type === 'warning') return 'btn-danger'
if (props.type === 'info') return 'btn-info'
if (props.type === 'success') return 'btn-success'
return 'btn-dark'
})
</script>Success & Error Modals
Provide immediate feedback to the user regarding the success or failure of an action. Success modals typically include a confirmation icon and a Continue button, while error modals may provide retry options .modal-success, .modal-error
View Mode
HTML
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#success-modal">نافذة نجاح!</button>
<button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#danger-modal">نافذة حدث خلل!</button>
<div class="modal fade" id="success-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center">
<button class="btn btn-sm btn-square modal-close-btn" data-bs-dismiss="modal" aria-label="Close"><span class="tticon-x btn-icon"></span></button>
<img class="modal-icon" src="images/check-3d-icon.svg" alt="">
<h5 class="modal-title">تمت العملية بنجاح!</h5>
<p>تمت العملية بنجاح! شكراً لتعاونك معنا. يمكنك المتابعة الآن بكل سهولة.</p>
<div class="d-flex gap-2">
<button class="btn btn-success w-50">العودة للرئيسية</button>
<button class="btn btn-white w-50" data-bs-dismiss="modal" aria-label="Close">تراجع</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="danger-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center">
<button class="btn btn-sm btn-square modal-close-btn" data-bs-dismiss="modal" aria-label="Close"><span class="tticon-x btn-icon"></span></button>
<img class="modal-icon" src="images/danger-3d-icon.svg" alt="">
<h5 class="modal-title">حدث خلل أثناء العملية!</h5>
<p>حدث خطأ أثناء العملية. يرجى المحاولة لاحقاً أو الاتصال بالدعم الفني إذا استمر الخلل.</p>
<div class="d-flex gap-2">
<button class="btn btn-danger w-50">حاول مجددًا</button>
<button class="btn btn-white w-50" data-bs-dismiss="modal" aria-label="Close">تراجع</button>
</div>
</div>
</div>
</div>
</div>
<!-- Usage Example -->
<button class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#success-modal">
success
</button>
<DefaultModal
type="success"
id="success-modal"
title="success"
message="success message here"
confirmText="العودة للرئيسية"
cancelText="تراجع"
/>
<!-- Vue Component Code Block -->
<template>
<div
class="modal fade"
:id="id"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center">
<button
class="btn btn-sm btn-square modal-close-btn"
data-bs-dismiss="modal"
aria-label="Close"
>
<span class="tticon-x btn-icon"></span>
</button>
<img
v-if="image || type"
:class="['modal-icon', iconClass]"
:src="image || iconSrc"
alt=""
/>
<h5 class="modal-title">{{ title }}</h5>
<p>{{ message }}</p>
<div class="d-flex gap-2">
<button @click="confirmAction" :class="['btn', buttonClass, 'w-50']">
{{ confirmText }}
</button>
<button class="btn btn-white w-50" data-bs-dismiss="modal" aria-label="Close">
{{ cancelText }}
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
title: String,
message: String,
confirmText: String,
cancelText: String,
confirmAction: Function,
id: String,
type: String,
image: String,
})
const iconSrc = computed(() => {
if (props.type === 'question') return '/images/question-3d-icon.svg'
if (props.type === 'warning') return '/images/alert-3d-icon.svg'
if (props.type === 'info') return '/images/info-3d-icon.svg'
if (props.type === 'success') return '/images/check-3d-icon.svg'
return null // or any fallback icon path
})
const iconClass = computed(() => {
return props.type ? `modal-icon-${props.type}` : ''
})
const buttonClass = computed(() => {
if (props.type === 'warning') return 'btn-danger'
if (props.type === 'info') return 'btn-info'
if (props.type === 'success') return 'btn-success'
return 'btn-dark'
})
</script>Informational Modals
Used to present non-interactive information, such as tips, guidance, or explanations. They help users understand a process or decision before taking action .modal-info.
View Mode
HTML
<button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#info-modal">نافذة معلوماتية!</button>
<div class="modal fade" id="info-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center">
<button class="btn btn-sm btn-square modal-close-btn" data-bs-dismiss="modal" aria-label="Close"><span class="tticon-x btn-icon"></span></button>
<img class="modal-icon" src="images/info-3d-icon.svg" alt="">
<h5 class="modal-title">من أجل المعرفة!</h5>
<p>يرجى ملاحظة أن هذا الإجراء سيؤثر على جميع العناصر المرتبطة بهذه العملية.</p>
<div class="d-flex gap-2">
<button class="btn btn-info w-50">متابعة</button>
<button class="btn btn-white w-50" data-bs-dismiss="modal" aria-label="Close">تراجع</button>
</div>
</div>
</div>
</div>
</div>
<!-- Usage Example -->
<button class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#info-modal">
success
</button>
<DefaultModal
type="info"
id="info-modal"
title="من أجل المعرفة"
message="يرجى ملاحظة أن هذا الإجراء سيؤثر على جميع العناصر المرتبطة بهذه العملية"
confirmText="متابعة"
cancelText="تراجع"
/>
<!-- Vue Component Code Block -->
<template>
<div
class="modal fade"
:id="id"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center">
<button
class="btn btn-sm btn-square modal-close-btn"
data-bs-dismiss="modal"
aria-label="Close"
>
<span class="tticon-x btn-icon"></span>
</button>
<img
v-if="image || type"
:class="['modal-icon', iconClass]"
:src="image || iconSrc"
alt=""
/>
<h5 class="modal-title">{{ title }}</h5>
<p>{{ message }}</p>
<div class="d-flex gap-2">
<button @click="confirmAction" :class="['btn', buttonClass, 'w-50']">
{{ confirmText }}
</button>
<button class="btn btn-white w-50" data-bs-dismiss="modal" aria-label="Close">
{{ cancelText }}
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
title: String,
message: String,
confirmText: String,
cancelText: String,
confirmAction: Function,
id: String,
type: String,
image: String,
})
const iconSrc = computed(() => {
if (props.type === 'question') return '/images/question-3d-icon.svg'
if (props.type === 'warning') return '/images/alert-3d-icon.svg'
if (props.type === 'info') return '/images/info-3d-icon.svg'
if (props.type === 'success') return '/images/check-3d-icon.svg'
return null // or any fallback icon path
})
const iconClass = computed(() => {
return props.type ? `modal-icon-${props.type}` : ''
})
const buttonClass = computed(() => {
if (props.type === 'warning') return 'btn-danger'
if (props.type === 'info') return 'btn-info'
if (props.type === 'success') return 'btn-success'
return 'btn-dark'
})
</script>Form Modals
Contain input fields for data collection, allowing users to enter information such as login credentials, registration details, or payment information. May include validation and interactive elements.
View Mode
HTML
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#form-modal">معاينة النافذة!</button>
<div class="modal fade" id="form-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body padding-sm text-center">
<button class="btn btn-sm btn-square modal-close-btn" data-bs-dismiss="modal" aria-label="Close"><span class="tticon-x btn-icon"></span></button>
<img class="modal-icon rounded-pill" src="images/logos/hyperpay.svg" alt="">
<h5 class="modal-title">هايبر باي</h5>
<p class="modal-desc mb-4">يرجى ملء الحقول من أجل إعداد البيئة.</p>
<ul class="nav nav-justified mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">البيئة الحية</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">البيئة التجريبية</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
<div class="row g-4 text-start">
<div class="col-12"><div class="alert alert-warning">بعد الحفظ يتم إخفاء المعلومات الحساسة.</div></div>
<div class="col-12"><label class="form-label"><span class="text-english">Api Url</span> <span class="text-danger">*</span></label><input class="form-control text-english" type="text" placeholder="https://example.com"></div>
<div class="col-12"><label class="form-label"><span class="text-english">Username</span> <span class="text-danger">*</span></label><input class="form-control text-english" type="text" placeholder="[email protected]"></div>
<div class="col-12"><label class="form-label"><span class="text-english">Sender</span> <span class="text-danger">*</span></label><input class="form-control text-english" type="text" placeholder="YourCompanyName"></div>
<div class="col-12"><label class="form-label"><span class="text-english">Api Key</span> <span class="text-danger">*</span></label><input class="form-control text-english" type="text" placeholder="12345-abcde-67890-fghij-12345"></div>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
<div class="row g-4 text-start">
<div class="col-12"><div class="alert alert-warning">بعد الحفظ يتم إخفاء المعلومات الحساسة.</div></div>
<div class="col-12"><label class="form-label"><span class="text-english">Api Url</span> <span class="text-danger">*</span></label><input class="form-control text-english" type="text" placeholder="https://example.com"></div>
<div class="col-12"><label class="form-label"><span class="text-english">Username</span> <span class="text-danger">*</span></label><input class="form-control text-english" type="text" placeholder="[email protected]"></div>
<div class="col-12"><label class="form-label"><span class="text-english">Sender</span> <span class="text-danger">*</span></label><input class="form-control text-english" type="text" placeholder="YourCompanyName"></div>
<div class="col-12"><label class="form-label"><span class="text-english">Api Key</span> <span class="text-danger">*</span></label><input class="form-control text-english" type="text" placeholder="12345-abcde-67890-fghij-12345"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary">اعتمد الإعدادات</button>
<button class="btn btn-white" data-bs-dismiss="modal">إغلاق</button>
</div>
</div>
</div>
</div>
<!-- Usage Example -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#form-modal">
معاينة النافذة!
</button>
<FormModal
image="/images/logos/hyperpay.svg"
id="form-modal"
title="هايبر باي"
message="يرجى ملاحظة أن هذا الإجراء سيؤثر على جميع العناصر المرتبطة بهذه العملية."
confirmText="متابعة"
cancelText="تراجع"
:confirm-action="handleConfirm"
>
<!-- ADD HTML HERE -->
<ul class="nav nav-justified mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button
class="nav-link active"
id="pills-home-tab"
data-bs-toggle="pill"
data-bs-target="#pills-home"
type="button"
role="tab"
aria-controls="pills-home"
aria-selected="true"
>
البيئة الحية
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="pills-profile-tab"
data-bs-toggle="pill"
data-bs-target="#pills-profile"
type="button"
role="tab"
aria-controls="pills-profile"
aria-selected="false"
>
البيئة التجريبية
</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div
class="tab-pane fade show active"
id="pills-home"
role="tabpanel"
aria-labelledby="pills-home-tab"
tabindex="0"
>
<div class="row g-4 text-start">
<div class="col-12">
<div class="alert alert-warning">بعد الحفظ يتم إخفاء المعلومات الحساسة.</div>
</div>
<div class="col-12">
<label class="form-label">
<span class="text-english">Api Url</span>
<span class="text-danger">*</span>
</label>
<input
class="form-control text-english"
type="text"
placeholder="https://example.com"
/>
</div>
<div class="col-12">
<label class="form-label">
<span class="text-english">Username</span>
<span class="text-danger">*</span>
</label>
<input
class="form-control text-english"
type="text"
placeholder="[email protected]"
/>
</div>
<div class="col-12">
<label class="form-label">
<span class="text-english">Sender</span>
<span class="text-danger">*</span>
</label>
<input
class="form-control text-english"
type="text"
placeholder="YourCompanyName"
/>
</div>
<div class="col-12">
<label class="form-label">
<span class="text-english">Api Key</span>
<span class="text-danger">*</span>
</label>
<input
class="form-control text-english"
type="text"
placeholder="12345-abcde-67890-fghij-12345"
/>
</div>
</div>
</div>
<div
class="tab-pane fade"
id="pills-profile"
role="tabpanel"
aria-labelledby="pills-profile-tab"
tabindex="0"
>
<div class="row g-4 text-start">
<div class="col-12">
<div class="alert alert-warning">بعد الحفظ يتم إخفاء المعلومات الحساسة.</div>
</div>
<div class="col-12">
<label class="form-label">
<span class="text-english">Api Url</span>
<span class="text-danger">*</span>
</label>
<input
class="form-control text-english"
type="text"
placeholder="https://example.com"
/>
</div>
<div class="col-12">
<label class="form-label">
<span class="text-english">Username</span>
<span class="text-danger">*</span>
</label>
<input
class="form-control text-english"
type="text"
placeholder="[email protected]"
/>
</div>
<div class="col-12">
<label class="form-label">
<span class="text-english">Sender</span>
<span class="text-danger">*</span>
</label>
<input
class="form-control text-english"
type="text"
placeholder="YourCompanyName"
/>
</div>
<div class="col-12">
<label class="form-label">
<span class="text-english">Api Key</span>
<span class="text-danger">*</span>
</label>
<input
class="form-control text-english"
type="text"
placeholder="12345-abcde-67890-fghij-12345"
/>
</div>
</div>
</div>
</div>
</FormModal>
<!-- Vue Component Code Block -->
<template>
<div
class="modal fade"
:id="id"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body padding-sm text-center">
<button
class="btn btn-sm btn-square modal-close-btn"
data-bs-dismiss="modal"
aria-label="Close"
>
<span class="tticon-x btn-icon"></span>
</button>
<img v-if="image || type" class="modal-icon rounded-pill" :src="image" alt="" />
<h5 class="modal-title">{{ title }}</h5>
<p class="modal-desc mb-4">{{ message }}</p>
<slot />
</div>
<div class="modal-footer">
<button @click="confirmAction" class="btn btn-primary">
{{ confirmText }}
</button>
<button class="btn btn-white w-50" data-bs-dismiss="modal" aria-label="Close">
{{ cancelText }}
</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
defineProps({
title: String,
message: String,
confirmText: String,
cancelText: String,
confirmAction: Function,
id: String,
image: String,
})
</script>Details Modals
Designed to display structured information, such as user profiles, transaction summaries, or product details. They focus on presenting data clearly without requiring input.
View Mode
HTML
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#details-modal">معاينة النافذة!</button>
<div class="modal fade" id="details-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body padding-sm text-center">
<button class="btn btn-sm btn-square modal-close-btn" data-bs-dismiss="modal" aria-label="Close"><span class="tticon-x btn-icon"></span></button>
<img class="modal-icon rounded-pill mb-3" src="images/bank-3d-icon.svg" alt="">
<h5 class="modal-title">Alinma Bank</h5>
<p class="modal-desc mb-4">تاريخ اضافة الحساب البنكي 24/05/2024</p>
<ul class="list-group list-group-odd gap-0">
<li class="list-group-item justify-content-between">
<span class="text-normal">اسم صاحب الحساب</span>
<span class="text-dark text-en-label-xs">Abudalla Al Ashmari</span>
</li>
<li class="list-group-item justify-content-between">
<span class="text-normal">اسم البنك/المصرف</span>
<span class="text-dark text-en-label-xs">Alinma Bank</span>
</li>
<li class="list-group-item justify-content-between">
<span class="text-normal">رقم الحساب</span>
<span class="text-dark text-en-label-xs">12345678</span>
</li>
<li class="list-group-item justify-content-between">
<span class="text-normal">الآيبان</span>
<span class="text-dark text-en-label-xs">SA03 8000 0000 6080 1016 7519</span>
</li>
<li class="list-group-item justify-content-between">
<span class="text-normal">حالة الحساب</span>
<span class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" checked>
</span>
</li>
</ul>
<button class="btn btn-secondary mt-3 bg-white w-100" type="button" data-bs-toggle="modal" data-bs-target="#edit-bank-modal">
<span class="tticon-pen btn-icon"></span> تعديل البيانات
</button>
</div>
</div>
</div>
</div>
<!-- Usage Example -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#details-modal">
معاينة النافذة!
</button>
<EmptyModal
id="details-modal"
image="/images/bank-3d-icon.svg"
title="Alinma Bank"
message="تاريخ اضافة الحساب البنكي 24/05/2024"
>
<ul class="list-group list-group-odd gap-0">
<li class="list-group-item justify-content-between">
<span class="text-normal">اسم صاحب الحساب</span>
<span class="text-dark text-en-label-xs">Abudalla Al Ashmari</span>
</li>
<li class="list-group-item justify-content-between">
<span class="text-normal">اسم البنك/المصرف</span>
<span class="text-dark text-en-label-xs">Alinma Bank</span>
</li>
<li class="list-group-item justify-content-between">
<span class="text-normal">رقم الحساب</span>
<span class="text-dark text-en-label-xs">12345678</span>
</li>
<li class="list-group-item justify-content-between">
<span class="text-normal">الآيبان</span>
<span class="text-dark text-en-label-xs">SA03 8000 0000 6080 1016 7519</span>
</li>
<li class="list-group-item justify-content-between">
<span class="text-normal">حالة الحساب</span>
<span class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" checked />
</span>
</li>
</ul>
<button
class="btn btn-secondary mt-3 bg-white w-100"
type="button"
data-bs-toggle="modal"
data-bs-target="#edit-bank-modal"
>
<span class="tticon-pen btn-icon"></span> تعديل البيانات
</button>
</EmptyModal>
<!-- Vue Component Code Block -->
<template>
<div
class="modal fade"
:id="id"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body padding-sm text-center">
<button
class="btn btn-sm btn-square modal-close-btn"
data-bs-dismiss="modal"
aria-label="Close"
>
<span class="tticon-x btn-icon"></span>
</button>
<img v-if="image || type" class="modal-icon rounded-pill" :src="image" alt="" />
<h5 class="modal-title">{{ title }}</h5>
<p class="modal-desc mb-4">{{ message }}</p>
<slot />
</div>
<div v-if="slots.footer" class="modal-footer">
<slot name="footer" />
</div>
</div>
</div>
</div>
</template>
<script setup>
import { useSlots } from 'vue'
defineProps({
title: String,
message: String,
id: String,
image: String,
})
const slots = useSlots()
</script>Step-by-Step Modals
Guide users through multi-step processes like onboarding or complex form submissions. Typically include navigation buttons like Next and Back for seamless transitions.
View Mode
HTML
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#steps-modal">معاينة النافذة!</button>
<div class="modal fade" id="steps-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body padding-sm text-center">
<button class="btn btn-sm btn-square modal-close-btn" data-bs-dismiss="modal" aria-label="Close"><span class="tticon-x btn-icon"></span></button>
<label class="upload-avatar-button mx-auto mb-3">
<input class="d-none" type="file">
<span class="tticon-camera"></span>
</label>
<h5 class="modal-title">مستخدم جديد!</h5>
<p class="modal-desc mb-4">يرجى ملء الحقول لإنشاء حساب جديد.</p>
<div class="row g-3 text-start">
<div class="col-6">
<label class="form-label">الاسم الأول <span class="text-danger">*</span></label>
<input class="form-control" type="text" placeholder="مثال: عبدالله">
</div>
<div class="col-6">
<label class="form-label">الاسم الأخير <span class="text-danger">*</span></label>
<input class="form-control" type="text" placeholder="مثال: الشهري">
</div>
<div class="col-12">
<label class="form-label">الجنس <span class="text-danger">*</span></label>
<div class="form-radio-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="male">
<label class="form-check-label" for="male">ذكر</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="female">
<label class="form-check-label" for="female">أنثى</label>
</div>
</div>
</div>
<div class="col-12">
<label class="form-label">رقم الجوال <span class="text-danger">*</span></label>
<input class="form-control form-control-ltr text-english" type="text" placeholder="501 876 3215">
</div>
<div class="col-12">
<label class="form-label">عنوان البريد <span class="text-danger">*</span></label>
<input class="form-control text-english" type="text" placeholder="مثال: [email protected]">
</div>
</div>
</div>
<div class="modal-footer">
<span class="modal-footer-progress" style="width: 33%;"></span>
<button class="btn btn-primary">متابعة للتالي</button>
<button class="btn btn-white" data-bs-dismiss="modal">إغلاق</button>
</div>
</div>
</div>
</div>
<!-- Usage Example -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#steps-modal">
معاينة النافذة!
</button>
<EmptyModal
id="steps-modal"
title="مستخدم جديد!"
message="يرجى ملء الحقول لإنشاء حساب جديد."
>
<!-- Add steps form here -->
<template #footer>
<!-- Add the buttons here -->
</template>
</EmptyModal>
<!-- Vue Component Code Block -->
<template>
<div
class="modal fade"
:id="id"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body padding-sm text-center">
<button
class="btn btn-sm btn-square modal-close-btn"
data-bs-dismiss="modal"
aria-label="Close"
>
<span class="tticon-x btn-icon"></span>
</button>
<img v-if="image || type" class="modal-icon rounded-pill" :src="image" alt="" />
<h5 class="modal-title">{{ title }}</h5>
<p class="modal-desc mb-4">{{ message }}</p>
<slot />
</div>
<div v-if="slots.footer" class="modal-footer">
<slot name="footer" />
</div>
</div>
</div>
</div>
</template>
<script setup>
import { useSlots } from 'vue'
defineProps({
title: String,
message: String,
id: String,
image: String,
})
const slots = useSlots()
</script>