|
|
|
@ -1,374 +1,309 @@ |
|
|
|
<div class="container"> |
|
|
|
<div class="p-5 text-center"> |
|
|
|
<div class="d-inline-block bg-success text-white p-1 h5 rounded mb-4" role="alert"> |
|
|
|
<h5 class="m-1"> |
|
|
|
<i class="fas fa-rocket" aria-hidden="true"></i> Congratulations, |
|
|
|
<strong>MyProjectName</strong> is successfully running! |
|
|
|
</h5> |
|
|
|
</div> |
|
|
|
<h1>{{ '::Welcome' | abpLocalization }}</h1> |
|
|
|
<div class="row mb-3"> |
|
|
|
<div class="col-xl-6 col-12 d-flex"> |
|
|
|
<div class="card h-lg-100 w-100 overflow-hidden"> |
|
|
|
<div class="card-body"> |
|
|
|
<div class="starting-content"> |
|
|
|
@if(!hasLoggedIn){ |
|
|
|
<h3>Welcome</h3> |
|
|
|
<p class="lead text-muted mb-2"> |
|
|
|
{{ '::LongWelcomeMessage' | abpLocalization }} |
|
|
|
</p> |
|
|
|
<a (click)="login()" class="px-4 btn btn-primary mb-4" role="button" |
|
|
|
><i class="fa fa-sign-in"></i> {{ 'AbpAccount::Login' | abpLocalization }}</a |
|
|
|
> |
|
|
|
} |
|
|
|
|
|
|
|
<h3>Getting Started</h3> |
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
startingContentTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
description: |
|
|
|
'Learn how to create and run a new web application using the application startup template.', |
|
|
|
href: 'https://docs.abp.io/en/abp/latest/Getting-Started-Overall', |
|
|
|
label: 'Getting Started' |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
|
|
|
|
<p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p> |
|
|
|
<h4>Web Application Development Tutorial</h4> |
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
startingContentTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
description: |
|
|
|
'Learn how to build an ABP based web application named Acme.BookStore.', |
|
|
|
href: 'https://docs.abp.io/en/abp/latest/Tutorials/Part-1?UI=NG&DB=EF', |
|
|
|
label: 'Explore Tutorial' |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
|
|
|
|
@if(!hasLoggedIn){ |
|
|
|
<a (click)="login()" class="px-4 btn btn-primary ms-1" role="button" |
|
|
|
><i class="fa fa-sign-in" aria-hidden="true"></i> |
|
|
|
{{ 'AbpAccount::Login' | abpLocalization }}</a |
|
|
|
> |
|
|
|
} |
|
|
|
</div> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-body"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-md-auto text-center"> |
|
|
|
<img |
|
|
|
src="https://abp.io/assets/png/mastering-abp-framework.webp" |
|
|
|
style="max-width: 400px" |
|
|
|
class="w-100 mb-5 my-md-3" |
|
|
|
/> |
|
|
|
<h4>Customize Lepton Theme</h4> |
|
|
|
<p class="text-muted mb-2">Learn how to customize LeptonX Theme as you wish.</p> |
|
|
|
<a |
|
|
|
href="https://docs.abp.io/en/abp/latest/UI/Angular/Theming" |
|
|
|
class="btn btn-primary soft mb-5 mb-xl-0" |
|
|
|
target="_blank" |
|
|
|
>Customize Lepton</a |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div class="col-md d-flex align-items-center"> |
|
|
|
<div class="pe-0 pe-md-4"> |
|
|
|
<small class="text-uppercase text-muted">THE OFFICIAL GUIDE</small> |
|
|
|
<h2 class="mb-4">Mastering ABP Framework</h2> |
|
|
|
<p class="mb-4"> |
|
|
|
|
|
|
|
<img class="card-bg-image" src="assets/images/getting-started/bg-01.png" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-xl-3 col-md-6 d-flex"> |
|
|
|
<div class="row"> |
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
visitLinkTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
label: 'Visit Support', |
|
|
|
description: |
|
|
|
'You can check for similar problems and solutions, or open a new topic to discuss your specific issue.', |
|
|
|
href: 'https://support.abp.io/QA/Questions', |
|
|
|
card: 'card overflow-hidden', |
|
|
|
imgClass: '', |
|
|
|
imgSrc: 'assets/images/getting-started/img-support.png', |
|
|
|
logo: 'abp-support abp-logo mb-2' |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
visitLinkTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
label: 'Visit Blog', |
|
|
|
description: |
|
|
|
'You can find content on .NET development, cross-platform, ASP.NET application templates, ABP-related news, and more.', |
|
|
|
href: 'https://blog.abp.io/abp', |
|
|
|
card: 'card h-md-100 overflow-hidden', |
|
|
|
imgClass: 'margin-bottom: -24px', |
|
|
|
imgSrc: 'assets/images/getting-started/img-blog.png', |
|
|
|
logo: 'abp-blog abp-logo mb-2' |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-xl-3 col-md-6 d-flex"> |
|
|
|
<div class="card h-100 overflow-hidden"> |
|
|
|
<div class="card-body"> |
|
|
|
<div class="abp-community abp-logo mb-2"></div> |
|
|
|
<p class="lead text-muted"> |
|
|
|
A unique community platform for |
|
|
|
<span class="fw-bold">ABP Lovers!</span> |
|
|
|
</p> |
|
|
|
<p class="text-muted mb-2"> |
|
|
|
Explore all ABP users' experiences with the ABP Framework, discover articles and videos on |
|
|
|
how to use ABP, and join raffles for a chance to win surprise gifts! |
|
|
|
</p> |
|
|
|
<a class="btn btn-brand soft mb-3" href="https://community.abp.io/" target="_blank" |
|
|
|
>Join ABP Community</a |
|
|
|
> |
|
|
|
</div> |
|
|
|
<img class="mt-3" src="assets/images/getting-started/img-community.png" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row"> |
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
tableTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
title: 'More from ABP.IO', |
|
|
|
items: [ |
|
|
|
{ |
|
|
|
iconType: 'icon', |
|
|
|
style: true, |
|
|
|
icon: 'bi bi-check fs-4', |
|
|
|
iconClass: 'rounded-circle me-2 flex-center bg-brand soft', |
|
|
|
title: 'Latest Release Logs', |
|
|
|
link: 'https://github.com/abpframework/abp/releases', |
|
|
|
}, |
|
|
|
{ |
|
|
|
iconType: 'icon', |
|
|
|
style: true, |
|
|
|
icon: 'bi bi-check fs-4', |
|
|
|
iconClass: 'rounded-circle me-2 flex-center bg-brand soft', |
|
|
|
title: 'Video Courses', |
|
|
|
link: 'https://abp.io/video-courses/essentials', |
|
|
|
}, |
|
|
|
{ |
|
|
|
iconType: 'icon', |
|
|
|
style: true, |
|
|
|
icon: 'bi bi-check fs-4', |
|
|
|
iconClass: 'rounded-circle me-2 flex-center bg-brand soft', |
|
|
|
title: 'Samples', |
|
|
|
link: 'https://docs.abp.io/en/abp/latest/Samples/Index', |
|
|
|
}, |
|
|
|
{ |
|
|
|
iconType: 'icon', |
|
|
|
style: true, |
|
|
|
icon: 'bi bi-check fs-4', |
|
|
|
iconClass: 'rounded-circle me-2 flex-center bg-brand soft', |
|
|
|
title: 'Books', |
|
|
|
link: 'https://abp.io/books', |
|
|
|
}, |
|
|
|
{ |
|
|
|
iconType: 'icon', |
|
|
|
style: true, |
|
|
|
icon: 'bi bi-check fs-4', |
|
|
|
iconClass: 'rounded-circle me-2 flex-center bg-brand soft', |
|
|
|
title: 'FAQ', |
|
|
|
link: 'https://commercial.abp.io/faq', |
|
|
|
}, |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
<div class="col-xl-6 col-lg-8 d-flex"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-body d-flex"> |
|
|
|
<div class="row align-items-center"> |
|
|
|
<div class="col-md-8"> |
|
|
|
<p class="text-muted mb-0">THE OFFICIAL GUIDE</p> |
|
|
|
<h3>Mastering ABP Framework</h3> |
|
|
|
<p class="text-muted"> |
|
|
|
Written by the creator of the ABP Framework, this book will help you gain a complete |
|
|
|
understanding of the framework and modern web application development techniques. |
|
|
|
</p> |
|
|
|
<div class="mb-4"> |
|
|
|
<div class="d-md-flex mb-2 mb-md-0"> |
|
|
|
<a |
|
|
|
href="https://www.amazon.com/gp/product/B097Z2DM8Q/ref=dbs_a_def_rwt_hsch_vapi_tkin_p1_i0" |
|
|
|
class="btn btn-success mb-1" |
|
|
|
href="https://www.amazon.com/gp/product/B097Z2DM8Q" |
|
|
|
target="_blank" |
|
|
|
class="btn btn-primary soft me-md-2 mb-2 mb-md-0" |
|
|
|
> |
|
|
|
Buy on Amazon US |
|
|
|
</a> |
|
|
|
|
|
|
|
<a |
|
|
|
href="https://www.packtpub.com/product/mastering-abp-framework/9781801079242" |
|
|
|
class="btn btn-primary mb-1" |
|
|
|
target="_blank" |
|
|
|
class="btn btn-primary soft mb-2 mb-md-0" |
|
|
|
> |
|
|
|
Buy on PACKT |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<img src="assets/images/getting-started/book.png" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="my-3 text-center"> |
|
|
|
<h3>Let's improve your application!</h3> |
|
|
|
<p>Here are some links to help you get started:</p> |
|
|
|
</div> |
|
|
|
<div class="card mt-4 mb-5"> |
|
|
|
<div class="card-body"> |
|
|
|
<div class="row text-center justify-content-md-center"> |
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
starterLinkTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
title: 'Learn the ABP Framework', |
|
|
|
description: |
|
|
|
'Explore the compherensive documentation to learn how to build a modern web application.', |
|
|
|
links: [ |
|
|
|
{ |
|
|
|
href: 'https://docs.abp.io/en/abp/latest?ref=tmpl', |
|
|
|
label: 'See Documents' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
|
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
starterLinkTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
title: 'Samples', |
|
|
|
description: 'See the example projects built with the ABP Framework.', |
|
|
|
links: [ |
|
|
|
{ |
|
|
|
href: 'https://docs.abp.io/en/abp/latest/Samples/Index?ref=tmpl', |
|
|
|
label: 'All samples' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
tableTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
title: 'Follow us on Social Media', |
|
|
|
items: [ |
|
|
|
{ |
|
|
|
title: 'X.com', |
|
|
|
icon: 'logo-x me-2', |
|
|
|
link: 'https://twitter.com/abpframework' |
|
|
|
}, |
|
|
|
{ |
|
|
|
iconType: 'image', |
|
|
|
icon: 'assets/images/getting-started/discord.svg', |
|
|
|
title: 'Discord', |
|
|
|
link: 'https://community.abp.io/discord' |
|
|
|
}, |
|
|
|
{ |
|
|
|
iconType: 'image', |
|
|
|
icon: 'assets/images/getting-started/stack-overflow.svg', |
|
|
|
title: 'Stack Overflow', |
|
|
|
link: 'https://stackoverflow.com/questions/tagged/abp' |
|
|
|
}, |
|
|
|
{ |
|
|
|
iconType: 'image', |
|
|
|
icon: 'assets/images/getting-started/youtube.svg', |
|
|
|
title: 'YouTube', |
|
|
|
link: 'https://www.youtube.com/@Volosoft' |
|
|
|
}, |
|
|
|
{ |
|
|
|
iconType: 'image', |
|
|
|
icon: 'assets/images/getting-started/instagram.svg', |
|
|
|
title: 'Instagram', |
|
|
|
link: 'https://www.instagram.com/abpframework/' |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
|
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
starterLinkTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
title: 'ABP Community', |
|
|
|
description: 'Get involved with a vibrant community and become a contributor.', |
|
|
|
links: [ |
|
|
|
{ |
|
|
|
href: 'https://community.abp.io/', |
|
|
|
label: 'Community' |
|
|
|
}, |
|
|
|
{ |
|
|
|
href: 'https://docs.abp.io/en/abp/latest/Contribution/Index?ref=tmpl', |
|
|
|
label: 'Contribute' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
</div> |
|
|
|
<div class="row text-center mt-lg-3 justify-content-md-center"> |
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
starterLinkTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
title: 'ABP Blog', |
|
|
|
description: 'Take a look at our recently published articles.', |
|
|
|
links: [ |
|
|
|
{ |
|
|
|
href: 'https://blog.abp.io/abp?ref=tmpl', |
|
|
|
label: 'See Blog' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
|
|
|
|
<ng-template #githubButtonsTemplate> |
|
|
|
<p class="mb-1"> |
|
|
|
<iframe |
|
|
|
scrolling="no" |
|
|
|
src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp&title=&aria-label=Star%20tabalinas%2Fjsgrid%20on%20GitHub&data-icon=octicon-star&data-text=Star&data-size=large&data-show-count=true" |
|
|
|
style=" |
|
|
|
width: 122px; |
|
|
|
height: 28px; |
|
|
|
border: none; |
|
|
|
display: inline-block; |
|
|
|
margin-right: 4px; |
|
|
|
" |
|
|
|
></iframe> |
|
|
|
<iframe |
|
|
|
scrolling="no" |
|
|
|
src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp%2Fissues&title=&aria-label=Issue%20tabalinas%2Fjsgrid%20on%20GitHub&data-icon=octicon-issue-opened&data-text=Issue&data-size=large" |
|
|
|
style=" |
|
|
|
width: 72px; |
|
|
|
height: 28px; |
|
|
|
border: none; |
|
|
|
display: inline-block; |
|
|
|
margin-right: 4px; |
|
|
|
" |
|
|
|
></iframe> |
|
|
|
|
|
|
|
<iframe |
|
|
|
scrolling="no" |
|
|
|
src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp%2Ffork&title=&aria-label=Fork%20tabalinas%2Fjsgrid%20on%20GitHub&data-icon=octicon-repo-forked&data-text=Fork&data-size=large&" |
|
|
|
style="width: 72px; height: 28px; border: none; display: inline-block" |
|
|
|
></iframe> |
|
|
|
</p> |
|
|
|
</ng-template> |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
</div> |
|
|
|
|
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
starterLinkTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
title: 'Github', |
|
|
|
description: |
|
|
|
'Do you love the ABP Framework? Please <strong>give a star</strong> to support it!', |
|
|
|
links: [ |
|
|
|
{ |
|
|
|
href: 'https://github.com/abpframework/abp/issues/new?template=feature.md', |
|
|
|
label: 'Request a feature' |
|
|
|
} |
|
|
|
], |
|
|
|
customTemplate: githubButtonsTemplate |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
<ng-template #startingContentTemplate let-context> |
|
|
|
<p class="lead text-muted mb-2" [innerHTML]="context.description"></p> |
|
|
|
<a [href]="context.href" class="btn btn-brand mb-4" target="_blank">{{ context.label }}</a> |
|
|
|
</ng-template> |
|
|
|
|
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
starterLinkTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
title: 'Stackoverflow', |
|
|
|
description: 'See answers to previously asked questions or ask a new one.', |
|
|
|
links: [ |
|
|
|
{ |
|
|
|
href: 'https://stackoverflow.com/questions/tagged/abp', |
|
|
|
label: 'Questions' |
|
|
|
}, |
|
|
|
{ |
|
|
|
href: 'https://stackoverflow.com/questions/ask', |
|
|
|
label: 'Ask a Question' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
<ng-template #visitLinkTemplate let-context> |
|
|
|
<div class="col-12 d-flex"> |
|
|
|
<div [class]="context.card"> |
|
|
|
<div class="card-body pb-0"> |
|
|
|
<div [class]="context.logo"></div> |
|
|
|
<p class="text-muted mb-2" [innerHTML]="context.description"></p> |
|
|
|
<a [href]="context.href" class="btn btn-brand soft" target="_blank">{{ context.label }}</a> |
|
|
|
<img [class]="context.imgClass" [src]="context.imgSrc" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</ng-template> |
|
|
|
|
|
|
|
<div class="mt-5 my-3 text-center"> |
|
|
|
<h3>Meet the ABP Commercial</h3> |
|
|
|
<p>A Complete Web Application Platform Built on the ABP Framework</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card mt-4 mb-5"> |
|
|
|
<div class="card-body"> |
|
|
|
<p class="px-lg-5 mx-lg-5 py-3 text-center"> |
|
|
|
<a href="https://commercial.abp.io/" target="_blank">ABP Commercial</a> is a platform based |
|
|
|
on the open source ABP framework. It provides pre-built application modules, rapid |
|
|
|
application development tooling, professional UI themes, premium support and more. |
|
|
|
</p> |
|
|
|
|
|
|
|
<div class="row text-center justify-content-md-center"> |
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
featuresTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
title: 'Startup Templates', |
|
|
|
href: 'https://commercial.abp.io/startup-templates?ref=tmpl' |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
|
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
featuresTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
title: 'Application Modules', |
|
|
|
href: 'https://commercial.abp.io/modules?ref=tmpl' |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
|
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
featuresTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
title: 'Developer<br />Tools', |
|
|
|
href: 'https://commercial.abp.io/tools?ref=tmpl' |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
|
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
featuresTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
title: 'UI<br />Themes', |
|
|
|
href: 'https://commercial.abp.io/themes?ref=tmpl' |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
|
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
featuresTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
title: 'Premium Support', |
|
|
|
href: 'https://support.abp.io/QA/Questions?ref=tmpl' |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
|
|
|
|
<ng-container |
|
|
|
*ngTemplateOutlet=" |
|
|
|
featuresTemplate; |
|
|
|
context: { |
|
|
|
$implicit: { |
|
|
|
title: 'Additional Services', |
|
|
|
href: 'https://commercial.abp.io/additional-services?ref=tmpl' |
|
|
|
<ng-template #tableTemplate let-context> |
|
|
|
<div class="col-xl-3 col-lg-4"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-header"> |
|
|
|
<div class="card-title text-body">{{ context.title }}</div> |
|
|
|
</div> |
|
|
|
<div class="card-body pt-0"> |
|
|
|
<div class="table-responsive"> |
|
|
|
<table class="table mb-0"> |
|
|
|
<tbody> |
|
|
|
@for(item of context.items; track $index; let last = $last){ |
|
|
|
<tr> |
|
|
|
<td class="ps-0 d-flex" [class.border-bottom-0]="last"> |
|
|
|
@if(item.icon){ |
|
|
|
<div |
|
|
|
[ngClass]="item.iconClass" |
|
|
|
[style]="item.style ? 'width: 20px; height: 20px' : ''" |
|
|
|
> |
|
|
|
@if(item.iconType === 'image'){ |
|
|
|
<img [src]="item.icon" class="me-2" /> |
|
|
|
}@else if(item.iconType === 'icon'){ |
|
|
|
<i [class]="item.icon"></i> |
|
|
|
}@else{ |
|
|
|
<div [class]="item.icon"></div> |
|
|
|
} |
|
|
|
</div> |
|
|
|
} |
|
|
|
<div>{{ item.title }}</div> |
|
|
|
</td> |
|
|
|
<td class="text-end pe-0 opacity-25" [class.border-bottom-0]="last"> |
|
|
|
<a [href]="item.link" target="_blank"> |
|
|
|
<i class="bi bi-box-arrow-up-right text-dark"></i> |
|
|
|
</a> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
></ng-container> |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="mb-5 text-center"> |
|
|
|
<p class="align-middle"> |
|
|
|
<a href="https://twitter.com/abpframework" target="_blank" class="mx-2" |
|
|
|
><i class="fa fa-twitter" aria-hidden="true"></i |
|
|
|
><span class="text-secondary"> Abp Framework</span></a |
|
|
|
> |
|
|
|
<a href="https://twitter.com/abpcommercial" target="_blank" class="mx-2" |
|
|
|
><i class="fa fa-twitter" aria-hidden="true"></i |
|
|
|
><span class="text-secondary"> Abp Commercial</span></a |
|
|
|
> |
|
|
|
<a href="https://github.com/abpframework/abp" target="_blank" class="mx-2" |
|
|
|
><i class="fa fa-github" aria-hidden="true"></i |
|
|
|
><span class="text-secondary"> abpframework</span></a |
|
|
|
> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<ng-template #starterLinkTemplate let-context> |
|
|
|
<div class="col-lg-4 border-start"> |
|
|
|
<div class="p-4"> |
|
|
|
<h5 class="mb-3"> |
|
|
|
<i class="fas fa-cubes text-secondary d-block my-3 fa-2x" aria-hidden="true"></i> |
|
|
|
{{ context.title }} |
|
|
|
</h5> |
|
|
|
<p [innerHTML]="context.description"></p> |
|
|
|
@if (context.customTemplate) { |
|
|
|
<ng-container [ngTemplateOutlet]="context.customTemplate"></ng-container> |
|
|
|
} @for (link of context.links; track $index) { |
|
|
|
<a [href]="link.href" target="_blank" class="btn btn-link px-1" |
|
|
|
>{{ link.label }} <i class="fas fa-chevron-right" aria-hidden="true"></i |
|
|
|
></a> |
|
|
|
} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</ng-template> |
|
|
|
|
|
|
|
<ng-template #featuresTemplate let-context> |
|
|
|
<div class="col-lg-2 border-start"> |
|
|
|
<div class="p-3"> |
|
|
|
<h6> |
|
|
|
<i class="fas fa-plus d-block mb-3 fa- 2x text-secondary" aria-hidden="true"></i> |
|
|
|
<span [innerHTML]="context.title"></span> |
|
|
|
<a [href]="context.href" target="_blank" class="d-block mt-2 btn btn-sm btn-link" |
|
|
|
>Details <i class="fas fa-chevron-right" aria-hidden="true"></i |
|
|
|
></a> |
|
|
|
</h6> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</ng-template> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.col-lg-2.border-start:nth-of-type(6n + 1) { |
|
|
|
border-left: 0 !important; |
|
|
|
} |
|
|
|
|
|
|
|
.col-lg-4.border-start:nth-of-type(3n + 1) { |
|
|
|
border-left: 0 !important; |
|
|
|
} |
|
|
|
|
|
|
|
@media (max-width: 991px) { |
|
|
|
.border-start { |
|
|
|
border-left: 0 !important; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
sumeyyeKurtulus
2 years ago
