ای بازار

مستندات

دانلود به داشبورد بروید
شروع به کار

این راهنما به شما در شروع کار کمک می کند ای بازار! همه چیزهای مهم – کامپایل منبع، ساختار فایل، ابزارهای ساخت، فایل شامل – در اینجا مستند شده است، اما اگر سؤالی دارید، همیشه با خیال راحت با آن تماس بگیرید arashkhademloo74@gmail.com

اگر واقعاً کار، طراحی، عملکرد و پشتیبانی ما را دوست دارید پس لطفا فراموش نکنید که به ما امتیاز دهید در راستچین
این واقعاً به ما انگیزه می دهد تا چیز بهتری ارائه دهیم.

لطفا توجه داشته باشید :

- همه تصاویر فقط برای هدف پیش نمایش استفاده می شوند. آنها بخشی از قالب نیستند و در فایل های خرید نهایی گنجانده نشده اند.

راه اندازی نصب

برای شروع باید موارد زیر را انجام دهید:

  1. نصب Grunt: اجرا کنید npm install grunt --save-dev از ترمینال خود دستور نصب grunt را در پروژه خود بدهید.
  2. Grunt Sass: اجرا کنید grunt sass دستور از دایرکتوری پروژه شما SASS را به CSS برای پروژه کامپایل می کند. با این کار فایل خوانده می شود `scss/filename.scss` و خروجی یک plain-css file to `dist/assets/css/filename.css`.
  3. Grunt JSHint: اجرا کنید grunt jshint دستور از دایرکتوری پروژه شما همه را بررسی خواهد کرد *.js files under `assetsjs/filename` برای خطاهای رایج نحوی یا کدنویسی با استفاده از ابزار JSHint.
  4. Grunt Sprite: اجرا کنید grunt sprite دستور از دایرکتوری پروژه شما.
  5. Further help: برای دریافت راهنمایی بیشتر در مورد تسویه حساب Grunt Grunt
  6. توجه: با این حال، هر کد SASS که می نویسید باید بتواند از طریق Grunt نیز کامپایل شود. این قالب های جاوا اسکریپت از پیش کامپایل شده را تولید می کند. همه فایل های *.html را از آن می خواند `assets/js/filename` و خروجی ها `assets/js/filename.templates.js`. Template.js حاوی کد طراحی UI خواهد بود و هر بار که راه حل را از طریق دستور بالا می سازید تغییر می کند.

Grunt یک جاوا اسکریپت اجرا کننده وظیفه است، ابزاری که برای انجام خودکار وظایف مکرر مانند کوچک سازی، کامپایل، تست واحد و پر کردن استفاده می شود. از یک رابط خط فرمان برای اجرای وظایف سفارشی تعریف شده در یک فایل استفاده می کند.

ساختار فایل
  • مستندات - مستندات پروژه
    • assets
      • css - فایل CSS کامپایل شده
      • fonts - فونت آیکون و فونت عالی
      • images - دارایی های تصویری
      • js - فایل JS کامپایل شده
      • plugin - افزونه های JS و فایل css
    • index.html - سند پروژه خوب
  • Html - پروژه Html
    • dist - فایل های تولیدی ایجاد شده
      • assets
        • bundles - بسته بندی افزونه ها فایل JS
        • css - CSS کامپایل شده
        • fonts - فونت آیکون و فونت عالی
        • images - دارایی های تصویری
        • plugin - افزونه های JS و فایل css
      • ui-elements- Ui-Elements با استفاده از برنامه سفارشی
        • Index.html - تمام فایل های Html مانند احراز هویت، اجزای رابط کاربری، تغییرات و غیره...
      • Index.html-قالب Html ای بازار
    • js - منبع جاوا اسکریپت
      • page - فایل صفحه js
      • template - فایل js رایج
    • node_modules - وابستگی های NPM (به طور پیش فرض پوشه شامل نمی شود) npm وابستگی ها را نصب می کند.
    • scss - منبع SCSS برای قالب
      • bootstrap - اجزای بوت استرپ سفارشی
      • generic - کلاس انیمیشن، کمکی
      • global - متغیرها، تم ها، ترکیب ها
      • plugin - تمام پلاگین فایل scss
      • skeleton - طرح بندی فایل جداگانه
      • widgets - فایل تمام ویجت ها
      • main.scss - فایل scss اصلی پروژه
    • Gruntfile.js - تمام دستورات ساخت
    • package.json - لیست وابستگی ها و اطلاعات npm
    • .gitignore - تمام فایل های غیر ضروری را از Git مخفی کنید
اطلاعات چیدمان ها
منوی پیش‌فرض کد را باز کنید
        <div class="sidebar px-4 py-2 py-md-4 me-0">
            <div class="d-flex flex-column h-100">
                <!-- Main Logo -->
                <a href="index.html" class="mb-0 brand-icon">
                </a>
                <!-- Menu: main ul -->
                <ul class="menu-list flex-grow-1 mt-3">
                </ul>
                <!-- Theme: Switch Theme -->
                <ul class="list-unstyled mb-0">
                </ul>
                <!-- Menu: menu collepce btn -->
                <button type="button" class="btn btn-link sidebar-mini-btn text-light">
                    <span class="ms-2"><i class="icofont-bubble-right"></i></span>
                </button>
            </div>
        </div>
به طور پیش فرض منو بستن کد
        <div class="sidebar px-4 py-2 sidebar-mini py-md-4 me-0">
            <div class="d-flex flex-column h-100">
                <!-- Main Logo -->
                <a href="index.html" class="mb-0 brand-icon">
                </a>
                <!-- Menu: main ul -->
                <ul class="menu-list flex-grow-1 mt-3">
                </ul>
                <!-- Theme: Switch Theme -->
                <ul class="list-unstyled mb-0">
                </ul>
                <!-- Menu: menu collepce btn -->
                <button type="button" class="btn btn-link sidebar-mini-btn text-light">
                    <span class="ms-2"><i class="icofont-bubble-right"></i></span>
                </button>
            </div>
        </div>
