I want to trigger a dropdown menu via hover so use #mouseover. But when the cursor places between text and chevron, dropdown becomes hide. I use mouseover with a tag so it should contain text and chevron, shouldn't it?
here's my code
<header class="relative z-50" x-data="{ dropdown: '' }">
<nav class="overflow-hidden z-50">
<div class="container space-x-14 py-7 desktop:justify-start flex items-center z-50">
<nav class="space-x-14">
<a #mouseover="dropdown = dropdown === 'open' ? '' : 'open'" class="cursor-pointer font-semibold">
<span class="border-b-2 pb-2 transition duration-300" :class="dropdown === 'open' ? 'border-seaweed' : 'border-transparent'">{{ __('test1') }}</span> <span class="inline-block bg-caret-down bg-center bg-no-repeat w-4 h-2"></span>
</a>
what is the prolem?
To fix this, we need to embed the two <span> elements into a <div> where we add the pointer-events-none class (assuming you are using TailwindCSS) to disable the pointer events of the child elements. Furthermore we also add the #mouseleave event to change the open state.
<a #mouseover="dropdown = 'open'"
#mouseleave="dropdown = ''"
class="cursor-pointer font-semibold">
<div class="pointer-events-none">
<span class="border-b-2 pb-2 transition duration-300" :class="dropdown === 'open' ? 'border-seaweed' : 'border-transparent'">{{ __('test1') }}</span>
<span class="inline-block bg-caret-down bg-center bg-no-repeat w-4 h-2"></span>
<div>
</a>
Related
I made this style for side bar navigation
I made a box and used transform to hide it on the left side, to get the curved border effect.
On hover, active ect
Border button -> bg-green-300
text-green-300 for icon and text
font-semibold for text only
<a href="/dashboard">
<div class="flex flex-row space-x-8 w-72 text-lg pb-3 text-gray-200">
<div class="h-8 w-8 rounded transform -translate-x-7 hover:bg-green-300"></div>
<div class="flex flex-row items-center space-x-8 transform -translate-x-10 -translate-y-1">
<i class="bi bi-columns-gap hover:text-green-300 transform translate-x-1"></i>
<h2 class="hover:font-semibold hover:text-green-300 transform translate-y-1 text-base">Dashboard</h2>
</div>
</div>
</a>
Is there something I can add to the main div to activate the hover effect in each child element at same time?
Right now it works only when I hover over each individual element.
Any help is much appreciated :)
Use group-hover state
Add group class to your parent element (anchor-tag in your case)
Replace hover: with group-hover:
Worth to mention not every property supports group-hover, so there can be situation, where you may need to extend core plugins. More info about group-hover here
DEMO https://play.tailwindcss.com/dzacJTR76X
Use group in parent and group:hover in child
Code Structure:
<div class="group">
<div class="group-hover:... "/>
<div class="group-hover:... "/>
</div>
Example:
<div class="group flex ">
<div class="rounded-full bg-black w-10 h-10 group-hover:bg-cyan-400 "></div>
<i class="text-4xl ml-4 group-hover:bg-cyan-400 cursor-pointer ">Brighten me</i>
</div>
Output:
OnHover:
I'm working on a carousel webpart with a text/xml transformation.
Simply trying to create a unique ID for each instance on the page.
Next I'd like to have the first item set to active with a CSS class.
For the section Webpart container:
{% uniqueId = string.FormatString("carousel-{0}", InstanceGuid.Substring(0,5)); #%}
<div id="{%uniqueId%}" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
□
</div>
<a class="carousel-control-prev" href="#{%uniqueId%}" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#{%uniqueId%}" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
This seems to work at first but for some reason it generates a text-node in HTML.
How can we do this without generating the variable output?
For a single carousel item in the Transformations section:
{% CssActive = IsFirst() ? "active" : string.Empty %}
<div class="carousel-item {%CssActive%}">
<img src="{%Image%}" alt="" class="w-100 d-block" />
<div class="carousel-caption d-none d-md-block">
<h3>{%Title%}</h3>
<div>{%Body%}</div>
</div>
</div>
This doesn't output anything? Is this even possible to use IsFirst() in a repeater?
Any help is much appreciated!
For the transformation you can use the following code:
<div class="carousel-item{% if (DataItemIndex == 0) { " active" } #%}">
<div class="card">
<img src="{%Image%}" alt="" class="card-img-top" />
<div class="card-body">
<h3 class="card-title">{%Title%}</h3>
<div class="card-text">{%Body%}</div>
</div>
</div>
</div>
Doc
For the Webpart container I can do a workaround with HTML/CSS:
<div class="d-none">
{% uniqueId = string.FormatString("carousel-{0}", InstanceGuid.Substring(0,5)); #%}
</div>
Far from ideal so if anybody else has a better idea ...?
I have two anchor tags whose #click directives? update my select options. I would like when the options are changes to update the value of activeTab to be either 0 or 1. I've been trying #change but no joy. Thanks in advance
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"></script>
<div x-data="{activeTab : window.location.hash ? window.location.hash.substring(1) : 0, lessons:[{id:0,room:'online',description:'Online description'},{id:1,room:'in class',description:'in class description'}]}" x-init="select = lessons[0].room" class="w-full">
<nav class="w-full flex flex-no-wrap justify-between mb-8">
<template x-for="lesson in lessons">
<a href="#" #click.prevent="activeTab = lesson.id; window.location.hash = 0; select = lesson.room" class="focus:outline-none focus:text-teal-800 hover:text-teal-800 meta bold py-1 uppercase mr-1 flex items-center justify-between text-lg w-1/2 border-b-4 focus:border-teal-800 hover:border-teal-800 border-teal-600 tracking-widest text-teal-600"><span x-text="lesson.room"></span><svg class="w-6 h-6" width="6" height="6" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
<path d="m8.5.5-4 4-4-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(6 8)" /></svg></a>
</template>
</nav>
<template x-for="lesson in lessons" :key="lesson.id">
<div x-show="activeTab === lesson.id">
<p x-text="lesson.description" class="text-gray-800 mb-6">Online classes are streaemed to your device. You can atned a yoga class wherever there is a why-fi</p>
</div>
</template>
<form action="">
<fieldset class="border p-4">
<legend class="text-center text-xs uppercase tracking-widest text-orange-800 px-2">choose a classroom</legend>
<select class="relative uppercase text-lg tracking-widest text-teal-800 w-full border border-teal-800 px-5 py-4 focus:outline-none focus:border-shadow rounded" name="" id="" x-model="select">
<template x-for="lesson in lessons" :key="lesson.id">
<option :id="lesson.id"><span x-text="lesson.room"></span></option>
</template>
</select>
</fieldset>
</form>
</div>
Here is a simplified version of your code that works. I didn't really want to change your code, but I had to simplify it a bit to comprehend it. For example, activeTab and select seemed redundant, and I didn't understand the part about window.location.hash.
<script defer src="https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js"></script>
<div
x-data="{
activeTab: 0,
lessons: [
{ id: 0, room: 'online', description: 'Online description' },
{ id: 1, room: 'in class', description: 'In class description' }
],
}"
>
<nav>
<template x-for="lesson in lessons">
<a
href="#"
#click.prevent="window.location.hash = activeTab = lesson.id"
:style="activeTab === lesson.id ? 'font-weight:bold' : 'text-decoration:none'"
>
<span x-text="lesson.room"></span></a>
</template>
</nav>
<template x-for="lesson in lessons">
<div x-show="activeTab === lesson.id">
<p x-text="lesson.description"></p>
</div>
</template>
<form>
<fieldset>
<legend>choose a classroom</legend>
<select x-model.number="activeTab">
<template x-for="lesson in lessons">
<option :value="lesson.id" x-text="lesson.room"></option>
</template>
</select>
</fieldset>
</form>
</div>
JSFiddle
I believe the problem was a strict equality comparison (===) between values which were sometimes strings and sometimes integers. For example, "1" === 1 is never true.
I think there were two problems with your original code:
select wasn't declared part of x-data, thus it wasn't christened a "reactive" property, thus changing the value of the <select> had no actual effect
fix this by adding something like select: null to your x-data
that aside, there was still nothing to trigger the update of activeTab when the <select> was changed
binding lesson.id to the <option> values and the <select>'s value to activeTab with x-model.number (forgoing the select variable entirely) is how I chose to address this problem
this way the x-shows for the active tab trigger directly from a change to the <select>'s value
This didn't apply in your code as originally written, but keep in mind that an x-model on a <select> will always return strings, unless you use x-model.number to coerce to integer.
I'm using x-data to dynamically build my HTML. I have two anchor tags which act as tab buttons to'x-show' a paragraph depending on which link is clicked. I also would like that anchor tag to select an option on the form's select element. It kind of works when you starts clicking on the buttons but initially the select options are empty?
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"></script>
<div x-data="{activeTab : window.location.hash ? window.location.hash.substring(1) : 0, lessons:[{id:0,room:'online',description:'Online description'},{id:1,room:'in class',description:'in class description'}]}" class="w-full">
<nav class="w-full flex flex-no-wrap justify-between mb-8">
<template x-for="lesson in lessons">
<a href="#" #click.prevent="activeTab = lesson.id; window.location.hash = 0; select = lesson.room" class="focus:outline-none focus:text-teal-800 hover:text-teal-800 meta bold py-1 uppercase mr-1 flex items-center justify-between text-lg w-1/2 border-b-4 focus:border-teal-800 hover:border-teal-800 border-teal-600 tracking-widest text-teal-600"><span x-text="lesson.room"></span><svg class="w-6 h-6" width="6" height="6" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
<path d="m8.5.5-4 4-4-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(6 8)" /></svg></a>
</template>
</nav>
<template x-for="lesson in lessons">
<div x-show="activeTab === lesson.id">
<p x-text="lesson.description" class="text-gray-800 mb-6">Online classes are streaemed to your device. You can atned a yoga class wherever there is a why-fi</p>
</div>
</template>
<form action="">
<fieldset class="border p-4">
<legend class="text-center text-xs uppercase tracking-widest text-orange-800 px-2">choose a classroom</legend>
<select class="uppercase text-lg tracking-widest text-teal-800 w-full border border-teal-800 px-5 py-4 focus:outline-none focus:border-shadow rounded" name="" id="" x-model="select">
<template x-for="lesson in lessons">
<option x-text="lesson.room"></option>
</template>
</select>
</fieldset>
</form>
</div>
I added:
x-init="select = lessons[0].room"
to the parent of the component which set the select to the initial value
A better way would be to add this onto the select
<select x-model="foo" x-init="foo = $el.options[$el.selectedIndex || 0].value">
I'm trying to do a treeview in my component.html this is my code :
<div *ngFor="let item of menusList">
<div class="containerMenu">
<span [ngClass]="{collapseTitle:item.SubItems.length}">
<i [ngClass]="item.SubItems.length ? 'fa fa-angle-down' : ''"></i>
<span style="display:inline-block">
<span>{{item.Title.Traductions.French}}</span>
</span>
</span>
<div *ngIf="item.SubItems.length" ng-include="'menu'" class="collapsePanel"></div>
</div>
</div>
<!--Submenu Template + Récursive-->
<ng-template #menu>
<ul>
<li *ngFor="let item of item.SubItems">
<span ng-if="!item.Url" ng-class="{collapseTitle:item.SubItems.length}">
<i ng-class="item.SubItems.length ? 'fa fa-angle-down' : ''"></i>
<span ng-class="item.SubItems.length ? 'subItemsTitle' : ''">
<span style="display:inline-block">
<span>{{item.Title.Traductions.French}}</span>
</span>
</span>
</span>
<a target="_blank" href="{{item.Url}}" ng-if="item.Url">
<span ng-class="item.SubItems.length ? 'collapseTitle' : ''">
<i ng-class="item.SubItems.length ? 'fa fa-angle-down' : ''"></i>
<span ng-class="item.SubItems.length ? 'subItemsTitle' : ''">
<span style="display:inline-block">
<span>{{item.Title.Traductions.French}}</span>
</span>
</span>
</span>
</a>
<div *ngIf="item.SubItems.length" ng-include="'menu.html'" class="collapsePanel"></div>
</li>
</ul>
</ng-template>
So, my first div cross all my array(menusList) and if the current position have subitems, it should include the template#menu. This is working in AngularJS, but I want to do it in Angular2.
I have no error in my console, and I think my problem is the ng-include
Thanks for your help.
According to this comment in issue #2753, ng-include is not supported in Angular 2+.
You can, however, wrap your ng-template into another component, with SubItems as input. That way you can recursively call the same component, achieving the desired result.