I am studying about Material-UI but I couldn't find in the Demo (example) anything similar with what they have in their website.
My problem is I want to copy this example, so I am trying to reproduce the container (not the content) using the <Card /> component, but it doesn't reproduce very well, so I want to know if there is a specific component to use.
If I understand your question correctly, you're looking for a way to emulate the collapsible demo container that reveals the code behind the demos in Material-UI's documentation (and you want to do so using Material-UI components).
That specific container is implemented in the docs site as an internal component and is composed of Material-UI components with a reliance on JSS for styling. It is also open-source, so looking at the code should help you.
Here is an excerpt from the render method:
<div className={classes.root}>
<IconButton onClick={this.handleCodeButtonClick} className={classes.codeButton}>
<CodeIcon />
</IconButton>
<Collapse in={this.state.codeOpen}>
<MarkdownElement className={classes.code} text={`\`\`\`js\n${raw}\n\`\`\``} />
</Collapse>
<div className={classes.demo} data-mui-demo={name}>
<DemoComponent />
</div>
</div>
This is a component that is used for demos in the Material-UI documentation. It is little more than a styled div with an IconButton.
The MarkdownElement contains the code that is toggled by the code button presented at the top-right of the container. It is wrapped in a Collapse component, which handles the animated transition that takes place when the visibility of that code is toggled.
The DemoComponent is where the demo is presented.
All style is handled using JSS, defined in a stylesheet object.
I'm sure you can build this into a Card by following this pattern. It should be pretty straight-forward, something like adding an action to the CardHeader that triggers a state change and toggles whatever you're looking to expand.
Related
I am using React and Semantic UI for my website and I'm looking to create a modal popup to provide some action items on the page.
Currently, with Semantic's Modal, you must choose between three dimmer options (Default, inverted and blurring). In my case, I want the pop-up to appear, but I don't want ANY overlay. The page behind the model should appear as normal. Strangely, this isn't easy/obvious to implement.
On my page, I have the following example model code.
<Modal dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
<Modal.Header>Select a Photo</Modal.Header>
<Modal.Content image>
<Modal.Description>
<p>Some contents.</p>
</Modal.Description>
</Modal.Content>
</Modal>
The three options (default,inverted and blur) obviously don't work.
I have tried using styling to set the background color to transparent and other optoins, but nothing seems to work.
<Modal style={{backgroundColor: "transparent"}} dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
I know there must be an easy solution here..what is it?
Thx for your help.
Is used to be possible to set dimmer={false}, but this is deprecated (see link below) according to the documentation, and you will need to use styling in order to make it transparent, so your solution is close to what you need to do. If you inspect the rendered Modal, you'll see that you need to override the background-color of the .ui.dimmer css class. You should be able to do that in your component's stylesheet.
https://github.com/Semantic-Org/Semantic-UI-React/pull/2882
I'm trying to better understand how Material-UI works, and I was confused why I need to use the Toolbar component twice to get my scrolling toolbar to render properly as in this example code.
If I don't include the second Toolbar after the ElevationScroll, the menu I want to place below the app bar is rendered underneath the app bar. If I include it, my menu is pushed down and renders nicely. This works great, but I don't understand why I need to include an extra in my jsx in order to get things to look right, like in this simplified example:
function SettingsMenu() {
return (
<ElevationScroll>
<AppBar>
<Toolbar>
<Typography>
Settings
</Typography>
</Toolbar>
</AppBar>
</ElevationScroll>
<Toolbar/>
<MyMenu/>
);
}
I've checked in Google Devtools to figure out why this is happening, the second toolbar is rendered as a div with nearly identical css styles but with no child elements. When I delete it manually in Devtools, the menu gets pushed back up behind the app bar as before. Thanks for any help!
It's because AppBar have positon: fixed; which means it wont take space on the screen so you but another Toolbar which will be underneath the AppBar to push the content down and take the same space the Toolbar should take.
It looks like antd (https://ant.design) is generating an alarming amount of nesting to achieve its purpose. Maybe I'm wrong, but I feel there must be a better way.
For instance, I added colored text, like so:
<Text type="danger">Some words</Text>
At the DOM, it looks as expected:
<span class="ant-typography ant-typography-danger">Some words</span>
But when inspecting with react-tools, it looks bloated and doubled:
("...>" = omitted attributes)
<Text type="danger">
<withConfigConsumer(Base) ...>
<Context.consumer>
<Base ...>
<LocalReceiver ...>
<ReactResizeObserver ...>
<Typography ...>
<Content.consumer>
<span ...>
"Some words"
...
</Text>
<Context.consumer>
<Base ...>
<LocalReceiver ...>
<ReactResizeObserver ...>
<Typography ...>
<Content.consumer>
<span ...>
"Some words"
...
</Context.consumer>
Admittedly, I don't have enough experience with React. But isn't this excessive? Why is it doubled? And most of all: how can I use antd and avoid this?
You can't avoid this when using antd as this is a React design pattern their team decided to use. Those wrapper components are HOCs - higher-order components and their purpose is to apply/reuse some logic on their child components.
For example, in their GitHub repo, you can clearly see that Text, Title and Paragraph are simply the same Typography component whose inner text gets styled differently depending on if its passed a Text, Title or a Paragraph prop. This is to ensure extensibility: if they decide to create a Quote component, they will simply add a Quote entry to the Typography component, and define Quote styling that would possibly include italic text. The wrapper Typography component would then pass down this new italicized style to its child component - the inner text.
As for ReactResizeObserver, many Ant Design components require to have some kind of onResize event listener attached to themselves in order to be responsive - to change their size or structure based on the screen width. Instead of defining the same onResize listener and handler on every component that needs this functionality, they have created a single HOC that can wrap any component under the hood and allow it to be responsive.
You really shouldn't care about this, as this is common practice with many popular libraries like React Router or Redux.
I am using Ant Design with React. Ant Design has a menu component: https://ant.design/components/menu/
Is it possible to make the menu uncollapsable/unfoldable? I read the documentation, and there was no parameter to turn off folding/collapsing.
I know I'm coming late to the party but for other people struggling with this - there is an undocumented (as far as I could tell from official docs) prop of Menu component called disabledOverflow. Setting it to true solved it for me.
Kudos to VS Code editor, it suggested this property to me and saved my day!
I made it work by including a min-width style object to the Menu
<Menu
theme="dark"
mode="horizontal"
style={{minWidth: '800px'}}
>
...
</Menu>
Antd Inline Menu This gives you a menu that does not collapse.
Moreover it is only collapsible when you give the
inlineCollapsed={this.state.collapsed}
props to Menu Component
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.