t اسکریپت Material Dashboard | متریال داشبورد انگولار | اسکریپت متریال داشبورد این محصول یک داشبورد با امکانات اولیه بر مبنای Google Angular برای پروژه انگولاری بعدی شماست. این محصول در بخش طراحی از Bootstrap و Material Design بهره برده است. Material Design راه حل پرقدرت شرکت Google در طراحی رابط کاربری است که در تمامی محصولات خودش نیز از آن بهره می برد. در طراحی این محصول تلاش شده است از اصل سادگی و زیبایی بهره برداری شود.در طرف راست این محصول یک سایدبار دیده میشود و در سمت چپ محل قرار گیری محتوای صفحه است.این محصول دارای 5 (آبی, سبز, نارنجی, قرمز و بنفش) رنگ سایدبار میباشد . همچنین میتوانید برای سایدبار خود یک تصویر پشت زمینه قرار دهید تا جلوه آن بیشتر شود. به دلیل محدودیت های اعمال شده توسط گوگل ، برای استفاده از نقشه گوگل که در این محصول باید کلید api خود را از گوگل دریافت کنید. این محصول با Angular CLI ایجاد شده است و از Angular 7.x بهره میبرد پروژه حاضر حاوی فایل های زیر است. material-dashboard-angular برای تغییر رنگ سایدبار فایل admin-layout.component.html را به صورت زیر تغییر دهید : فایل را برای کلمه data-color جستجو کنید . مقدار data-color را به یکی از مقادیر danger , orange,purple,azure,green تغییر دهید . همچنین برای تغییر پس زمینه سایدبار فایل ، نام فایل sidebar-1.jpg را تغییر دهید اسکریپت Material Dashboard بر مبنای Google Angular
اسکریپت متریال داشبورد به صورت کامل راست چین شده است و کاملا برای برپایی پروژه با زبان فارسی آماده می باشد.
برپایی محصول
npm instal
ng serve
را برای برپایی سرور توسعه محصول اجرا کنید. به آدرس http://localhost:4200/
در مرورگر خود بروید. هم اکنون محصول مشاهده میشود . با هر تغییری که در پروژه اعمال میکنید ، صفحه مرورگر خود به خود بروز میشود.همچنین برای دریافت خروجی جهت آپلود از دستور ng build
استفاده نمایید.در این صورت خروجی شما در فولدر dist ساخته خواهد شد.ساختار فایلی پروژه اسکریپت Material Dashboard
├── 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
این قالب در طراحی خود از فریم ورک بوت استرپ و HTML5 و CSS3 استفاده کرده و دارای بیش از 7صفحه کاربردی است.
ویژگی های قالب مدیریت سایت :
طراحی شده توسط فریم ورک بوت استرپ 3
طراحی انحصاری برای نمایشگرهای موبایل
استفاده از HTML5 & CSS3
کدهای آسان برای توسعه دهندگان
پلاگین ها و افزونه های جی کوئری
واکنش گرا
کاملا فارسی
و…
مناسب برای انواع پروژه های کوچک و بزرگ.
کاملا راست چین شده.
امکان استفاده از نقشه.(گوگل در تغیرات جدید برای نمایش نقشه از API استفاده میکنه و ما تو این قالب از آخرین تغییرات استفاده کردیم)
امکان استفاده از اعلان ها در هر جای صفحه (بالا راست ، بالا وسط ، بالا چپ ،پایین راست ،پایین وسط و پایین چپ).
استفاده از نمودار خطی ، دایره ای و نقطه ای.
کد نویسی بسیار ساده شده و آسان .