اسکریپت Material Dashboard | متریال داشبورد انگولار | اسکریپت متریال داشبورد
اسکریپت Material Dashboard بر مبنای Google Angular
این محصول یک داشبورد با امکانات اولیه بر مبنای Google Angular برای پروژه انگولاری بعدی شماست. این محصول در بخش طراحی از Bootstrap و Material Design بهره برده است. Material Design راه حل پرقدرت شرکت Google در طراحی رابط کاربری است که در تمامی محصولات خودش نیز از آن بهره می برد.
در طراحی این محصول تلاش شده است از اصل سادگی و زیبایی بهره برداری شود.در طرف راست این محصول یک سایدبار دیده میشود و در سمت چپ محل قرار گیری محتوای صفحه است.این محصول دارای 5 (آبی, سبز, نارنجی, قرمز و بنفش) رنگ سایدبار میباشد . همچنین میتوانید برای سایدبار خود یک تصویر پشت زمینه قرار دهید تا جلوه آن بیشتر شود.
اسکریپت متریال داشبورد به صورت کامل راست چین شده است و کاملا برای برپایی پروژه با زبان فارسی آماده می باشد.
به دلیل محدودیت های اعمال شده توسط گوگل ، برای استفاده از نقشه گوگل که در این محصول باید کلید api خود را از گوگل دریافت کنید.
برپایی محصول
این محصول با Angular CLI ایجاد شده است و از Angular 7.x بهره میبرد
- ابتدا Nodejs را از صفحه رسمی آن نصب کنید
- یک ترمینال خط فرمان باز کنید.
- در ترمینال به محل فایل های پروژه بروید.
- اطمینان حاصل کنید Angular-CLI نصب است . اگر نیست آن را نصب کنید
- این دستور را در ترمینال اجرا کنید (در شاخه اصلی فایل های پروژه):
npm instal - دستور
ng serveرا برای برپایی سرور توسعه محصول اجرا کنید. به آدرسhttp://localhost:4200/در مرورگر خود بروید. هم اکنون محصول مشاهده میشود . با هر تغییری که در پروژه اعمال میکنید ، صفحه مرورگر خود به خود بروز میشود.همچنین برای دریافت خروجی جهت آپلود از دستورng buildاستفاده نمایید.در این صورت خروجی شما در فولدر dist ساخته خواهد شد.
ساختار فایلی پروژه اسکریپت Material Dashboard
پروژه حاضر حاوی فایل های زیر است.
material-dashboard-angular
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── angular-cli.json
├── documentation
├── e2e
├── karma.conf.js
├── package-lock.json
├── package.json
├── protractor.conf.js
├── src
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ ├── app.routing.ts
│ │ ├── components
│ │ │ ├── components.module.ts
│ │ │ ├── footer
│ │ │ │ ├── footer.component.css
│ │ │ │ ├── footer.component.html
│ │ │ │ ├── footer.component.spec.ts
│ │ │ │ └── footer.component.ts
│ │ │ ├── navbar
│ │ │ │ ├── navbar.component.css
│ │ │ │ ├── navbar.component.html
│ │ │ │ ├── navbar.component.spec.ts
│ │ │ │ └── navbar.component.ts
│ │ │ └── sidebar
│ │ │ ├── sidebar.component.css
│ │ │ ├── sidebar.component.html
│ │ │ ├── sidebar.component.spec.ts
│ │ │ └── sidebar.component.ts
│ │ ├── dashboard
│ │ │ ├── dashboard.component.css
│ │ │ ├── dashboard.component.html
│ │ │ ├── dashboard.component.spec.ts
│ │ │ └── dashboard.component.ts
│ │ ├── icons
│ │ │ ├── icons.component.css
│ │ │ ├── icons.component.html
│ │ │ ├── icons.component.spec.ts
│ │ │ └── icons.component.ts
│ │ ├── layouts
│ │ │ └── admin-layout
│ │ │ ├── admin-layout.component.html
│ │ │ ├── admin-layout.component.scss
│ │ │ ├── admin-layout.component.spec.ts
│ │ │ ├── admin-layout.component.ts
│ │ │ ├── admin-layout.module.ts
│ │ │ └── admin-layout.routing.ts
│ │ ├── maps
│ │ │ ├── maps.component.css
│ │ │ ├── maps.component.html
│ │ │ ├── maps.component.spec.ts
│ │ │ └── maps.component.ts
│ │ ├── notifications
│ │ │ ├── notifications.component.css
│ │ │ ├── notifications.component.html
│ │ │ ├── notifications.component.spec.ts
│ │ │ └── notifications.component.ts
│ │ ├── table-list
│ │ │ ├── table-list.component.css
│ │ │ ├── table-list.component.html
│ │ │ ├── table-list.component.spec.ts
│ │ │ └── table-list.component.ts
│ │ ├── typography
│ │ │ ├── typography.component.css
│ │ │ ├── typography.component.html
│ │ │ ├── typography.component.spec.ts
│ │ │ └── typography.component.ts
│ │ ├── upgrade
│ │ │ ├── upgrade.component.css
│ │ │ ├── upgrade.component.html
│ │ │ ├── upgrade.component.spec.ts
│ │ │ └── upgrade.component.ts
│ │ └── user-profile
│ │ ├── user-profile.component.css
│ │ ├── user-profile.component.html
│ │ ├── user-profile.component.spec.ts
│ │ └── user-profile.component.ts
│ ├── assets
│ │ ├── css
│ │ │ └── demo.css
│ │ ├── img
│ │ └── scss
│ │ ├── core
│ │ └── material-dashboard.scss
│ ├── environments
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── tsconfig.json
├── tslint.json
└── typings
برای تغییر رنگ سایدبار فایل admin-layout.component.html را به صورت زیر تغییر دهید :
فایل را برای کلمه data-color جستجو کنید . مقدار data-color را به یکی از مقادیر danger , orange,purple,azure,green تغییر دهید .
همچنین برای تغییر پس زمینه سایدبار فایل ، نام فایل sidebar-1.jpg را تغییر دهید
راهنمای خرید
- لینک دانلود فایل بلافاصله بعد از پرداخت وجه به نمایش در خواهد آمد.
- همچنین لینک دانلود به ایمیل شما ارسال خواهد شد به همین دلیل ایمیل خود را به دقت وارد نمایید.
- ممکن است ایمیل ارسالی به پوشه اسپم یا Bulk ایمیل شما ارسال شده باشد.
قالب Deva، قالب وردپرس لندینگ پیج و دیجیتال مارکتینگ دوا
اسکریپت دو زبانه Elmiz، اسکریپت شخصی و رزومه المیز
قالب Ask Me، قالب پرسش و پاسخ وردپرس اسک می
ثبت دیدگاه
- دیدگاه های ارسال شده توسط شما، پس از تایید توسط تیم مدیریت در وب منتشر خواهد شد.
- پیام هایی که حاوی تهمت یا افترا باشد منتشر نخواهد شد.
- پیام هایی که به غیر از زبان فارسی یا غیر مرتبط باشد منتشر نخواهد شد.
جزئیات فایل
بازدید : 1609 بازدیدتاریخ انتشار : 25 فوریه 2020
بروز رسانی :
حجم فایل :
فرمت :
فایل راهنما :
ارسال توسط: کلکسیون طراحی
برچسب ها : خرید اسکریپت Material Dashboard / داشبورد راست چین شده / دانلود اسکریپت Material Dashboard