working with templates, the rules

[iwuser]

Is there a list of what type of HTML tags can be used with all the different types of IW controls? I.e.: what goes with what?

I'm trying to use a Bootstrap template with things like:

                      <div class="card">
                        <div class="card-body">
                          <div class="card-title d-flex align-items-start justify-content-between">
                            <div class="avatar flex-shrink-0">
                              <img
                                src="assets/img/user.png"
                                alt="Users"
                                class="rounded"
                              />
                            </div>
                            <div class="dropdown">
                              <button
                                class="btn p-0"
                                type="button"
                                id="cardOpt3"
                                data-bs-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false"
                              >
                                <i class="bx bx-dots-vertical-rounded"></i>
                              </button>
                              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt3">
                                <a class="dropdown-item" href="javascript:void(0);">List</a>
                                <a class="dropdown-item" href="javascript:void(0);">Manage</a>
                              </div>
                            </div>
                          </div>
                          <span class="fw-semibold d-block mb-1">Users:</span>
                          {%lblUserCount class="card-title mb-2"%}
                        </div>
                      </div>


I want the image to be static, as it is. But ideally clickable. Do I have to replace the entire IMG with an IW component? Or wrap it into an <A></A> (and then if I do, how do I link that to an IW button, for example)?

And with classes/styles in the HTML, how can I link a button (or anything) back to <A>? And then can I push styles/classes back to HTML controls (whether I do or do not map them to anything from code)? Like the "active" below, when the next item is clicked:

[...]
          <ul class="menu-inner py-1">
            <li class="menu-item active">
              <a href="index.html" class="menu-link">
                <i class="menu-icon tf-icons bx bx-home-circle"></i>
                <div data-i18n="Analytics">Dashboard</div>
              </a>
            </li>

            <li class="menu-item">
              <a href="javascript:void(0);" class="menu-link menu-toggle">
                <i class="menu-icon tf-icons bx bx-layout"></i>
                <div data-i18n="Layouts">Layouts</div>
              </a>
[...]


Or does the entire structure need to be replaced with a Tab control for this?

It really needs another Guide, it's a whole new field...

[iwuser]

There are TIWBS4NavBar* components, but no docs/demos for them. Anyone used those? Can/should they be used to replace the entire left-side menu panel in Admin templates? - the one I'm trying to use is Sneat.

[lfeliz]

This video , while about bootstratp, talks about using templates.
https://learndelphi.org/how-to-transform...bootstrap/#

Hope it helps.

[iwuser]

This video , while about bootstratp, talks about using templates.
https://learndelphi.org/how-to-transform...bootstrap/#

Hope it helps.

Thanks, saw that. It's unfortunate that this is pretty much everything that there is in terms documentation ;-(