خط زمانی

یک کامپوننت سفارشی برای ایجاد خط زمانی
پایه
1401/01/01
این محتوای اولین مورد خط زمانی است.
1401/02/02
این محتوای دومین مورد خط زمانی است.
1401/03/03
موارد اول و آخر مرز را به نشانگر بعدی گسترش نمی دهند.
1401/04/04
این آخرین مورد است. آخرین مورد پس از نشانگر خط زمانی مربوطه، خطی را نشان نخواهد داد.
<!-- Fade In Animation -->
<div class="timeline">
    <div class="timeline-item">
        <div class="timeline-item-marker">
            <div class="timeline-item-marker-text">...</div>
            <div class="timeline-item-marker-indicator"><i data-feather="check"></i></div>
        </div>
        <div class="timeline-item-content">اولین آیتم</div>
    </div>
    <div class="timeline-item">
        <div class="timeline-item-marker">
            <div class="timeline-item-marker-text">...</div>
            <div class="timeline-item-marker-indicator"><i data-feather="check"></i></div>
        </div>
        <div class="timeline-item-content">دومین آیتم</div>
    </div>
    <div class="timeline-item">
        <div class="timeline-item-marker">
            <div class="timeline-item-marker-text">...</div>
            <div class="timeline-item-marker-indicator"><i data-feather="check"></i></div>
        </div>
        <div class="timeline-item-content">سومین آیتم</div>
    </div>
</div>
//- Timeline component
.timeline
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
                i(data-feather='check')
        .timeline-item-content
            | اولین آیتم
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
                i(data-feather='check')
        .timeline-item-content
            | دومین آیتم
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
                i(data-feather='check')
        .timeline-item-content
            | سومین آیتم
کامپوننت .timeline به شما امکان می دهد یک .timeline-item را برای نمایش محتوا در یک دنباله اضافه کنید. خط زمانی همچنین شامل یک نشانگر، یک فیلد در سمت چپ نشانگر برای تاریخ، و یک خط اتصال نشانگرها است. این یک جزء سفارشی است که به طور خاص برای استفاده در موضوع SB Admin Pro طراحی شده است.
Small Timeline Variant
1401/01/01
این محتوای اولین مورد خط زمانی است.
1401/02/02
مورد دوم خط زمانی بعد از مورد اول می آید.
1401/03/03
موارد اول و آخر مرز را به نشانگر بعدی گسترش نمی دهند.
1401/04/04
این آخرین مورد است. آخرین مورد پس از نشانگر خط زمانی مربوطه، خطی را نشان نخواهد داد.
<!-- Fade In Animation -->
<div class="timeline timeline-sm">
    <div class="timeline-item">
        <div class="timeline-item-marker">
            <div class="timeline-item-marker-text">...</div>
            <div class="timeline-item-marker-indicator"><i data-feather="check"></i></div>
        </div>
        <div class="timeline-item-content">اولین آیتم</div>
    </div>
    <div class="timeline-item">
        <div class="timeline-item-marker">
            <div class="timeline-item-marker-text">...</div>
            <div class="timeline-item-marker-indicator"><i data-feather="check"></i></div>
        </div>
        <div class="timeline-item-content">دومین آیتم</div>
    </div>
    <div class="timeline-item">
        <div class="timeline-item-marker">
            <div class="timeline-item-marker-text">...</div>
            <div class="timeline-item-marker-indicator"><i data-feather="check"></i></div>
        </div>
        <div class="timeline-item-content">سومین آیتم</div>
    </div>
</div>
//- Timeline component
.timeline.timeline-sm
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
                i(data-feather='check')
        .timeline-item-content
            | اولین آیتم
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
                i(data-feather='check')
        .timeline-item-content
            | دومین آیتم
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
                i(data-feather='check')
        .timeline-item-content
            | سومین آیتم