اطلاعات تنظیم
تنظیمات رنگ قالب

9 قالب گزینه رنگ در اینجا موجود است. به سادگی گزینه های رنگ مورد علاقه خود را انتخاب کنید. همچنین گزینه رنگ شیب نوار کناری نوار کناری گرادیان در دسترس است. فقط شیب ساده را روشن کنید.

تنظیم رنگ پویا

شما می توانید رنگ های اصلی خود را تنظیم کنید و رنگ های ثانویه نیز گزینه های رنگ نمودار را در دسترس قرار دهید. فقط به سادگی رنگ خود را تنظیم کنید. در کادر رنگ کلیک کنید تا انتخابگر رنگ باز شود و رنگ خود را انتخاب کنید

تنظیم فونت گوگل

4 گزینه فونت گوگل وجود دارد. فقط کافی است گزینه فونت ها را انتخاب کنید

چیدمان روشن/تاریک و کنتراست

روشن: توسط الگوی طرح بندی رنگ نور پیش فرض انتخاب شده است

تاریک: روشن کردن حالت تاریک را فعال کنید.

کنتراست بالا: روشن کردن حالت کنتراست بالا را فعال کنید.

چپ چین: روشن کردن حالت LTR را فعال کنید.

High Contrast Themefor better accessibility

ebazar has a pre-built High contrast theme for improving accessibility.

If you follow the standard of ebazar, the High contrast theme will be applied to all ebazar elements, regardless of whether they are charts or labels.

ابزارهای مشترک با کلاس سفارشی
رنگ متن
کلاس نتایج
.text-primary لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
.text-secondary لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
.text-success لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
.text-info لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
.text-warning لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
.text-danger لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
.text-dark لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
.color-lightyellow لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
.color-lightblue لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
.color-light-success لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
.color-light-orange لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
.color-careys-pink لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
رنگ پس زمینه
کلاس نتایج
.bg-primary
.bg-secondary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-dark
.bg-white
.bg-lightyellow
.bg-lightblue
.bg-careys-pink
.light-success-bg
.light-orange-bg
اجزای طرح بندی

اجزای مشترک به راحتی توسط توسعه دهنده سفارشی می شود

دکمه
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-light">Light</button>
        <button type="button" class="btn btn-dark">Dark</button>

        <button type="button" class="btn btn-link">Link</button>
ناوبری
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-xxl">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Dropdown
                            </a>
                            <ul class="dropdown-menu border-0 shadow" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                        </li>
                        <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
                    </ul>
                    <form class="d-flex">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>
برد کرامب
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item active" aria-current="page">Home</li>
                        </ol>
                    </nav>
                    
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Library</li>
                        </ol>
                    </nav>
                    
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                        </ol>
                    </nav>
کارت
عنوان کارت
زیرنویس کارت

چند نمونه متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.

لینک کارت لینک دیگه 
                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
مزایا
  • دسترسی بسیار آسان به اجزای شروع کننده و تنظیمات اصلی از هر نقطه در قالب.
  • معماری واضح بصری.
  • اجتناب از احتمال تداخل بین کدهای فرانت و پلاگین های شخص ثالث (کتابخانه ها).
  • ایجاد مولفه‌های wrapper به سادگی ساختارهای اولیه پیچیده را برای کاربران حل می‌کند.
  • همه چیز ساختار یافته است، هر جزء در فایل خود و در جزء خود در شی اصلی.
  • توانایی گسترش عملکرد بدون تأثیر بر رفتار شی اصلی و عدم تغییر عملکرد موجود.
اعتبار قالب eBazar
فونت گوگل https://fonts.google.com/
بوت استرپ https://v5.getbootstrap.com/
جی کوئری https://jquery.com/
SASS https://sass-lang.com/
Grunt https://gruntjs.com/
NPM https://www.npmjs.com/
Fontawesome https://fontawesome.com/v4.7.0/
Icon Font https://icofont.com/icons
نمودارهای Apex https://apexcharts.com/
نمودارهای Sparkline https://omnipotent.net/jquery.sparkline/#s-about
Fullcalendar https://fullcalendar.io/
Pexels https://www.pexels.com/
متشکرم!

https://www.rtl-theme.com/

یک بار دیگر از شما برای خرید این قالب بسیار سپاسگزاریم. همانطور که در ابتدا گفتم، خوشحال می شوم اگر سوالی در مورد این الگو دارید به شما کمک کنم. اگر واقعاً کار، طراحی، عملکرد و پشتیبانی ما را دوست دارید پس لطفا فراموش نکنید که به ما امتیاز دهید در rtl-theme، این واقعاً به ما انگیزه می دهد تا چیز بهتری ارائه دهیم.
سفارشی کردن کد و توسعه
ما می توانیم مجموعه ای از خدمات را برای سفارشی کردن الگو با توجه به نیازهای شما ارائه دهیم
ما را استخدام کنید
راهنمای قالب
با کسب و کار eBazar شروع کنید و در مورد ویژگی های مدیران و کاربران بیاموزید.
راهنما را بررسی کنید
پاسخ ها را دریافت کنید
برای پاسخ به مشکلات رایج به مرکز راهنمایی مراجعه کنید.
به مرکز راهنمایی بروید
با تشکر از انتخاب پارادایم شیفت مدیریت.
با ما چت کنید
به ما ایمیل بزنید

©eBazar. 2021 پارادایم شیفت.