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>
Related
Let's say I have a button with onClick attribute set to doSomeThings(someId)
When I inspect it on Chrome or Safari it shows:
<button onclick="doSomeThings("1")" type="button"> </button>
Now I use the Chrome / Safari inspector and change the 1 to, let's say, 3, and press enter. I don't get
<button onclick="doSomeThings("3")" type="button"> </button>
but
<button onclick="doSomeThings(" type="button"> </button>
Is it some security feature or am I doing something wrong ?
When I click the ionic navigation back button, app skip the immediate back page and redirected to the first page (ie. When click back from page5, it skip page4 and redirected to page3).
I also tried a manual back by writing a function but the result was same.
How can I resolve this?Please help...
My code
1.View
<div class="bar bar-header nav_header">
<button class="button icon ion-arrow-left-b button-clear btn-sm nav_headeritems" ng-click="backstate()">Go Back</button>
<h1 class="title nav_headeritems">Profile</h1>
</div>
2.Controller
$scope.backstate =function(){
$ionicHistory.goBack(-1);
//alert("back");
}
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 am developing an IONIC project on iot relay switch. ( any help will be appreciated)
Whenever i am triggering a url, either it is opening in same app or launching a new browser.
but my need is that, it should trigger a url but it should not open anywhere.
I have a basic code like this:
<ion-header>
<ion-navbar>
<ion-title>
IOT Project
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h3 text-center> Basic Switch </h3>
<hr>
<p>
<a href="http://192.168.1.5/gpio?state_12=0" target = nobrowser>switch On</a><br><br>
<a href="http://192.168.1.5/gpio?state_12=1" target = nobrowser>switch Off</a>
</p>
</ion-content>
Use HTTP for this. If just want to hit the url, try this.
HTML
<button (click)="call(0)">switch On</button>
<button (click)="call(1)">switch Off</button>
TS
call(id) {
this.http.get(`http://192.168.1.5/gpio?state_12=${id}`);
}
How can I disable a button inside ion-nav-buttons depending on an action in the ion-content?
example: if I click in a button inside ion-content the button inside
ion-nav-buttons get disabled.
As I see, I can´t controll the elements inside ion-nav-buttons from the controller of the template that has the ion-nav-buttons.
This can be done with ng-disabled in button
Check this Try ng-disabled
<ion-view>
<ion-nav-buttons side="primary">
<button class="button" ng-disabled="disabled" ng-click="doSomething()">
I'm a button on the primary of the navbar!
</button>
</ion-nav-buttons>
<ion-content>
<button class="button" ng-click="disable()">
Click to disable
</button>
</ion-content>
</ion-view>
//Angular code
$scope.disable=function(){
$scope.disabled=true;
}