I have a button like this
<v-btn
class="overline text-capitalize"
color="grey darken-4"
plain
>
<router-link
style="text-decoration: none; color: inherit;"
:to="{ name: 'default', params: { locale: $route.params.locale }}">About</router-link>
</v-btn>
My question is, The link works only when clicked exactly on the text 'About' but not working when clicked on the area around the text . I want to be able to switch to a different page when clicked on the button area for a better UX. How should I edit the code? Thanks.
I had the same problem.
After some searching I found out that v-btn has its own router-link wrapped in it. Use the to-directive of the v-btn to link.
Try :
<v-btn
class="overline text-capitalize text-decoration-none"
color="grey darken-4"
plain
:to="{ name: 'default', params:{ locale: $route.params.locale }}"
>
About
</v-btn>
This worked for me.
Related
I have a laravel component for a submit button in Tailwind.
The button code is:
<div class="{{ $position }} mt-4">
<button type="submit"
class="inline-flex items-center h-10 px-5 text-indigo-100 bg-indigo-600 rounded-lg focus:shadow-outline hover:bg-indigo-800" style="{{ addShadow() }}"
#if (!empty($onClick))
onclick="{{ $onClick }}"
#endif
>
#fas('{{ $icon }}')
<span class="ml-2">{{ $label }}</span>
</button>
The things like position, icon, label, onclick are passed in OK.
My problem is that unless the mouse is over the button it deos not really appear as can be seen from the image attach. The first shows as the page opens and the second is as the mouse is over.
I simply cannot get this to work!
I normally actually upload and test in an online area, but with the new Laravel Vite changes are not made. If this is done in localhost and then uploaded the app.css etc it works.
How can I create a blank icon to use as a spacing placeholder?
For example, I want to align the languages in this menu:
<v-list>
<v-list-item v-for="(item) in languages" :key="item.id" #click="() => { currentLanguage = item.id }">
<v-list-item-title>
<v-icon v-if="item.id === currentLanguage">mdi-check</v-icon>
{{ item.name }}
</v-list-item-title>
</v-list-item>
</v-list>
In the example, I want all the languages are that not the current language to be indented by exactly the width of the check icon, in effect I want a blank icon to push the text across by the correct amount.
You could leave the icon here and toggle a CSS property: visibility: none.
Otherwise, apply an exact margin left to your text.
<button disabled={!session}
className={`button mt-2 ${!session && "from-gray-300 to-gray-500 border-gray-200 text-gray-300 cursor-not-allowed"}`}>
{!session ? 'Sign In to checkout' : 'Proceed to checkout'}
</button>
This is the code for it
Expected a gray background with a disabled button but got the following output -
This is the picture
Suppose I have a Material-UI FAB that's code looks like this:
<Fab size="medium" color="primary" aria-label="add">
<AddIcon />
</Fab>
I have a controlled way to toggle between this other state:
<Fab
variant="extended"
size="medium"
color="primary"
aria-label="add"
>
<NavigationIcon/>
Extended
</Fab>
My question is how do I achieve some kind of animation between these two states? I'm thinking of a way when the FAB expands, instead of suddenly displaying the text. I can't figure it out, any help is appreciated.
You could use MUI Transitions for example a Zoom animation. So your code becomes:
<Zoom
in={checked} //<-- checked is a bool that you should set to true when this Fab is active
>
<Fab size="medium" color="primary" aria-label="add">
<AddIcon />
</Fab>
</Zoom>
And the same thing for the other Fab.
I am currently trying to align a Icon and a text in a Menu.Item with Semantic UI React V.0.68.2.
Currently my HTML output looks like this:
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
Dashboard
</a>
And my JSX like this:
<Menu vertical className="some classes" icon=''>
<Menu.Item
active={active}
onClick={onClick}
className="some class"
>
<Icon name="home" large /> Dashboard
</Menu.Item>
</Menu>
I wrote a new Icon component to use my own Icon Font which looks like this. I tried to stay as close to the original Icon class from the React Implementation of Semantic UI.
import React, { Component } from "react";
import classnames from "classnames";
/**
* #class Icon
* #extends {Component}
* #description Icon class for themify icons. Replacement for semantic ui Icon class
*/
class Icon extends Component {
render() {
var iconClass = classnames("icon ti-icon ti-" + this.props.name, {
big: this.props.big,
large: this.props.large,
close: this.props.close
});
return (
<i
aria-hidden={true}
className={this.props.close ? iconClass.replace("icon", "") : iconClass}
onClick={this.props.onClick}
/>
);
}
}
export default Icon;
Now I want the Text and the Icon to be vertically centered but I can't get it to work, they text always seems to be at the top of its parent node. But actually I want it to appear vertically centered in the Menu.Item. with any size of the Icon. So when I change the size of the Icon to large the text should always be centered vertically. The size classes are the same as in Semantic UI.
Does anyone have an idea how to achieve this ? Thanks in advance :)
Hi you are facing a very common problem, possible solutions are depicted in the following codepen
https://codepen.io/anon/pen/XEKZwq
What I suggest you do is to wrap the text in a span so instead of:
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
Dashboard
</a>
you do the following
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
<span>Dashboard</span>
</a>
Once you've done this you can easily use the solution in the codepen above.