I'm learning Material UI and I'm trying to display an checkbox with a label. Following the samples in the online docs, I'm rendering a checkbox, but no label. What am I doing wrong?
return (
<div className="entryForm" >
<div style={{width:'100%'}}>
<h3 style={ {display:'inline-block' } }>
User Details
</h3>
<span style={{float:'right'}}>
<Checkbox
label="Active"
labelPosition="left"
/>
</span>
</div>...
I think it depends on the MUI version you are using.
If you're using version 1.0 and above you should use FormControlLabel:
import {FormControlLabel} from 'material-ui/Form';
<FormControlLabel
control={
<Checkbox
name="SomeName"
value="SomeValue"
/>
}
label="MyLabel"/>
More in the documentation:
https://material-ui-next.com/demos/selection-controls/
FormControlLabel would be the way to go, here is what it looks like with the updated import v4.11.1
import { FormControlLabel } from '#material-ui/core';
<FormControlLabel
control={
<Checkbox
name="SomeName"
value="SomeValue"
/>
}
label="MyLabel"/>
Related
I'm using a material checkbox but it doesn't return true or false. This is my code:
<FormControlLabel
control={
<Checkbox defaultValue={data.hasPhone} defaultChecked={data.hasPhone} color="primary" {...register("hasPhone")}/>
}
label="Do you have a phone"
/>
{hasPhone && (
<Input
{...register("phoneNumber")}
id="phoneNumber"
type="tel"
label="Cellulare"
name="phoneNumber"
/>
)}
When the checkbox is true, we have a condition, "hasPhone" that open another input field.
If i use a my checkbox like this:
<input type="checkbox" placeholder="Developer" {...register("hasPhone")} />
in above case the condition working correctly.
Can you help me please? thx
The reason why it is working for your "hasPhone" <input /> is that it is a native form element in contrast to the Material UI <Checkbox /> component, which is an external controlled input.
So for native form elements you can use register, but for external controlled components you have to use RHF's <Controller /> component. Check this section in documentation for more infos.
I have some warnings:
Warning: Legacy context API has been detected within a strict-mode tree.
The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.
Please update the following components: Transition
and
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely in ...
which I didn't have like a month ago.
<Modal
style={{position: "relative",
top: "50%",
transform: "translateY(-50%)"}}
className="fadein-elements"
isOpen={modal}
toggle={toggle}
>
<ModalHeader toggle={toggle}>Add Post</ModalHeader>
<ModalBody>
<Form onSubmit={onSubmit}>
<FormGroup>
<Label for="subject">Subject</Label>
<Input
type="text"
name="subject"
id="subject"
placeholder="Add Subject..."
onChange={onChange}
/>
<Label for="content">Content</Label>
<Input
type="textarea"
name="content"
id="content"
placeholder="Add content..."
onChange={onChange}
/>
<Button
color="dark"
style={{ marginTop: '2rem' }}
block>
Add Post
</Button>
</FormGroup>
</Form>
</ModalBody>
</Modal>
App works fine, but I always want to clear all warnings in correct way.
I assume that I have to add transition Component from react-transition-group, however I prefer to do all my transitions and animations in CSS(which for me works much better with react-waypoint).
My React version is 16.13.1
Well finally, I have two questions.
1) What is the purpose of this warning, it means why it is deprecated?
2) Where should I insert this react-group-transition Transition or how should I change this Modal to clear the errors?
I had the same issue while using Bootstrap 5 within NextJS. So I'm not sure if this is the same way you arrived at this, as you haven't mentioned, but if it's similar, you can use the same solution.
The warning is caused by not adding the CSS & JS Bundle from Bootstrap. I edited my _app.js file as below and it did the trick.
import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
import Script from 'next/script'
// add bootstrap css
import 'bootstrap/dist/css/bootstrap.css'
class App extends React.Component {
render() {
const { Component, pageProps } = this.props
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossOrigin="anonymous"
/>
</Head>
<Component {...pageProps} />
<Script
id = 'bootstrap'
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossOrigin="anonymous"
/>
</>
)
}
}
export default App
I'm trying to build on react-admin. The base structure is this:
<Show {...props} >
<SimpleShowLayout>
<TextField source="id" />
<TextField source="name" />
</SimpleShowLayout>
</Show>
I'm looking to do something like this:
<Show {...props} >
<div className="row">
<div className="col-sm-6">
<TextField source="id" />
</div>
<div className="col-sm-6">
<TextField source="name" />
</div>
</div>
</Show>
We need to update our documentation about this. We recently decoupled components with logic, that we name XXXController (ListController, CreateController, etc) in the ra-core package and UI components (List, Create, etc) in the ra-ui-materialui package which the controllers.
Think about the react-admin package as a distribution of react-admin with material-ui UI. When heavy customization is needed, you can use the controllers directly.
For now, you'll have to explore the source code to fully understand how to use them.
Here's an example:
import { ShowController, ShowView, SimpleShowLayout, TextField } from 'react-admin';
const UserShow = props => (
<ShowController {...props}>
{controllerProps =>
// You're on your own here
}
</ShowController>
);
Some elements, like the button, have native ripple effect on Ionic 2. Others like cards doesn't. How could I add support to ripple effect on an arbitrary Ionic 2 element?
Try wrapping the content like this:
<button ion-item>
<ion-item style="background: rgba(0,0,0,0);">Content</ion-item>
</button>
As I see by sources of Ionic v3.3, a container element must contain an empty div element with button-effect class, also the container must have tappable attribute and be styled as position: relative; overflow: hidden.
In my project I use a following directive to style button-like containers:
import {Directive, ElementRef, Host, Renderer2} from '#angular/core';
#Directive({
selector: '[m-ripple-effect]',
host: {
'tappable': '',
'role': 'button',
'style': 'position: relative; overflow: hidden'
}
})
export class RippleEffectDirective {
constructor(#Host() host: ElementRef, renderer: Renderer2) {
const div = renderer.createElement('div');
renderer.addClass(div, 'button-effect');
renderer.appendChild(host.nativeElement, div);
}
}
You need to use the button element
and you can still have the ion-item directive:
From:
<ion-item (click)="viewArticle()"></ion-item>
To:
<button ion-item (click)="viewArticle()"></button>
A more complete example based on the answer of Bartosz Kosarzycki:
<ion-list>
<button ion-button style="height: auto!important;width: 100%" clear >
<ion-item style="background: rgba(0,0,0,0);">
<ion-icon name="car" item-left></ion-icon>
<h1>Title 1</h1>
<p>SubtÃtulo</p>
<ion-icon name="person" item-right></ion-icon>
</ion-item>
</button>
<button ion-button style="height: auto!important;width: 100%" clear>
<ion-item style="background: rgba(0,0,0,0);">
<ion-icon name="person" item-left></ion-icon>
<h1>Title 2</h1>
<p>SubtÃtulo</p>
<ion-icon name="car" item-right></ion-icon>
</ion-item>
</button>
</ion-list>
For IONIC 4 you can now use like this:
Make sure you div position is relative.
<div
ion-activatable
class="ion-activatable"
style="position:relative;height:100px;width:100%;background:blue;">
<ion-ripple-effect></ion-ripple-effect>
Content here...
</div>
:)
On http://www.material-ui.com/#/components/app-bar it says that among the possible proprerties they support is "iconElementLeft ... element ... The custom element to be displayed on the left side of the app bar such as an SvgIcon."
What I have now isn't styled like the rest of the things on the menu bar... I'm pointing to a svg icon I found and using img attributes to try to fit it in. How could I make Material-UI style it like the native things?
export default (props)=>{
return (
<AppBar
title={<span style={styles.title}><Link to="/" className="logoLink">GIGG.TV</Link></span>}
className="header"
iconElementLeft={<img src='../../public/img/rocket.svg' height='40' width='40' alt='' />}
// showMenuIconButton={false}
iconElementRight={
<IconMenu
iconButtonElement={
<IconButton><MoreVertIcon /></IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem
linkButton={true}
primaryText="Home"
containerElement={<Link to="/" className="logoLink">GIGG.tv</Link>} />
<MenuItem primaryText="Sign in" containerElement={ <SignInModal/>} />
<MenuItem
linkButton={true}
primaryText="Login as Artist"
containerElement={<Link to="/artistSignIn" >Sign in/Up </Link>} />
</IconMenu>
}/>
)
}
Alternatively, how could I look through all the icons in the Material-UI NPM package to see if they have something native that might work?
Two ways...
Inline the svg using SvgIcon
With the SvgIcon component, you can include the required Svg assets.
Importing existing material-ui assets
Just import into a variable to use it.
import FileCloudDownload from 'material-ui/lib/svg-icons/file/cloud-download';
...
iconElementLeft={FileCloudDownload}
You will also see styling examples in the link above.
Here is the list of all; supported vector icons
https://www.materialui.co/icons
import them like this
import ModeTrain from 'material-ui/svg-icons/maps/train';
import ActionInfo from 'material-ui/svg-icons/action/info';
import ModeBUS from 'material-ui/svg-icons/maps/directions-bus';
the folder structure is
material-ui/svg-icons -->category-->iconName
Use autocompletion of VS code to fetch/search icon for you
Then use icons like below eg ModeBUS
<ListItem
leftAvatar={<Avatar icon={<ModeBUS />} />}
rightIcon={<ActionInfo />}
primaryText="Recipes"
secondaryText={
<p>
<span >
From: Station
<br />
</span>
<span>
To: Station
<br />
</span>
</p>
}
secondaryTextLines={8}
/>