Old menu items broken with react-router-dom
<MenuItem
containerElement={<Link to="/module" />} >Module</MenuItem>
This stopped working....
How can I upgrade these new Menu Item controls to work with react-router?
I've tried replacing containerElement with root, and also surrounding by tag but that leaves the hyperlink underlined. I'd like to keep the same style as MenuItem.
from this post: How to do routing with material-ui#next MenuItem?
see demo.js from here https://codesandbox.io/s/5213wzkvpl
You can use Link as child for MenuItem:
<MenuList>
<MenuItem>
<Link to="/myRoute" style={{ textDecoration: 'none', display: 'flex' }}>
go to my route
</Link>
</MenuItem>
</MenuList>
Related
I am trying to get the button href from material-ui.com to open in an external self window if the link is external.
Wondering how this can be done.
<Button size="small" color="primary" href="https://example.com/" target="self">
Visit Website
</Button>
Normally we would code
link
Instead of Button, maybe you could try using Link component instead https://material-ui.com/components/links/
<Link
component="button"
variant="body2"
onClick={() => {
console.info("I'm a button.");
}}
>
Button Link
</Link>
I'm currently using the MS Fluent UI controls (formerly known as Office Fabric UI | https://developer.microsoft.com/en-us/fluentui#/controls/web) and I'm getting stuck with the 'Modal' control.
I am triggering a Modal dialog control as the onClick event for a DocumentCard control. The problem is I can't see any way to keep the new model dialog centred on the screen.
It appears to always center on the element which contains all of the document cards (and there are a lot of cards.. so you end up having to scroll down quite a lot to see the modal dialog).
Is there any way of simply setting it to "center on the (visible) window"?
Below is a snippet from the React Component which hosts the Document Card and Modal dialog..
return (
<DocumentCard onClick={showModal}>
<DocumentCardTitle title={this.props.Title} shouldTruncate />
<Image {...imageProps} className={styles.image} />
<DocumentCardTitle title={this.props.event.Description}
shouldTruncate showAsSecondaryTitle />
<Modal isOpen={isModalOpen} onDismiss={hideModal} isBlocking={true}>
<div>
<span id={titleId}>{this.props.Title}</span>
</div>
<div>
<p>
{this.props.event.Description}
</p>
</div>
</Modal>
</DocumentCard>
);
I think you just need to raise the modal out of the DocumentCard. The following might be what you're looking for
return (
<>
<DocumentCard onClick={showModal}>
<DocumentCardTitle title={this.props.Title} shouldTruncate />
<Image {...imageProps} className={styles.image} />
<DocumentCardTitle title={this.props.event.Description} shouldTruncate showAsSecondaryTitle />
</DocumentCard>
<Modal isOpen={isModalOpen} onDismiss={hideModal} isBlocking={true}>
<div>
<span id={titleId}>{this.props.Title}</span>
</div>
<div>
<p>{this.props.event.Description}</p>
</div>
</Modal>
</>
);
Trying to find how to use mailto in material UI. I tried just using a simple tag within a ListItem, I tried using
<ListItem button component={Link} mailto='' />
I also tried
<ListItem button >
<i class="material-icons mail_outline">mail_outline</i>
<ListItemText primary="Support" />
</ListItem>
I tried to find information about this on material-UI's website & Github but nothing. I would really appreciate some help.
I based mine on #Gary Vernon Grubb's answer, and added it into a button.
<Button
variant="contained"
size="large"
color="primary"
target="_top"
rel="noopener noreferrer"
href={`mailto:test#example.com`}
>
<Typography variant="button" style={{ fontSize: '0.69rem' }}>
Send Documents
</Typography>
</Button>
If you set the component equal to a (the hyperlink tag), you can then use the href attribute to set the e-mail.
Thus, you'll get the following line.
<ListItem button key="Email" component="a" href="mailto:name#email.com">
Mailto is a Uniform Resource Identifier (URI) scheme for email addresses. It is used to produce hyperlinks on websites that allow users to send an email to a specific address without first having to copy it and enter it into an email client.
<ListItem>
Send Mail
</ListItem>
Above code works well for me in ReactJs with Material-UI library included.
This is how I do it with material-ui:
<FormControlLabel
control={
<a target="_top"
rel="noopener noreferrer"
href="mailto:test#example.com">
<IconButton color="primary">
<EmailOutline /> {/* icon */}
</IconButton>
</a>
}
label={"test#example.com"}
labelPlacement="end"
/>
I created a theme and copied the navigation.ftl from Liferay Classic Theme but in my theme, The navigation title is showing up as shown in the below screen-shot.
If I am logged in as an Administrator, I am able to edit the text and make it blank and Save and it goes away. But when i refresh the page, it comes back which i think is a bug.
But my question is, What do i do in the theme so that the title doesn't show up at all anywhere.
The code snippet from navigation.ftl
<#assign VOID = freeMarkerPortletPreferences.setValue("portletSetupPortletDecoratorId", "barebone") />
<div aria-expanded="false" class="collapse navbar-collapse" id="navigationCollapse">
<#if has_navigation && is_setup_complete>
<nav class="${nav_css_class} site-navigation" id="navigation" role="navigation">
<div class="navbar-right">
<#liferay.navigation_menu default_preferences="${freeMarkerPortletPreferences}" />
</div>
</nav>
</#if>
</div>
<#assign VOID = freeMarkerPortletPreferences.reset() />
I had the same issue and found that in my custom theme (starting from the Styled theme using the Theme Generator) the portlet.ftl file had the line:
<h2 class="portlet-title-text">${portlet_title}</h2>
The portlet.ftl in the Classic theme has:
<#if portlet_display.getPortletDecoratorId() != "barebone">
<h2 class="portlet-title-text">${portlet_title}</h2>
</#if>
I added that #if statement around the h2 to my portlet.ftl and now the title is not displayed if Barebone is the chosen decorator for a portlet. This works whether Barebone is set through a template or through the Look and Feel menu in the admin.
I was able to hide the title (of Navigation Menu portlet) using the following CSS in my custom theme
.portlet-static.portlet-static-end.portlet-barebone.portlet-navigation .portlet-content.portlet-content-editable .portlet-title-text {
display:none !important;
}
Edit: The above solution worked when I logged in as an Administrator only.
I replaced it with the following to hide it for Regular users as well:
section#portlet_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet.portlet h2.portlet-title-text {
display:none !important;
}
I have followed the simple example on Matererial-UI
import React from 'react';
import DatePicker from 'material-ui/lib/date-picker/date-picker';
const DatePickerExampleSimple = () => (
<div>
<DatePicker hintText="Portrait Dialog" />
<DatePicker hintText="Landscape Dialog" mode="landscape" />
<DatePicker hintText="Dialog Disabled" disabled={true} />
</div>
);
But the output (image below) is not right, the blue label is not centered.
I am using: Material UI version 0.15.0-alpha.2, React 0.14.7, chrome 49
Am I missing something?
The DatePicker is being redesigned at the moment and this issue should be fixed among others soon.
Watch this Pull-Request for updates:
https://github.com/callemall/material-ui/pull/3739
If you need the layout fixed immediatly, use 0.15.0-alpha.1 or older