Here is my alert code in Vuetify 3-
<v-alert type="warning" title="Title goes here">
<div class="d-flex align-center justify-end">
<v-btn variant="tonal">Custom action</v-btn>
</div>
</v-alert>
Above code produces the following result-
I want the custom button to be at the same height as the alert title as displayed in the image below-
I wasn't able to find an "append" slot or something similar to fix this issue.
Any help would be great.
Try this-
<v-alert type="warning">
<div class="d-flex align-center justify-space-between">
<div>Title Goes here</div>
<v-btn variant="tonal">Custom action</v-btn>
</div>
</v-alert>
EDIT--
If you want the icon at left also be aligned with the title then removing the default icon and setting it manually can also help.
<v-alert type="warning" :icon="false">
<div class="d-flex align-center justify-space-between">
<div>
<v-icon class="me-4">mdi-help-circle</v-icon>
Title Goes here
</div>
<v-btn variant="tonal">Custom action</v-btn>
</div>
</v-alert>
Related
I'm aware that I can add a blur placeholder or blur animation until the image has loaded, but I don't feel that's the way to go for a hero section, I would say that's pretty bad UX.
I'm already using the priority prop, which I thought would solve the issue I'm seeing.
Page is using getStaticProps and pictures are served via Cloudinary.
Video of behavior:
https://jumpshare.com/v/JPq1yXozMTKrQREl0s7U
Is there a way to tell Next.js to not serve the page until the hero image is loaded?
In this case, I rather have the user wait so that the page is served with the pictures directly.
Or do I need to switch completely to server-side rendering for the whole index page, or is there another way to go about it?
Hero section:
<div className="hidden sm:relative sm:z-0 sm:block sm:h-[calc(100vh-89px)] sm:overflow-hidden sm:border-b sm:border-black sm:bg-cover sm:bg-fixed sm:bg-center sm:bg-no-repeat">
<Image src={heroDesktopImage} objectFit="cover" alt={heroDesktopImageAlt} layout="fill" priority={true} />
<div className="mx-auto h-full max-w-screen-3xl ">
<div className="flex h-full w-full items-end justify-center">
<div className="relative bottom-[15%] text-center">
<h1 className="mb-8 text-4xl font-bold text-white">{lead.toLocaleUpperCase()}</h1>
<button className="border border-gray-900 bg-white text-sm text-gray-900 lg:hover:bg-black lg:hover:text-white ">
<Link href="/products" passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="block h-full w-full py-5 px-10">{buttonText.toLocaleUpperCase()}</a>
</Link>
</button>
</div>
</div>
</div>
</div>
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 have a v-list with text that is too long so I want to use v-tooltip so that when someone hovers on the text it shows the full string. Unfortunatly when I hover on one item it shows the tooltip for all items in the vlist.
<div class="productNameIncoming">
<v-list v-for="nameIncoming in productNameIncoming" :key="nameIncoming">
<v-tooltip v-model="show" right fixed>
<template v-slot:activator="{ on }">
<p v-on="on">{{ nameIncoming }}</p>
</template>
<span>{{ nameIncoming }}</span>
</v-tooltip>
</v-list>
</div>
Is this a limitation or am I doing it wrong?
Vuejs 2.6.11 and Vuetify 2.2.6
My problem was v-model="show". I removed it and it worked.
I'm developing an app with Angular and Semantic-UI.
I have a dropdown menu like the following: https://plnkr.co/edit/BTCxfk
<div class="ui right labeled top pointing floating icon button dropdown">
<i class="icon folder open"></i>
<span class="text">Menu</span>
<div class="menu">
<div class="item" (click)="onClickItem()" *ngFor="#m of menu">
<i class="icon sign in"></i>
{{m}}
</div>
</div>
</div>
I would like to have that users can click on a single item using tab and enter buttons.
As you can see they can only move towards menu items, but they can't trigger the click event.
Any idea?
I would give this item a tab-index of 0 since most elements like this aren't tabbable by default.
<div class="ui right labeled top pointing floating icon button dropdown">
<i class="icon folder open"></i>
<span class="text" tabindex="0" role="menu">Menu</span>
<div class="menu">
<div class="item" (click)="onClickItem()" *ngFor="#m of menu">
<i class="icon sign in"></i>
{{m}}
</div>
</div>
</div>
I added tab index of 0 and role of menu.
<ion-side-menu side="left">
<ion-content>
<div class="list card">
<a menu-close href="#/app/account" class="item item-avatar">
<img src="{{user.detail.avatarUrl}}" on-error-src="img/avatar.jpg">
<h2>{{user.detail.nickname}}</h2>
<p>{{user.attributes.username}}</p>
</a>
</div>
<ion-list>
<ion-item menu-close href="#/login">
登陆
</ion-item>
</ion-list>
<div class="card">
<div class="item item-image">
<img alt="个人信息" src="img/wudics.jpg">
</div>
<div class="item item-image">
<p>扫描二维码下载APP版</p>
</div>
</div>
</ion-content>
I have set the alt tag inside img tag, but this is not working. I want to implement that it can show a tip when my mouse hover on the image.
how to do that? please help.
From what I know alt tag was not intended to be used in this way being alternative text if the image can not be displayed or if read using text to speech software for blind people.
Try the title attribute for additional information about the image.
example title="your text"
Not sure why it's not displaying though.