کامپوننت .timeline را با کلاس .timeline-sm اضافه کنید تا از یک نسخه کوچکتر و فشرده تر از خط زمانی استفاده کنید. همچنین به خاطر داشته باشید که استفاده از آیکون ها اختیاری است!
نوع خط زمانی بسیار کوچک
1401/01/01
این محتوای اولین مورد خط زمانی است.
1401/02/02
مورد دوم خط زمانی بعد از مورد اول می آید.
1401/03/03
موارد اول و آخر مرز را به نشانگر بعدی گسترش نمی دهند.
1401/04/04
این آخرین مورد است. آخرین مورد پس از نشانگر خط زمانی مربوطه، خطی را نشان نخواهد داد.
<!-- Fade In Animation -->
<div class="timeline timeline-xs">
    <div class="timeline-item">
        <div class="timeline-item-marker">
            <div class="timeline-item-marker-text">...</div>
            <div class="timeline-item-marker-indicator"></div>
        </div>
        <div class="timeline-item-content">اولین آیتم</div>
    </div>
    <div class="timeline-item">
        <div class="timeline-item-marker">
            <div class="timeline-item-marker-text">...</div>
            <div class="timeline-item-marker-indicator"></div>
        </div>
        <div class="timeline-item-content">دومین آیتم</div>
    </div>
    <div class="timeline-item">
        <div class="timeline-item-marker">
            <div class="timeline-item-marker-text">...</div>
            <div class="timeline-item-marker-indicator">/div>
        </div>
        <div class="timeline-item-content">سومین آیتم</div>
    </div>
</div>
//- Timeline component
.timeline.timeline-xs
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
        .timeline-item-content
            | اولین آیتم
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
        .timeline-item-content
            | دومین آیتم
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
        .timeline-item-content
            | سومین آیتم
کامپوننت .timeline را با کلاس .timeline-xs اضافه کنید تا تغییرات مؤلفه جدول زمانی حتی کوچکتر شود. در این اندازه، اضافه کردن محتوا به نشانگر مورد خط زمانی را توصیه نمی‌کنیم و در مثال‌های بالا هیچ محتوایی را در آن عنصر لحاظ نکرده‌ایم. در عوض، می‌توانید با استفاده از کلاس‌های کاربردی برای تغییر رنگ پس‌زمینه هر عنصر نشانگر، زمینه را به نشانگر خط زمانی اضافه کنید.
نمونه خط زمانی مدل دار
1401/01/01
شروع
این محتوای اولین مورد جدول زمانی است. در این مثال سبک، ما نشانگر خط زمانی را با پس‌زمینه و کلاس‌های کاربردی تایپوگرافی استایل می‌دهیم. همچنین نشان داده‌ایم که می‌توانید از مؤلفه کارت در محتوای آیتم جدول زمانی استفاده کنید.
1401/02/02
دومین آیتم
این محتوای مورد دوم جدول زمانی است. در این مثال خط زمانی، ما همچنین از برخی ابزارهای فاصله‌گذاری روی محتوای آیتم تایم لاین برای حذف بالشتک از بالای آن عنصر استفاده می‌کنیم.
1401/03/03
سومین آیتم
این محتوای سومین مورد جدول زمانی است. به خاطر داشته باشید که این فقط یک نمونه از مواردی است که می توانید در محتوای آیتم خط زمانی قرار دهید. راه های زیادی وجود دارد که می توانید از این جدول زمانی استفاده کنید، و همچنین کاملاً پاسخگو است!
1401/04/04
آخرین آیتم
اگر فقط یک دایره خالی می خواهید، می توانید از آیکون های مختلف در نشانگرها، حروف، یا اصلاً هیچ آیکونی استفاده نکنید. 
<!-- Styled timeline component example -->
<div class="timeline">
    <div class="timeline-item">
        <div class="timeline-item-marker">
            <div class="timeline-item-marker-text">1401/01/01</div>
            <div class="timeline-item-marker-indicator bg-primary-soft text-primary"><i data-feather="flag"></i></div>
        </div>
        <div class="timeline-item-content pt-0">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="text-primary">شروع</h5>
                    این محتوای اولین مورد جدول زمانی است. در این مثال سبک، ما نشانگر خط زمانی را با پس‌زمینه و کلاس‌های کاربردی تایپوگرافی استایل می‌دهیم. همچنین نشان داده‌ایم که می‌توانید از مؤلفه کارت در محتوای آیتم جدول زمانی استفاده کنید.
                </div>
            </div>
        </div>
    </div>
    <div class="timeline-item">
        <div class="timeline-item-marker">
            <div class="timeline-item-marker-text">1401/02/02</div>
            <div class="timeline-item-marker-indicator bg-success-soft text-success"><i data-feather="gift"></i></div>
        </div>
        <div class="timeline-item-content pt-0">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="text-success">دومین آیتم</h5>
                    این محتوای مورد دوم جدول زمانی است. در این مثال خط زمانی، ما همچنین از برخی ابزارهای فاصله‌گذاری روی محتوای آیتم تایم لاین برای حذف بالشتک از بالای آن عنصر استفاده می‌کنیم.
                </div>
            </div>
        </div>
    </div>
    <div class="timeline-item">
        <div class="timeline-item-marker">
            <div class="timeline-item-marker-text">1401/03/03</div>
            <div class="timeline-item-marker-indicator bg-secondary-soft text-secondary"><i data-feather="map"></i></div>
        </div>
        <div class="timeline-item-content pt-0">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="text-secondary">سومین آیتم</h5>
                    این محتوای سومین مورد جدول زمانی است. به خاطر داشته باشید که این فقط یک نمونه از مواردی است که می توانید در محتوای آیتم خط زمانی قرار دهید. راه های زیادی وجود دارد که می توانید از این جدول زمانی استفاده کنید، و همچنین کاملاً پاسخگو است!
                </div>
            </div>
        </div>
    </div>
    <div class="timeline-item">
        <div class="timeline-item-marker">
            <div class="timeline-item-marker-text">1401/04/04</div>
            <div class="timeline-item-marker-indicator bg-warning-soft text-warning"><i data-feather="send"></i></div>
        </div>
        <div class="timeline-item-content pt-0">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="text-warning">آخرین آیتم</h5>
                    اگر فقط یک دایره خالی می خواهید، می توانید از آیکون های مختلف در نشانگرها، حروف، یا اصلاً هیچ آیکونی استفاده نکنید.
                </div>
            </div>
        </div>
    </div>
