اسکریپت Material Dashboard | متریال داشبورد انگولار

اسکریپت Material Dashboard | متریال داشبورد انگولار | اسکریپت متریال داشبورد

اسکریپت Material Dashboard بر مبنای Google Angular

این محصول یک داشبورد با امکانات اولیه بر مبنای Google Angular برای پروژه انگولاری بعدی شماست. این محصول در بخش طراحی از Bootstrap و Material Design بهره برده است. Material Design راه حل پرقدرت شرکت Google در طراحی رابط کاربری است که در تمامی محصولات خودش نیز از آن بهره می برد.

در طراحی این محصول تلاش شده است از اصل سادگی و زیبایی بهره برداری شود.در طرف راست این محصول یک سایدبار دیده میشود و در سمت چپ محل قرار گیری محتوای صفحه است.این محصول دارای 5 (آبی, سبز, نارنجی, قرمز و بنفش) رنگ سایدبار میباشد . همچنین میتوانید برای سایدبار خود یک تصویر پشت زمینه قرار دهید تا جلوه آن بیشتر شود.

اسکریپت متریال داشبورد به صورت کامل راست چین شده است و کاملا برای برپایی پروژه با زبان فارسی آماده می باشد.

به دلیل محدودیت های اعمال شده توسط گوگل ، برای استفاده از نقشه گوگل که در این محصول باید کلید api خود را از گوگل دریافت کنید.

برپایی محصول

این محصول با Angular CLI ایجاد شده است و از Angular 7.x بهره میبرد

1. ابتدا Nodejs را از صفحه رسمی آن نصب کنید
2. یک ترمینال خط فرمان باز کنید.
3. در ترمینال به محل فایل های پروژه بروید.
4. اطمینان حاصل کنید Angular-CLI نصب است . اگر نیست آن را نصب کنید
5. این دستور را در ترمینال اجرا کنید (در شاخه اصلی فایل های پروژه): npm instal
6. دستور 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 را به صورت زیر تغییر دهید :