I am using code below to avoid " nested" JS error and keeping Link properties inside a react-bootstrap Dropdown.
<Dropdown.Item className="dropdown-item" as={Link} href={`/example`}>
Example
</Dropdown.Item>
Result is as follow on the DOM:
Example
Problem is: className="dropdown-item" has been ignored.
How could I get this result: Example while keeping the code "react-friendly"?
You can try to wrap it around.
<Link to={`/example`}><Dropdown.Item className="dropdown-item">
Example
</Dropdown.Item></Link>
you can use bsPrefix to override the bootstrap styling ...
Docs reference ...
A sample e.g. here in below link - see dropdown first item's bg color... Please fork it for reference
Related
Can't see a way in V6 to dynamically add an external link without the router prepending the site URL. Just need to do something like this:
<a href={dynamicStrValue} target='_blank' rel='noreferrer'>Link</a>
What about:
<Link to={{ pathname:`https://example.com/${dynamicStrValue}`}} target="_blank">My link</Link>
Referring to their docs
<Link to> with a .. behaves differently from a normal when
the current URL ends with /. ignores the trailing slash, and
removes one URL segment for each ... But an value handles ..
differently when the current URL ends with / vs when it does not.
Your link must include the protocol to avoid RR prepending the site url.
I was having the same problem as you, when executing an external component using a plain anchor tag it was redirecting to the router, instead of opening a blank page.
The solution to my problem was simply removing the key param in the anchor tag as follows
<a key={item.key} href='{item.url}' target='_blank'> {item.title} <a/>
to
<a href='{item.url}' target='_blank'> {item.title} <a/>
I'm using NextJs. I would like to create a link in my header section. This link should take the user to TestimonialsSection on the same page by scrolling.
<Link href={"#TestimonialsSection"}>
<a className={styles.Designation}>Mentor</a>
</Link>
This is the code I tried, but it didn't work. The URL changes though. Thanks in advance
In vanilla HTML you'd do something like this
My first section
My second section
<div id="first-section">SECTION 1</div>
<main id="second-section">SECTION 2</main>
In NextJS you'd so something similar. Instead of using the anchor tag for linking, you'd use the Link components.
<Link href="#first-section">My first section</Link>
<Link href="#second-section">My second section</Link>
<div id="first-section">SECTION 1</div>
<main id="second-section">SECTION 2</main>
This would work just fine.
However, if you want your starting URL to be www.my-site.com/#second-section, you would need to set the Link component's scroll prop to false.
Ex:
...
<Link href="#second-section" scroll={false}>My second section</Link>
...
Make sure your sections/divs ie the target elements have the ID attribute set to them properly without the # and the corresponding
anchor links have the # prefixed to ID name
Here's the official NextJS documentation https://nextjs.org/docs/api-reference/next/link
Hope this resolves your issue.
If it's just a static string you should remove the braces as ЖнецЪ says above.
If you're making a reusable component where you need to specify the ID from a parent, use a template string and keep the braces.
<Link href={`#${props.id}`}>
<a className={styles.Designation}>Mentor</a>
</Link>
Try to use Link tag and in URL add #some-link and then in Link tag href with href='#some-link'
www.google.com/#some-link
<Link href='#some-link'>
// code section
</Link>
I have created a Checkbox group in ant-design with react JS. Now, I want to use Buttons, Instead of checkboxes there. One button per one value.
Here is my code.
<Checkbox.Group>
<ul className="ul-custom">
{this.props.symptomsForCheckbox.map((symptom) => {
return (
<li>
<Checkbox value={symptom.id}>
symptom.nameEnglish
</Checkbox>
</li>
);
})}
</ul>
</Checkbox.Group>
And here it looks like
What I want is to add buttons, instead of checkboxes. The below image shows that.
And the code that I used is,
<Checkbox.Group>
<ul className="ul-custom">
{this.props.symptomsForCheckbox.map((symptom) => {
return (
<li>
<Button value={symptom.id}>
symptom.nameEnglish
</Button>
</li>
);
})}
</ul>
</Checkbox.Group>
But this doesn't work as checkboxes. Any idea for fixing this?
Thanks in advance
This is my creation.
You can check only one or uncheck all.
And I provided simple CSS that looks like Radio.Button.
https://stackblitz.com/edit/react-bsyhkm?file=index.js
I created new version with vertical and width option as you want.
https://stackblitz.com/edit/react-bsyhkm-n7umzv?file=styled.js
Not sure if you are still searching, but I had the same issue and found a really good example on the sandbox here.
It doesn't actually use any antd library, but I think it looks pretty similar, and tweaking it a bit more to appear consistent with the rest of the UI should be pretty trivial.
May be you can try,
On button click event change the state (state = !initialstate)(ie. reverse initialstate), set initialstate to false. and then set values of checkbox based on state of button.
When using the simple menu from the react material ui components with link from react router dom it leaves these two blue lines on the first link even though all the links are the same. .
The weird thing is that as soon as you click out of it the blue lines will go away. It happens only on the first link.
I have already tried to change the link to a simple anchor tag instead of the react link. That didn't work. I also tried to style the link with css and with inline styles and that didn't work
This is everything inside of the return of the menu
<div>
<Button
aria-owns={anchorEl ? 'simple-menu' : undefined}
aria-haspopup="true"
onClick={this.handleClick}
>
Open Menu
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={this.handleClose}
>
<Link to="/"><MenuItem onClick={this.handleClose}>Home</MenuItem></Link>
<Link to="/profile"><MenuItem onClick={this.handleClose}>Profile</MenuItem></Link>
<Link to="/customize"><MenuItem onClick={this.handleClose}>Customize</MenuItem></Link>
<Link to="/logout"><MenuItem onClick={this.handleClose}>Logout</MenuItem></Link>
</Menu>
</div>
I an just wondering if there is a way to remove the two blue lines.
Then. I'll write in the answers
try this :
a, a:hover, a:focus { outline: none; }
To solve this issue Gakeko Betsi suggested to edit the css for the a element with this line a, a:hover, a:focus { outline: none; }
Gakeko Betsi's answer is correct, however, it is worth noting that the outline has value especially in the case of accessibility. If you do remove it via CSS make sure you provide some styling that is obvious.
Another thing to remember is that accessibility is not just something for those that have disabilities, but also for your sites' power users or people that aren't using the mouse as their main mode of navigation.
The link below goes into great depth and is a very worthwhile read - https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/
I'm using angular-ui-router and have an issue with empty a tags, like href='#'. I'm using bootstrap, which makes extensive use of href='#' for dropdowns and such. The problem is if a user selects a dropdown item then the router interprets that as a state change, which in this case is to the home page.
Is there an easy way to stop this behavior without having to resort to changing all the href='#' to href=''.
Just remove the href tag completely from your anchor tag. It's still a perfectly valid tag without it.
Or if you're currently using ui-sref in the anchor tag, you could actually use the href attribute instead to go to the route that the state is mapped to.
you can use this, so you can preserve the link and basically do nothing when its clicked
<a ui-sref="state" href="javascript:void(0);">Your link</a>
I use this:
<a href-void>Click me! I don't do anything, but i'm still a link!</a>