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/
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.
New with react here. I love the defi world so I'm trying to fork the PancakeSwap frontend from GitHub.
I already figure out how to add my own styling to it, changed de menu items, etc. The only problem I have, is I cant figure out how to change the href of the icons on the footer (Twitter and Telegram).
Anyone can help me? Probably is very easy but I am stuck.
Thanks!
In my case, I just had to hide the entire footer to hide those links. There is one more suggestion which can solve your problem to some extend.
On the file views/App.tsx,
you may remove the Menu call.
This removes the header and footer from the pages. But it is easy to reconstruct a new custom Menu like headerbar with the UIKit.
I have searched across the files and I was able to hide only the footer links and not the social icons.
The footer links can be hidden by not passing footerlinks on the Menu component at ./components/Menu/index.tsx:
return (
<UikitMenu
.
.
// footerLinks={footerLinks(t)}
.
.
/>);
Or, you may use the Menu component from a UIKit fork at https://github.com/nguyenphu27/pancake-toolkit-testnet. The previous builds was not having a footer and hence this UIKit is not having a footer.
Sorry, I was not able to find a perfect solution within the same UI library.
I'm trying to implement a pop over that can show on any screen in the web application, using React+Redux+React router
The popover is a container, that is triggered by the application state.
But how is the best practice to do such a thing, since the background is transparent, and it should just show on any screen that is currently presented.
Should it be on top of the router, on hidden, and unhide on present? I can seem to find any example for this senario...
Popover can sit inside Root component, something like this.
<App>
<HomePage />
{shouldShowPopOver && <PopOver />}
</App>
You can dispatch { type: TOGGLE_POPOVER } action anywhere, to alter shouldShowPopOver. The styling(transparent, whole page etc) should be done through css.
You ca use react-bootstrap popover. Checkout the link
https://react-bootstrap.github.io/components.html#popovers
I'm using react-modal component and it works pretty well.
I have used react-modal-dialog before and it works like a charm! The benefit of this library is that you can define your <Modal> component near where the source of trigger is (some button?) and it is easy to trace the condition that determines whether the modal is displayed since it is near the trigger source.
Using this library, technically it does not matter where you put the modal component among your markup as the CSS of the modal makes it appear above all other elements.
Still learning ionic. I have a slide menu integrated into the app. The problem that I have is that I want to completely hide ionic nav bar and menu on top for my login view. I tried using ng-show to hide the nav bar based on whether or not current user is authenticated, but all it does is hide the content in the bar, but leaves empty nav bar container on top of the page.
I also tried using ng-if instead of ng-show, which does make the bar disappear completely, but when I need it to become visible again, the code produces an error: Cannot read property 'outerHtml' of null. I guess because the DOM object for the menu is not there anymore.
What is the best way to address this? Am I on the right path or is there a better way to show/hide
I am trying to use navigation images on left as well right of <super-navbar> but it is stated in the official documentation, that only text is supported in super-navbar buttons. But there must be some way around to do this. Below is my code, where I want to place images instead of text:
<super-navbar>
<super-navbar-button side="left" id="hamburger" onclick="supersonic.ui.drawers.open()">Menu</super-navbar-button>
<super-navbar-title>MyApp</super-navbar-title>
<super-navbar-button side="right">Search</super-navbar-button>
</super-navbar>
Instead of "menu" text I want to have hamburger type icon or png image at least. Same for search text.
Thanks.
This can be accomplished right now by removing the <super-navbar> section and writing your own html header.
If you look in the layout file for your project there is an import statement as you mentioned:
<link rel="import" href="/components/supersonic/components/import.html">
There is a section that states:
* #name super-navbar-button
* When used inside theelement, creates a button that will be displayed on the navigation bar. Only text content is supported for the button title.
Support for icons has been requested. You can subscribe to their github to get notifications of issues. https://github.com/AppGyver/steroids
One work around to be able to keep using <super-navbar> and have icons is to use something like this which will render as ≡
<super-navbar-button ng-click="toggleMenuDrawer()">
≡
</super-navbar-button>
They have a good forum on Muut as well. This issue is most likely related to trying to add icons in the <super-navbar>. I experienced a disappearing navbar after trying to add markup: <i class="icon super-search"></i>
It works in the main content area, but makes the navbar behave differently when nested in a <super> element.