How to go further after the Getting Started documentation

Hi,

I followed the getting started documentation to create the starterkit working. I now have a dashboard that I can use. But were are the components? How can I create a page following the theme? Were are the buttons, texboxes, grids etc?
I only see empty pages in the template... Why are they empty?

I think I miss documentation on how to go further after creating the starter project.

Also. I found some small bugs in the documentation:
1. @layout Layout._Blank; doesn't exist on the "Pages" section of this page:
https://preview.keenthemes.com/blazor/metronic/docs/views
2. I get a 404 when navigating to this page:
https://preview.keenthemes.com/blazor/metronic/docs/templates
from the Overview page:
https://preview.keenthemes.com/blazor/metronic/docs/index

Hopefully you can push me in the right direction...

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (10)

Hi Ralph,

Thank you for your feedback.

I have to inform you that our Blazor version is a Starterkit, which contains a fully functional layout and a few pages for start (New Password, Reset Password, Sign In, Sign Up, Default Dashboard Page, 500 error page, and 404 error page).

We will be adding new pages in the next releases, we have plans for User Managment App, System Settings page, and Audit Log page implementation.

You can easily add any other pages by referring to our HTML version, all JS, and CSS code required for any page is already included in our Blazor Starterkit, all you need to do is just copy HTML markup and initialize JS file on your view (if it is required).

Let me know if you will need any further help on this.

We will fix those errors in the next Metronic update. Thank you again!

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Thank you for the reply.

But in example, how do I create the multi step signup?
https://preview.keenthemes.com/metronic8/demo1/authentication/extended/multi-steps-sign-up.html

I now copied everything inside (and end) in a new page but this won't work. I think the layout should be changed for this page? How can I recognize which page layout I should set?

Hi Ralph,

For multi-steps-sign-up page, you will need to add a file assets/js/custom/utilities/modals/create-account.js and initialize it using JS.InvokeVoidAsync("KTCreateApp.init");.

Also, for this page, you need to add a new page layout.

Then you can set it using @layout directive.

@layout Layout.YouSignUpLayout;

Regards,
Lauris Stepanovs,
Keenthemes Support Team

I think you mean KTCreateAccount in stead of KTCreateApp right?

I did exactly that.
Created a new layout page called AuthExtended.razor (copied from Auth.razor) and created a new page SignUpWizard.razor with `@layout Layout.AuthExtended`
added the js file and the `await JS.InvokeVoidAsync("KTCreateAccount.init");` line.
Everything is working fine except the styling (colors) of the left steps is wrong. Can you explain where that styling is coming from?

My layout page looks now like this:


@inherits LayoutComponentBase
@layout MasterInit
@using Layout._Helpers
@inject IJSRuntime JS


<div class="d-flex flex-column flex-root" >

@Body

</div>


@code {
private IKTThemeHelpers _helper;

protected override void OnAfterRender(bool firstRender)
{
_helper = new KTThemeHelpers(JS);

_helper.addBodyClass("app-blank");
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
await Task.Delay(300);
await JS.InvokeVoidAsync("document.body.removeAttribute", "data-kt-app-reset-transition");
await JS.InvokeVoidAsync("document.body.removeAttribute", "data-kt-app-page-loading");
}
}

Wizard page looks like this:

@using PanikButton.Web.Wizard.Shared.Partials.General;
@layout Layout.AuthExtended
@inject IJSRuntime JS
@page "/signup"

<script suppress-error="BL9992" src='@KTTheme.getAssetPath("js/custom/utilities/modals/create-account.js")'></script>

<!--begin::Authentication - Multi-steps-->
<div class="d-flex flex-column flex-lg-row flex-column-fluid stepper stepper-pills stepper-column stepper-multistep" >
<!--Removed content for clarity (copied from html)-->
</div>
<!--end::Authentication - Multi-steps-->

@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await Task.Delay(1000);
await JS.InvokeVoidAsync("KTCreateAccount.init");
}
}
}

Hi Ralph,

Sorry, yes I meant the KTCreateAccount component.

We are setting a background for the sidebar using inline CSS, you can fix sidebar image by using getAssetPath function.

style='background-image:url(@KTTheme.getAssetPath("/media/misc/auth-bg.png"))'

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi Lauris,

Thank you for the reply. I think I was not clear enough. It's not the background but CSS styling of the left menu is wrong. Eveything else looks fine.
The letters of for in example "Account Info or Account Type" are gray and not white.
I also miss the "active/current" styling. So the current step number background is not green but blue.

I think this is a bug in version 8.1.6 because when I inspect in example the background color of the selected step on page:
https://preview.keenthemes.com/metronic8/demo1/authentication/extended/multi-steps-sign-up.html
I see that ".stepper.stepper-pills .stepper-item.current .stepper-icon" has "background-color: var(--kt-stepper-icon-bg-color-current);"
This comes from: style-bundle.css


In my Blazor project (haven't changed anything. only followed getting started) it also comes from style-bundle.css and the value is also "background-color: var(--kt-stepper-icon-bg-color-current);" (but is is blue).
var(--kt-stepper-icon-bg-color-current) references to var(--kt-primary); with as value "--kt-primary: #009ef7;"


In the online page it references to: var(--kt-success);

So not primary.

Hi Ralph,

Thank you for your feedback.

Yes, it seems like some of the styles used in our Blazor version are outdated, to fix this you can bundle Metronic styles using gulp script in our HTML version and then manually copy dist/assets folder and paste it to wwwroot in your Blazor application. We will review this issue and will include a fix in next releases.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

I will check if you solution works.
Any idea when a new update for Blazor comes out?

Hi Ralph,

The issue is related to missing scss file imports in a file Starterkit/_keenthemes/src/sass/components/components.scss.

To fix this you can just add imports below to Starterkit/_keenthemes/src/sass/components/components.scss.

@import "stepper/multistep";
@import "landing";

We will include a fix for this issue in the next Metornic release.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(