I am using #radix-ui/react-dropdown-menu with my Button component inside the Trigger (with asChild prop) and the dropdown content is displayed incorrectly (if I replace Button with the html button, the content is displayed normally).
For some reason the dropdown content css is like this transform: translate3d(0px, -200%, 0px) when I am using my Button component, but when I used the html button everything works fine
import * as React from "react";
import * as DropdownMenu from "#radix-ui/react-dropdown-menu";
const Button = (props) => {
return <button {...props} />;
};
export function App() {
return (
<div className="App">
<div>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<Button type="button">test 1</Button>
{/* <button type="button">test 2</button> */}
</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Item>menu item</DropdownMenu.Item>
<DropdownMenu.Item>menu item</DropdownMenu.Item>
<DropdownMenu.Item>menu item</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
</div>
);
}
Related
import "./styles.css";
import { Popover } from "antd";
import { FullScreen, useFullScreenHandle } from "react-full-screen";
export default function App() {
const handle = useFullScreenHandle();
return (
<div className="App">
<FullScreen handle={handle}>
<div className="App__inner">
<h1>Hello CodeSandbox</h1>
<button onClick={handle.enter}>Click to FullScreen</button>
<Popover placement="right" content={<span>tooltip</span>}>
<button>hover me</button>
</Popover>
</div>
</FullScreen>
</div>
);
}
The problem is Popover doesnt work when i make App__inner component fullscreen. I have reproduced the issue here codesandbox. Please suggest any fix or alternatives
I was expecting the Popover to work as expected in fullscreen mode
The default behavior of Popover is to create a div element in body , so when you do fullscreen the div is hidden. What you need to do is make use of getPopupContainer API of Popover and set the container body inside FullScreen for your Popover to be visible.
import "./styles.css";
import React from "react"
import { Popover } from "antd";
import { FullScreen, useFullScreenHandle } from "react-full-screen";
export default function App() {
const handle = useFullScreenHandle();
const containerRef = React.useRef(null);
return (
<div className="App" >
<FullScreen handle={handle}>
<div className="App__inner" ref={containerRef}>
<h1>Hello CodeSandbox</h1>
<button onClick={handle.enter}>Click to FullScreen</button>
<Popover getPopupContainer={() => containerRef.current} placement="right" content={<span>tooltip</span>}>
<button>hover me</button>
</Popover>
</div>
</FullScreen>
</div>
);
}
What I want my code to do
I need to make tabs that display different components depends on the state
My issue
I don't know how to render the correct component using a conditional depending on what tab I'm in with react
What my code is doing so far
I have an array of all my components in the const allTabs
depending on what button i click the state of tabNum changes
import React, {useState} from "react";
import Tabcomp1 from './../components/tabcomp1';
import Tabcomp2 from './../components/tabcomp2';
const allTabs = [Tabcomp1, Tabcomp2];
const Pagetwo = () =>{
const[tabNum, setTabNum] = useState("0");
const changeTab = (e) =>{
e.preventDefault();
if (tabNum === "0") {
setTabNum("1");
console.log(tabNum);
}
else {
setTabNum("0");
console.log(tabNum);
}
}
return(
<div>
<h1>you are now on page 2</h1>
{/* tab1 */}
<button id={0} onClick={changeTab}>tab 1</button>
{/* tab2 */}
<button id={1} onclick={changeTab}>tab 2</button>
<br />
{/* display the correct component here */}
</div>
)
}
export default Pagetwo;
in you button event handler you can set index as
onClick={() => setTabNum(0 // tab index here)}
and below you button you can render it like
{allTabs[tabNum]}
Why inline styling doesnt work in react on components?I dont understand why this is not working.I know is possible to make it different ways.(with css files for example).Im just corius.The intellisense does not help by inline styling either.Its strange..
import "./App.css";
import Button from "./components/Button";
function App() {
return (
<div className="App" >
<Button style={{fontSize:"50px"}} />
</div>
);
}
export default App;
//this is from Button components
import React from "react";
const Button = () => {
return (
<div>
<button>
Change
</button>
</div>
);
};
export default Button;
You need to pass the style property to the Button component:
const Button = ({style}) => {
return (
<div>
<button style={style}>
Change
</button>
</div>
);
};
the profile component contains the following code:
<div className="button_container" style={{display:'flex'}}>
<DownloadButton text={'PDF'} icon={<GetAppIcon />} />
</div>
the button component contains the following code:
import React from 'react'
import { Button } from "#material-ui/core";
import './Button.css'
const DownloadButton = ({text, icon}) => {
return (
<Button onClick={() => { }} className="custom_btn" endIcon={icon ?
(<div className="btn_icon_container" >{icon}</div>) : null}>
<span className="btn_textw">{text}</span>
</Button>
)
}
export default CustomButton
**I've added an onClick event but am having difficulty figuring the simplest way to trigger the file to download, once the button is clicked **
Any comments are appreciated
Turn your button into a link and provide the path to your pdf file
import React from 'react'
import { Button } from "#material-ui/core";
import './Button.css'
const DownloadButton = ({text, icon}) => {
return (
<Button component="a" href="PATH_TO_YOUR_PDF_FILE" className="custom_btn" endIcon={icon ?
(<div className="btn_icon_container" >{icon}</div>) : null}>
<span className="btn_textw">{text}</span>
</Button>
)
}
export default CustomButton
The simplest way to achieve this is to use an HTML anchor and style it like a button.
Download PDF
With material core buttons you need to add the href prop and it will use an anchor tag instead of a button tag.
<Button href="/path/to/file.pdf">Download PDF</Button>
Your download button would look like
const DownloadButton = ({text, icon}) => {
const endIcon = icon ? (<div className="btn_icon_container" >{icon}</div>) : null;
return (
<Button href="file.pdf" className="custom_btn" endIcon={endIcon}>
<span className="btn_textw">{text}</span>
</Button>
)
}
This is my first time trying to use Meteor with ReactJs and React Semantic UI, and having issues on rendering the Semantic UI modal. What I am trying to achieve is to click on the button and open up the modal overlaying on the whole browser, in reference to the React Semantic Modal Manual But what I have right now is that the modal is rendered partially on the screen, as seen from the attached screenshots. Can anyone please help? Thanks in advance.
Main.js
import {Meteor} from 'meteor/meteor';
import React from 'react';
import ReactDOM from 'react-dom';
import {routes} from "../imports/routes/routes";
Meteor.startup(() => {
ReactDOM.render(routes, document.getElementById('app'));
});
Site.js:
import React from 'react';
import { Header, Button, Modal } from 'semantic-ui-react';
import PrivateHeader from './PrivateHeader';
import Sidebar from './Sidebar';
import ModalExample from './Modal';
export class Site extends React.Component {
render() {
return (
<div>
<PrivateHeader/>
<Sidebar/>
<div className="page">
<div className="ui padded one column grid">
<div className="column">
<ModalExample/>
</div>
</div>
</div>
</div>
);
}
}
export default Site;
ModalExample.js
import React from 'react'
import { Button, Header, Icon, Modal } from 'semantic-ui-react'
const ModalBasicExample = () => (
<Modal trigger={<Button>Basic Modal</Button>} basic size='fullscreen'>
<Header icon='archive' content='Archive Old Messages' />
<Modal.Content>
<p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
</Modal.Content>
<Modal.Actions>
<Button basic color='red' inverted>
<Icon name='remove' /> No
</Button>
<Button color='green' inverted>
<Icon name='checkmark' /> Yes
</Button>
</Modal.Actions>
</Modal>
)
export default ModalBasicExample
Sidebar.js
export const Sidebar = (props) => {
return (
<div className="ui inverted vertical left fixed menu" >
<a className="item" href="/">
<img src='/images/logo.png' className="ui mini right spaced image"/>
Semantics UI Test
</a>
<div className="item">
<div className="header">Hosting</div>
<div className="menu">
<a className="item">Shared</a>
<a className="item">Dedicated</a>
</div>
</div>
<div className="item">
<div className="header">Support</div>
<div className="menu">
<a className="item">E-mail Support</a>
<a className="item">FAQs</a>
</div>
</div>
</div>
)
};
export default Sidebar;
Thanks to Saad's comment mentioning the className that I found out that it was due to Semantic UI will add a ui page modals dimmer transition visible active className when the modal is opened. This causes a conflict to my existing page className which is used in other pages, but because of Meteor and React, the various scss are compressed together.
I suggest to run this.show('fullscreen') with an onClick event on trigger button like the following :
<Button onClick={this.show('fullscreen')}>Show Modal</Button>
ModalExample.js
import React, { Component } from 'react'
import { Button, Modal } from 'semantic-ui-react'
class ModalExample extends Component {
state = { open: false }
show = size => () => this.setState({ size, open: true })
close = () => this.setState({ open: false })
render() {
const { open, size } = this.state
return (
<div>
<Button onClick={this.show('fullscreen')}>Show Modal</Button> // Triggering button
<Modal size={size} open={open} onClose={this.close}>
<Modal.Header>
Delete Your Account
</Modal.Header>
<Modal.Content>
<p>Are you sure you want to delete your account</p>
</Modal.Content>
<Modal.Actions>
<Button negative>
No
</Button>
<Button positive icon='checkmark' labelPosition='right' content='Yes' />
</Modal.Actions>
</Modal>
</div>
)
}
}
export default ModalExample
Source