I have a this custom toolbar and I want to change the display copy, but I don't see a prop on the <GridToolbarColumnsButton /> that will let me do that. Does anyone know how to change the text and icon on the <GridToolbarColumnsButton /> component.
function CustomToolbar() {
return (
<GridToolbarContainer>
<GridToolbarColumnsButton />
<GridToolbarFilterButton />
</GridToolbarContainer>
);
}
For the text, you can override the locals via the localeText prop of the DataGrid component
For the other props of this component, you will have to provide your own toolbar. It is a very basic component so copy pasting it is not a big issue.
Here is an example: https://codesandbox.io/s/datagrid-v5-quick-start-forked-d3s3r?file=/src/App.tsx
Related
I'm working on making my app more accessible and am struggling with the MUI Dialog component. I'm using the DialogTitle component, which creates an H2 element and am getting an issue of "page doesn't contain a level-one heading". Should I be creating my modal in some other way, or are MUI Dialogs just not accessible?
import { Dialog, DialogTitle } from '#mui/material';
const MyModal = () => {
return (
<Dialog open={true}>
<DialogTitle>
My Title
</DialogTitle>
</Dialog>
);
};
export default MyModal;
Updated for MUI v5:
The Dialog component API includes a helper DialogTitle component which, by default, renders its contents within an h2 element. To change this functionality, you can pass the component property to the DialogTitle to have the DialogTitle rendered using whatever elementType that you wish. For example:
<DialogTitle component="h1">
My Dialog Title
</DialogTitle>
This is currently an undocumented feature of DialogTitle, but it can been seen in the source code that properties that are passed to DialogTitle are spread onto the underlying Typography component -- By passing component, you are essentially overwriting the hardcoded component="h2" prop with your own value.
Working example: https://codesandbox.io/s/simpledialog-material-demo-forked-kpq9k?file=/demo.js
Original answer for MUI v4:
The Dialog component API includes a helper DialogTitle component which, by default, renders its contents within an h2 element. To disable this functionality, you can use the DialogTitle component with the disableTypography prop (to disable the h2 wrapping behavior) and then include your own Typography component set to h1. For example:
<DialogTitle disableTypography>
<Typography variant="h1">My Dialog Title</Typography>
</DialogTitle>
Working example: https://codesandbox.io/s/material-demo-forked-7pso2?file=/demo.js
Extra Credit: You may then come across the problem that the h1 is styled "too large" for your design. If so, and you prefer the h2 look, you can use the Typography prop named component in combination with the variant prop to visually style it back to an h2, while maintaining the underlying h1 element. For example:
<DialogTitle disableTypography>
<Typography variant="h2" component="h1">My Dialog Title</Typography>
</DialogTitle>
In the case of TypeScript there's no typing provided so you need to do a hack:
<DialogTitle {...{ component: 'div' } as any}>
<Typography variant="h1">My Dialog Title</Typography>
</DialogTitle>
This is a temporary hack until they add the typing for all the props there.
As #Steve mentionned, in Mui v5, the job is harder. Even if you specify a component prop (which won't work in TS, moreover it's a bad practice), it won't change the style as it renders a h2 with a h6-style.
The cleanest workaround would be to mess with CSS (in a styled component for eg)
// Styling
import { styled } from "#mui/system";
// UI
import { DialogTitle as MuiDialogTitle } from "#mui/material";
const DialogTitle = styled(MuiDialogTitle)(({ theme }) => ({
"&.MuiDialogTitle-root.MuiTypography-root": {
fontSize: 25,
fontWeight: "bold",
},
}));
I would like to know how to get the content of TextArea, assign the value to a variable, set it to a model, and then set the variable to another TextArea in another view. I have coded some examples and it works, but not on TextArea.
Here is the example code:
// In init of the Component.js
this.setModel(new JSONModel(), "TransportModel"); // JSONModel required from "sap/ui/model/json/JSONModel"
// In *.controller.js
this.getView().getModel("TransportModel").setProperty("/", {
"Serial": this.byId("mat_serial").getValue() // "mat_serial" == id of the Input box in XML view
});
In the last step, I set the Text from a different View (also XML and Input Box) with the Value of the Model Element.
<Text text="{TransportModel>/Serial}" />
That worked pretty well.
But how to do the same with the TextArea? How can I do it based on this model? The value that I want to use from the first TextArea should also be on a TextArea in another view.
UI5 supports two-way data binding. I.e. if the user changes something in the UI (e.g. user types something in the text area), that change will be reflected automatically in other bindings that listen to the change.
<!-- In view 1 -->
<TextArea value="{TransportModel>/Serial}" />
<!-- In view 2 -->
<Text text="{TransportModel>/Serial}" />
No need to get input values by hand. Simply let the framework synchronize the value.
How to use a local json model:
Create
initItemViewModel: function () {
return new JSONModel({
Serial: ""
});
}
this._oViewModel = this.initItemViewModel();
this.setModel(this._oViewModel, "TransportModel");
Using
this.getView().getModel("TransportModel").setProperty("/Serial", serial);
<Text text="{TransportModel>/Serial}" width="auto" maxLines="1"/>
I have tried selecting clearButton prop for a single selection input. However it does not work as expected. The clear (x) icon does not appear with a default selected input. It appears only once there is an event change, that is if I select some other input. My problem is that removing the input manually does not trigger a change in the selected value. Any pointers would be appreciated.
<Typeahead
clearButton
defaultInputValue={props.city}
options={props.cityOptions}
onChange={(selected) => handleCityFieldChange(selected[0], props)}
placeholder="Choose a city"
/>
Here's the handleCityFieldChange function:
handleCityFieldChange = (selected, props) => {
const newFieldValues = Object.assign({}, props.fieldValues, {"city": selected});
props.onChange(newFieldValues);
};
Use defaultSelected, not defaultInputValue:
<Typeahead
clearButton
defaultSelected={props.city}
options={props.cityOptions}
onChange={(selected) => handleCityFieldChange(selected[0], props)}
placeholder="Choose a city"
/>
The clear button only appears when there is a selection. defaultInputValue sets the value of the input, without actually selecting an option, which is why you weren't seeing the button.
Note: defaultSelected expects an array, so if props.city is an object, you'll need to pass [props.city].
I'm using redux-form-material-ui for the forms. I have simple form with two text fields. This form will show the initalValues passed to it and user can also update the values of TextField. These TextFields working fine with validations and all but I'm facing problem while re-rendering. On route change, I'm passing the different intialValues to that form component but even though proper values passed to it, TextFields are not getting updated. It just shows the first time passed initialValues.
Here is my code:
From parent component:
<ReduxForm {...initialValues} />
ReduxForm component:
class ReduxForm extends React.Component {
render () {
return (
<div>
<form onSubmit={() => console.log('Submitted')} >
<Field
className='input-field'
name='name'
component={TextField}
floatingLabelText='Full Name'
/>
<Field
className='input-field'
name='email'
component={TextField}
floatingLabelText='Email'
/>
</form>
</div>
)
}
}
export default reduxForm({
form: 'test-form',
validate
})(ReduxForm)
I Know that, this is the same problem with defaultValue in material-ui's TextField. Is this expected behavior in redux-form-material-ui also? If so, is there way I can solve this issue without setting the state and all?
Thank you!
Haven't used redux-form-material-ui but try adding enableReinitialize: true to your reduxForm decorator
export default reduxForm({
form: 'test-form',
validate,
enableReinitialize: true
})(ReduxForm);
And see if that works.
Somewhere in materialize.min.css the slider class is getting its height assigned. I am simply not able to override this.
What I tried is to set the height in the constructor of my widget:
public class HomeViewImpl extends Composite implements HomeView {
public HomeViewImpl() {
initWidget(uiBinder.createAndBindUi(this));
int height = Window.getClientHeight();
slider.getElement().getStyle().setHeight(height, Unit.PX);
}
}
I also tried to overwrite it in my own css file and I also tried to override Widget.onLoad() with the same result. I can resize the slider afterwards but not on when its actually loaded. Since I want it to use up the entire available space it has to be resized "on load".
Please note that setting fullscreen="true" is not an option since this would mess up the arrangement of my parallax effect I am using here as well.
<m:MaterialSlider ui:field="slider" fullscreen="false">
<m:MaterialSlideItem height="100%">
<m:MaterialImage url="http://mayastepien.nl/googlecalendar/google-drinks.jpg" />
<m:MaterialSlideCaption textAlign="CENTER">
<m:MaterialTitle title="This is our big Tagline" description="Here's our small slogan." />
</m:MaterialSlideCaption>
</m:MaterialSlideItem>
<m:MaterialSlideItem height="100%">
<m:MaterialImage url="http://dreamatico.com/data_images/car/car-1.jpg" />
<m:MaterialSlideCaption textAlign="CENTER">
<m:MaterialTitle title="This is our big Tagline" description="Here's our small slogan." />
</m:MaterialSlideCaption>
</m:MaterialSlideItem>
</m:MaterialSlider>
According to the source code in
https://github.com/GwtMaterialDesign/gwt-material/blob/master/gwt-material/src/main/java/gwt/material/design/client/ui/MaterialSlider.java
..you can set the height attribute on MaterialSlider too (in your UiBinder xml).
You probably know this, but relative height only works when the height of parent elements is set too.
See for instance
Make div 100% height of browser window