0

How can I replicate the wizard modal menu? I like the style of the wizard modal but don't require the behaviour of a wizard ie. steps validation etc.

I'm currently using the clr-tree-node for my menu with the grid which gets me close to the wizard style but it would be great to match it exactly.

This is what I have at the moment:

<clr-modal [(clrModalOpen)]="display" [clrModalSize]="'lg'" [clrModalClosable]="true">
  <h3 class="modal-title">Preferences</h3>

  <div class="modal-body">
    <div class="row">
      <div class="col-md-4">
        <clr-tree-node *ngFor="let menuItem of menu" >
          <a class="clr-treenode-link" [class.active]="menuItem.id === activeMenuItem" (click)="toggleContent(menuItem)">{{menuItem.name}}</a>
          <ng-template [clrIfExpanded]="expandedCheck(menuItem.id)" *ngIf="menuItem | objectHas:'subMenu'">
            <clr-tree-node *ngFor="let subMenuItem of menuItem.subMenu">
              <a class="clr-treenode-link" [class.active]="subMenuItem.id === activeMenuItem" (click)="toggleContent(subMenuItem)">{{subMenuItem.name}}</a>
            </clr-tree-node>
          </ng-template>
        </clr-tree-node>
      </div>
      <div class="col-md-8">
        <form [formGroup]="form">
          <h4>General</h4>
Adam Spence
  • 3,040
  • 1
  • 21
  • 17
  • If you can shore what you have so far I can take a look and see if I have any advice. Here is a starter for the latest Clarity that you can fork and modify: https://stackblitz.com/edit/clarity-light-theme-at-11-1 – hippeelee Jan 18 '18 at 19:13
  • Its going to take quite a while to edit my code to provide an example. Is it possible to create a modal that looks like a wizard modal without heavily customising the styles? – Adam Spence Jan 19 '18 at 17:15
  • Sorry, I’m not sure what your trying to do. When you say you want ‘the wizard modal menu’ I’m not sure what you mean by that. Anything (code) you can provide that makes it clear what you want the modal to look like will help me understand. – hippeelee Jan 19 '18 at 18:26
  • I'd like a modal that looks the same as a wizard modal but has a tree menu on the left instead rather than the steps menu. I have it all working but I'm struggling with replicating the nice background which helps to separate the menu from the content in the wizard. I really appreciate your replies by the way – Adam Spence Jan 25 '18 at 10:20
  • @hippeelee I've added my example. Is my question clear now? – Adam Spence Feb 14 '18 at 11:48
  • Hi Adam, it would really help me understand the code if you could post a working example with the current approach. We have a starter https://stackblitz.com/edit/clarity-dark-theme-v11 that already has Clarity configured. If you that doesn't work for you please post the full html, css and ts so I can copy and paste it into a running app and see what you see. – hippeelee Feb 22 '18 at 16:36
  • You can copy n paste that! `menu` is a simple list of items with ids. I'm pretty sure theres no good solution to this problem anyway, thanks for nothing – Adam Spence Mar 06 '18 at 17:26
  • The html is missing a bunch of closing tags and there is no TypeScript for your component. I spent a few minutes trying to turn it into something functional but then had to turn my attention to other tasks. I'm sorry I wasn't able to help you. Best of luck. – hippeelee Mar 06 '18 at 17:30

0 Answers0