</div>
//- Styled timeline component example
.timeline
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | 1401/01/01
            .timeline-item-marker-indicator.bg-primary-soft.text-primary
                i(data-feather='flag')
        .timeline-item-content.pt-0
            .card.shadow-sm
                .card-body
                    h5.text-primary شروع
                    | این محتوای اولین مورد جدول زمانی است. در این مثال سبک، ما نشانگر خط زمانی را با پس‌زمینه و کلاس‌های کاربردی تایپوگرافی استایل می‌دهیم. همچنین نشان داده‌ایم که می‌توانید از مؤلفه کارت در محتوای آیتم جدول زمانی استفاده کنید.
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | 1401/02/02
            .timeline-item-marker-indicator.bg-success-soft.text-success
                i(data-feather='gift')
        .timeline-item-content.pt-0
            .card.shadow-sm
                .card-body
                    h5.text-success دومین آیتم
                    | این محتوای مورد دوم جدول زمانی است. در این مثال خط زمانی، ما همچنین از برخی ابزارهای فاصله‌گذاری روی محتوای آیتم تایم لاین برای حذف بالشتک از بالای آن عنصر استفاده می‌کنیم.
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | 1401/03/03
            .timeline-item-marker-indicator.bg-secondary-soft.text-secondary
                i(data-feather='map')
        .timeline-item-content.pt-0
            .card.shadow-sm
                .card-body
                    h5.text-secondary سومین آیتم
                    | این محتوای سومین مورد جدول زمانی است. به خاطر داشته باشید که این فقط یک نمونه از مواردی است که می توانید در محتوای آیتم خط زمانی قرار دهید. راه های زیادی وجود دارد که می توانید از این جدول زمانی استفاده کنید، و همچنین کاملاً پاسخگو است!
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | 1401/04/04
            .timeline-item-marker-indicator.bg-warning-soft.text-warning
                i(data-feather='send')
        .timeline-item-content.pt-0
            .card.shadow-sm
                .card-body
                    h5.text-warning آخرین آیتم
                    | اگر فقط یک دایره خالی می خواهید، می توانید از آیکون های مختلف در نشانگرها، حروف، یا اصلاً هیچ آیکونی استفاده نکنید.
از کلاس های کاربردی داخلی برای تغییر نمایش محتوای خط زمانی و استایل نشانگرهای خط زمانی استفاده کنید.