10-29-2024, 09:37 AM
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...
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...