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"
/>
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>
</>
);
I got 'invalid location of tag (a)' message, when I am working on my JSP page.
<a href="abc.html">abc</abc> this tag is not working properly.
<form class="form-inline my-2 my-lg-0">
<c:choose>
<c:when test="${sessionScope.SIGNIN_ID == null}">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
signin
</button>
</c:when>
...(I erased unnecessary part)
</form>
</nav>
</header>
a tag is located under body > header> nav > form > button > a.
I tried to add <div> after <form> and add <tr>``<td> before <form> but it still doesn't work.
I also have jstl file in my \lib. Is there anyone who can help?
You can't have an a tag inside a button tag, in HTML. What are you trying to achieve, with the href (signinForm.html) inside the button?
I'm using scala play framework + scala template engine for front end. How can I add button handler? I need to call some function when clicking on it.
<body>
<p>Database interface<br />
<textarea style="margin: 0px; height: 193px; width: 533px;" cols="40" name="comment" rows="3"></textarea>
</p>
<p><input type="submit" value="Select" /> <input type="submit" value="Insert" /> <input type="submit" value="Update" /></p>
</body>
There is no special button handlers. You can write it in Javascript or plain HTML. The only trick thing is to get a link the server function. You can get the link automatically by reverse routing.
For example you have the route
GET /count controllers.CountController.count
Then you can get the link by calling controllers.routes.CountController.count in your code.
In the template engine, link:
Count
Plain HTML button:
<form action="#controllers.routes.CountController.count">
<input type="submit" value="HTML only" />
</form>
Button with Javascript:
<input type="submit" onclick="location.href='#controllers.routes.CountController.count';" value="Javascript" />
If you need some special thing on the client side to process then you need to write your own code in Javascript.
There's nothing in Scala/Play/Twirl that would handle button clicks, the simplest approach would be to use jQuery .click()
See this plnkr http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview
When using a ng-form tag on an ng-repeat which contains a radio button group, the radio buttons are linked so if you check a radio button in one ng-repeat it will deselect in all the other ng-repeats. This puzzles me as the model of the ng-repeat is otherwise isolated from the other items. This is not only an issue when using ng-repeat. It also occurs when having multiple instances of a custom directive with isolated scope which renders a
<div ng-form name="myForm">
In the Plnkkr try adding a number of items and check the radio buttons on some of the items.
They should be independent, but they are not.
Is this a bug in Angular?
If not why does it work this way and how can I work around it?
<form name="mainForm" ng-submit="submitAll()">
<ul>
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" name="myRadio" value="r1" ng-model="item.radio" /> r1
<input type="radio" name="myRadio" value="r2" ng-model="item.radio" /> r2
<span ng-show="subForm.name.$error.required">required</span>
<button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item)">Submit One</button>
</li>
</ul>
<button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
</form>
Those radio buttons are "connected" by a browser since you are giving them the same name. Just drop the name attribute and things start to work as expected:
http://plnkr.co/edit/AEtGstSBV6oydtvds52Y?p=preview
As per your last comment, I have tried this out and it works. I'm not using the built-in angular validation but I believe it works all the same and is very simple
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" value="r1" ng-model="item.radio" /> r1
<input type="radio" value="r2" ng-model="item.radio" /> r2
<span ng-show="item.radio==''">required</span>
<button type="button" ng-disabled="subForm.$invalid || item.radio==''" ng-click="submitOne(item) ">Submit One</button>
</li>
See my working example at http://wiredbeast.com/coolframework/stackover.html
The trick is using ng-show="item.radio==''" to show the validation error and to disable the "Submit One" button.
In my honest opinion angular form validation and browser validation with checkboxes and radios is not very solid.