36 lines
1.4 KiB
Plaintext
36 lines
1.4 KiB
Plaintext
<section class="section has-content-centered">
|
|
<ul class="steps is-centered has-content-centered is-medium">
|
|
<li class="steps-segment @VUtilities.IfTrueThen(PurchaseStep == PurchaseStep.ChoosingProducts, ActiveClass, InactiveClass)">
|
|
<span class="steps-marker is-primary">
|
|
<i class="fad fa-cart-plus"></i>
|
|
</span>
|
|
<div class="steps-content">
|
|
<p class="is-size-4">Choose drinks</p>
|
|
</div>
|
|
</li>
|
|
<li class="steps-segment @VUtilities.IfTrueThen(PurchaseStep == PurchaseStep.PaymentSetup, ActiveClass, InactiveClass)">
|
|
<span class="steps-marker @VUtilities.IfTrueThen(PurchaseStep is PurchaseStep.PaymentSetup or PurchaseStep.SuccessfulPurchase, PrimaryClass)">
|
|
<i class="fad fa-money-bill-wave"></i>
|
|
</span>
|
|
<div class="steps-content">
|
|
<p class="is-size-4">Payment</p>
|
|
</div>
|
|
</li>
|
|
<li class="steps-segment @VUtilities.IfTrueThen(PurchaseStep == PurchaseStep.SuccessfulPurchase, ActiveClass, InactiveClass)">
|
|
<span class="steps-marker @VUtilities.IfTrueThen(PurchaseStep == PurchaseStep.SuccessfulPurchase, PrimaryClass)">
|
|
<i class="fad fa-check-double"></i>
|
|
</span>
|
|
<div class="steps-content">
|
|
<p class="is-size-4">Done!</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
@code {
|
|
[Parameter] public PurchaseStep PurchaseStep { get; set; }
|
|
const string ActiveClass = "is-active has-gaps";
|
|
const string InactiveClass = "is-primary has-gaps";
|
|
const string PrimaryClass = "is-primary";
|
|
}
|