mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-18 00:10:14 +01:00
feat: docs app
This commit is contained in:
Sergey Andrievskiy
parent
713aff561e
commit
2129689f98
203 changed files with 15927 additions and 5 deletions
|
|
@ -0,0 +1,65 @@
|
|||
<ngx-landing-section-title>
|
||||
Multiple theme
|
||||
</ngx-landing-section-title>
|
||||
|
||||
<div class="carousel-container">
|
||||
<div class="swiper-container reviews"
|
||||
[swiper]="swiperConfig"
|
||||
[(index)]="sliderIndex">
|
||||
<div class="swiper-wrapper">
|
||||
<a href="http://akveo.com/ngx-admin/pages/dashboard?theme=default&utm_source=ngxsite&utm_medium=slider&utm_campaign=themes" target="_blank" class="image-container swiper-slide">
|
||||
<img *ngIf="breakpoint.width <= breakpoints.sm"
|
||||
data-src="assets/img/light-theme.png"
|
||||
class="swiper-lazy"
|
||||
alt="Light Theme" />
|
||||
<img *ngIf="!(breakpoint.width <= breakpoints.sm)"
|
||||
lazyLoad="assets/img/light-theme.png"
|
||||
defaultImage="assets/img/default.png"
|
||||
alt="Light Theme" />
|
||||
</a>
|
||||
<a href="http://akveo.com/ngx-admin/pages/dashboard?theme=dark&utm_source=ngxsite&utm_medium=slider&utm_campaign=themes" target="_blank" class="image-container swiper-slide">
|
||||
<img *ngIf="breakpoint.width <= breakpoints.sm"
|
||||
data-src="assets/img/dark-theme.png"
|
||||
class="swiper-lazy"
|
||||
alt="Dark Theme" />
|
||||
<img *ngIf="!(breakpoint.width <= breakpoints.sm)"
|
||||
lazyLoad="assets/img/dark-theme.png"
|
||||
defaultImage="assets/img/default.png"
|
||||
alt="Dark Theme" />
|
||||
</a>
|
||||
<a href="http://akveo.com/ngx-admin/pages/dashboard?theme=cosmic&utm_source=ngxsite&utm_medium=slider&utm_campaign=themes" target="_blank" class="image-container swiper-slide">
|
||||
<img *ngIf="breakpoint.width <= breakpoints.sm"
|
||||
data-src="assets/img/cosmic-theme.png"
|
||||
class="swiper-lazy"
|
||||
alt="Cosmic Theme" />
|
||||
<img *ngIf="!(breakpoint.width <= breakpoints.sm)"
|
||||
lazyLoad="assets/img/cosmic-theme.png"
|
||||
defaultImage="assets/img/default.png"
|
||||
alt="Cosmic Theme" />
|
||||
</a>
|
||||
<a href="http://akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_source=ngxsite&utm_medium=slider&utm_campaign=themes" target="_blank" class="image-container swiper-slide">
|
||||
<img *ngIf="breakpoint.width <= breakpoints.sm"
|
||||
data-src="assets/img/corporate-theme.png"
|
||||
class="swiper-lazy"
|
||||
alt="Corporate Theme" />
|
||||
<img *ngIf="!(breakpoint.width <= breakpoints.sm)"
|
||||
src="assets/img/corporate-theme.png"
|
||||
alt="Corporate Theme"
|
||||
class="ng-lazyloaded"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
<div class="swiper-button-prev">
|
||||
<i [innerHTML]="'arrow-ios-back' | eva: { width: 36, height: 36, fill: '#00db92' }"></i>
|
||||
</div>
|
||||
<div class="swiper-button-next">
|
||||
<i [innerHTML]="'arrow-ios-forward' | eva: { width: 36, height: 36, fill: '#00db92' }"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-demo"
|
||||
href="http://akveo.com/ngx-admin?utm_source=ngx_admin_landing&utm_medium=theme_section"
|
||||
target="_blank">View demo</a>
|
||||
230
docs/app/pages/home/theme-section/theme-section.component.scss
Normal file
230
docs/app/pages/home/theme-section/theme-section.component.scss
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
display: block;
|
||||
padding-top: 6.25rem;
|
||||
padding-bottom: 5.125rem;
|
||||
text-align: center;
|
||||
|
||||
.image-container {
|
||||
width: 75.875rem;
|
||||
height: 46.625rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.swiper-wrapper {
|
||||
padding-top: 4.125rem;
|
||||
}
|
||||
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: none;
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
box-shadow: nb-theme(shadow-default);
|
||||
top: 22.625rem;
|
||||
|
||||
&:hover {
|
||||
box-shadow: nb-theme(shadow-hover-btn);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: nb-theme(shadow-active-btn);
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
left: 18%;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: 18%;
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
left: 1.5rem;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
|
||||
::ng-deep .swiper-pagination-bullet {
|
||||
height: 0.25rem;
|
||||
width: auto;
|
||||
border-radius: 0;
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
font-size: nb-theme(font-size-lg);
|
||||
color: nb-theme(color-fg);
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
opacity: 0.56;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #eff1f3;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 3.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
color: nb-theme(color-active-fg);
|
||||
|
||||
&::after {
|
||||
border-radius: 0.375rem;
|
||||
background: nb-theme(color-active-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
box-shadow: nb-theme(shadow-default);
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.btn-demo {
|
||||
margin-top: 0.375rem;
|
||||
padding: 1.125rem 6.25rem;
|
||||
color: #ffffff;
|
||||
background-color: nb-theme(color-active-fg);
|
||||
box-shadow: nb-theme(shadow-btn);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: nb-theme(shadow-hover-green-btn);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: nb-theme(shadow-active-green-btn);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
.swiper-button-prev {
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xxl) {
|
||||
.image-container {
|
||||
width: 64.875rem;
|
||||
height: 39.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding-top: 0;
|
||||
|
||||
.image-container {
|
||||
width: 46.875rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
img {
|
||||
transition: opacity 1s;
|
||||
opacity: 0;
|
||||
|
||||
&.ng-lazyloaded {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
padding-top: 2.375rem;
|
||||
padding-bottom: 1.875rem;
|
||||
|
||||
.carousel-container {
|
||||
margin-top: 2.25rem;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
max-width: 19.75rem;
|
||||
max-height: 12rem;
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
left: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
::ng-deep .swiper-pagination-bullet {
|
||||
flex: 1;
|
||||
font-size: nb-theme(font-size-sm);
|
||||
|
||||
span {
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
&.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
color: nb-theme(color-active-fg);
|
||||
|
||||
&::after {
|
||||
border-radius: 0.375rem;
|
||||
background: nb-theme(color-active-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-demo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
100
docs/app/pages/home/theme-section/theme-section.component.ts
Normal file
100
docs/app/pages/home/theme-section/theme-section.component.ts
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
import {
|
||||
NbMediaBreakpoint,
|
||||
NbMediaBreakpointsService,
|
||||
NbThemeService,
|
||||
} from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-landing-theme-section',
|
||||
templateUrl: './theme-section.component.html',
|
||||
styleUrls: ['./theme-section.component.scss'],
|
||||
})
|
||||
export class ThemeSectionComponent implements OnDestroy {
|
||||
|
||||
private alive = true;
|
||||
private themes: string[] = [
|
||||
'Light',
|
||||
'Dark',
|
||||
'Cosmic',
|
||||
'Corporate',
|
||||
];
|
||||
|
||||
breakpoint: NbMediaBreakpoint;
|
||||
breakpoints: any;
|
||||
sliderIndex: number = 1;
|
||||
initialSwiperConfig: SwiperConfigInterface = {
|
||||
direction: 'horizontal',
|
||||
spaceBetween: 200,
|
||||
slidesPerView: 'auto',
|
||||
centeredSlides: true,
|
||||
keyboard: true,
|
||||
navigation: true,
|
||||
|
||||
effect: 'coverflow',
|
||||
grabCursor: true,
|
||||
coverflowEffect: {
|
||||
rotate: 0,
|
||||
stretch: 0,
|
||||
depth: 500,
|
||||
modifier: 1,
|
||||
slideShadows : false,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
hideOnClick: false,
|
||||
renderBullet: (index, className) => {
|
||||
return `
|
||||
<span class="${className}">
|
||||
<span>
|
||||
${this.themes[index]}
|
||||
</span>
|
||||
</span>`;
|
||||
},
|
||||
},
|
||||
};
|
||||
swiperConfig: SwiperConfigInterface = {
|
||||
...this.initialSwiperConfig,
|
||||
};
|
||||
|
||||
constructor(private themeService: NbThemeService,
|
||||
private breakpointService: NbMediaBreakpointsService) {
|
||||
this.breakpoints = this.breakpointService.getBreakpointsMap();
|
||||
this.themeService.onMediaQueryChange()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(([oldValue, newValue]) => {
|
||||
this.breakpoint = newValue;
|
||||
|
||||
this.changeSwiperConfig();
|
||||
});
|
||||
}
|
||||
|
||||
changeSwiperConfig(): void {
|
||||
if (this.isMobile) {
|
||||
this.swiperConfig = {
|
||||
...this.swiperConfig,
|
||||
preloadImages: false,
|
||||
lazy: true,
|
||||
};
|
||||
} else {
|
||||
this.swiperConfig = this.initialSwiperConfig;
|
||||
}
|
||||
}
|
||||
|
||||
get isMobile(): boolean {
|
||||
return this.breakpoint.width <= this.breakpoints.sm;
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue