I would like to right click the navigation tab and then open a new tab which transfers the components.
Can you help me to define href in anchor elements to allow open in new tab ?
You can do that with React Portals. Also there is amazing article for that.
https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202
Related
I am making a react js application. Within this application i understand i have a tag inside a tag like so:
<a><a></a></a>
I have located the issue in hand as you can see in these pictures. But I am unable to fix the problem. If anyone could give me a hand i would be very thankful.
The commented out code is where i am having my issue. As you can see i have a Link tag and inside that Link tag i have a Dropdown tag. The Dropdown is causing the issue but it is needed for my application.
Edit:
I understand an a-tag cannot live inside another a-tag, i have tried a few different ways to to get the full use of the dropdown and the link. As you can see in these new pictures i am trying to get the card to be a link to a group while also having a dropdown with two options, Edit and Delete.
This is what the card looks like, the three dots is the dropdown menu. when this card is clicked it brings me to the "/group/manage/" page.
This is what the card looks like with the dropdown menu clicked.
I recommend restructuring your component in a way similar to this:
<Card>
<Link>
{mainContent}
</Link>
<Dropdown>
{dropDownItems}
</Dropdown>
</Card>
Then use CSS to position the dropdown to the top right, on top of the main content.
How can I go to a different section of a page in react. Right now, I have separated different sections in folders but not sure how to make a button that clicks to a different section in react. Any suggestions or ideas?
You should be able to use anchor tags in react as you would in HTML.
using JSX, tag the place on the page you want to go to with an ID:
<h3 id="education">Education</h3>
Then where you want the link to be located, place an a tag using the # syntax:
Education
Clicking on the a tag should scroll the page to the education H3 tag.
I have a component of header in react and in the same way a component of tabs in another file. I integrate them in app.js . Now I want to change the tabs on click of the header buttons. How could it been possible can anyone help me in this regard.
I have tried it through giving an ID to the tabs and tried to open the tab by calling that ID in href using anchor tag around the tab buttons. But this way can't help me in to open tabs.
https://codesandbox.io/embed/shy-grass-l9n7m
I noticed you are using jQuery to set the tab value. I suggest using React for that with something more like this: https://codesandbox.io/embed/morning-water-dit63
Note: The above code is very rough because I just through it together by modifying your code. For example, I used the active and fade class names to set the visibility of tab content where personally I might have done conditional rendering like this:
render (
// tabs
{this.isActive('home') && (
// tab content here
)}
)
Alternatively you could use a library to handle it like https://reactcommunity.org/react-tabs/
I've been fiddling with Angular-Material and it does seem pretty slick. One of the issues though, that we're having is the lack of the ability to close a tab using an 'X' button next to the tab's label. This is similar to what any browser tab UI will have to offer.
In the current UI framework we use (Angular Bootstrap UI) you could define the rendering of the tab header to add such a button.
Any ideas on how to implement it with Material's md-tab directive?
Thanks.
The docs at: https://material.angularjs.org/#/api/material.components.tabs/directive/mdTab
Say:
If the label attribute is not specified, then an optional
tag can be used to specify more complex tab header
markup. If neither the label nor the md-tab-label are specified, then
the nested markup of the is used as the tab header markup.
Why not define your in a tag?
I have an off panel menu working perfectly on a site. The user can open and close it using both a navicon or sliding it with the finger.
Right now I have a very nice navicon icon that transitions from Menu Icon to X Icon when is clicked (and opens the menu) and the other way around when is clicked again and the menu closes. Buuut if the user slides the menu open or closed instead of using the navicon, the transition is not triggered, which might lead to confusions on the UX (i.e. the menu being closed, and the navicon showing an X instead of the regular 3 horizontal lines icon).
So, the navicon has right now the following code to trigger the transition:
ng-click="open = !open" ng-class="{'open-mob':open}">
I thought that a nice and easy way to fix this, would be to trigger this "open = !open" every time that the menu is open or closed, as the js from the off panel adds the class slidRight to the main section when the menu is open, and removes it when it is closed.
Being so, is there some straight way to check if the class is there using AngularJS?
Something like if class = slidRight -> "open = !open".
Thanks!!
for those (including me) who could not get their head around Angular's documentation, here is an example which worked for me:
angular.element(myElement).hasClass('my-class');
angular.element(myElement).addClass('new-class');
angular.element(myElement).removeClass('old-class');
hope this help someone ...
Angular uses jqLite's .hasClass() natively.
Read here on the angular docs for more info.
http://docs.angularjs.org/api/angular.element
https://docs.angularjs.org/api/ng/function/angular.element