<DropzoneAreaBase
fileObjects={files}
onAdd={handleAdd}
onDelete={handleDelete}
/>
I'm trying to use DropzoneAreaBase component from material-ui-dropzone library.
Related
Using Material-UI 4.5.2. I'm adding an end adornment and want to change the right padding so that the icon would be in a right most position. I tried to override it with classes property but couldn't make it. https://codesandbox.io/s/textfield-adornedend-wf5p8
Thanks in advance
You need to provide adornedEnd class rule to InputProps:
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton disableRipple={true} size="small">
<ClearIcon />
</IconButton>
</InputAdornment>
),
classes: {
adornedEnd: classes.endAdornment
}
}
}
In my app, the expansion arrow has to be in the left side of the panel.
But, by default it's displaying in the right side.
This :
<ExpansionPanelSummary
className={classes.panelSummary}
expandIcon={<ExpandMoreIcon />}
IconButtonProps={{edge: 'start'}}
aria-controls='panel1a-content'
id='panel1a-header'
>
Doesn't made it.
Granted, you can't (easily) change the order in which the components appear in the HTML. However, there is a way using only CSS. ExpansionPanelSummary uses display: flex; you can therefore set the order property on the icon to make it appear to the left of the content.
This can be achieved with either useStyles or withStyles (Or possibly using plain CSS, but I haven't tried it); here's how you'd go about using the latter:
import withStyles from "#material-ui/core/styles/withStyles";
const IconLeftExpansionPanelSummary = withStyles({
expandIcon: {
order: -1
}
})(ExpansionPanelSummary);
You can then write the rest of your code using IconLeftExpansionPanelSummary instead of ExpansionPanelSummary when you want the icon to appear to the left. Don't forget to set IconButtonProps={{edge: 'start'}} on the component for proper spacing.
<AccordionSummary
className={classes.accordionSummary}
classes={{
expandIcon: classes.expandIcon,
expanded: classes.expanded
}}
IconButtonProps={{
disableRipple: true
}}
></AccordionSummary>
You can add class and use flex-direction
accordionSummary: {
flexDirection: 'row-reverse'
}
It's simple
add class on <ExpansionPanelSummary> like this
<ExpansionPanelSummary className={classes.panelSummary}>
add css against this class in jss like this
panelSummary:{flexDirection: "row-reverse"},
In case using css
add class on <ExpansionPanelSummary> like this
<ExpansionPanelSummary className="panelSummary">
add css against this class in jss like this
.panelSummary{flex-direction: row-reverse;}
you can get the expansion panel icon on left by removing it from expandIcon and add it as a children in Summary something like this
<ExpansionPanel defaultExpanded={true}>
<ExpansionPanelSummary aria-controls="panel1a-content">
{this.state.expanded ? <RemoveIcon/> : <ExpandIcon />}
<Typography component='h4' variant='h4'>My Expansion Panel</Typography>
</ExpansionPanelSummary>
<ExpansionPanelsDetails />
</ExpansionPanel>
The challenge is that the order is hardcoded into the codebase and you will not be able to use the ExpansionPanel as is.
If you look at the implementation, you will find the code as below
<div className={clsx(classes.content, { [classes.expanded]: expanded })}>{children}</div>
{expandIcon && (
<IconButton
disabled={disabled}
className={clsx(classes.expandIcon, {
[classes.expanded]: expanded,
})}
edge="end"
component="div"
tabIndex={-1}
aria-hidden
{...IconButtonProps}
>
{expandIcon}
</IconButton>
)}
As you see the <div> contains the text and then the IconButton is displayed.
So, you may have to work with what's provided out of the box or create your own Component based on what material-UI provides.
Hope that helps.
You can modify the CSS class like this:
notice the absolute position, in this way you can move the div that contains the icon whatever position you want with 'left' or 'right' properties
const useStyles = makeStyles((theme) => ({
ExpansionPanelSummaryExpandedIcon: {
'& div.MuiExpansionPanelSummary-expandIcon': {
position: 'absolute',
right: '5%',
},
}
}));
and then use in the ExpansionPanelSummary
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1bh-header"
className={classes.ExpansionPanelSummaryExpandedIcon}
>
references:
https://cssinjs.org/?v=v10.3.0
https://v4-8-3.material-ui.com/customization/components/#overriding-styles-with-classes
I am displaying images in my page so i am using Image control
<m:Image src="{path: 'MyModel>Link', formatter:'.formatter.imageFormatter' }" visible= "true" alt="{i18n>picname}"></m:Image>
and the formatter
imageFormatter: function(val) {
return val;
},
when i see the network in the debbuger the image is loaded perfectlly with status 200 and when i see preview it is an empty image But in My page nothing is displayed (When i open the image in other tab when i go back to my app all images are displayed )
I Don't know the problem
Set the "densityAware" property to false in the sap.m.Image control and try again
Simon.
Set a value in the Column Header - e.g.: (please namespace correctly - you need to prefix with m:)
<Column
hAlign="Center"
visible="true"
width="145px">
<Text text="Image"/>
</Column>
Not doing so may be having consequences you are not anticipating.
Also, to me, your cells collection seems incorrect - can you try:
<m:items>
<m:ColumnListItem type="Navigation" detailPress="onEdit">
<m:cells>
<m:Image src="{path: 'MyModel>Link', formatter:'.formatter.imageFormatter' }" visible="true" alt="{i18n>picname} />
</m:cells>
</m:ColumnListItem>
</m:items>
I am using a list that prints data from a model and one should have an icon. The thing is that the icon changes depending on the value and I should also change its color.
I have in my view :
<ObjectListItem title="State" type="Active" number="{/Data/8/state}"
icon="{= ${/Data/8/state}.toUpperCase() === 'OK' ? 'sap-icon://accept' :
'sap-icon://decline' }"></ObjectListItem>
Options like addStyleClass doesn't seem to work. I have changed the color by adding css to the id that SAP adds to the Icon, but since it has to change according to the value I don't know how to achieve it.
Another option was to add color directly to these two icons but I wasn't able to add the classes.
You can use CustomData and then create a css selector to match it:
<ObjectListItem title="State" type="Active" number="{/Data/8/state}"
icon="{= ${/Data/8/state}.toUpperCase() === 'OK' ? 'sap-icon://accept' :
'sap-icon://decline' }">
<customData>
<core:CustomData writeToDom="true" key="class" value="{= ${/Data/8/state}.toUpperCase()}" />
</customData>
</ObjectListItem>
This will render your control with an additional data-class attribute (actually, data-{key}, where key is the key that you defined on your core:CustomDatatag).
You can then match that with the CSS selector
[data-class='OK'] {
color: blue !important;
}
[data-class='NOT-OK']{
color: red !important;
}
I want to implement responsive image rendering according to the different scale (media) in TYPO3 using sourceCollection?
<picture>
<source src="fileadmin/_processed_/imagefilenamename_595cc36c48.png"
media="(max-device-width: 600px)" />
<source src="fileadmin/_processed_/imagefilenamename_42fb68d642.png"
media="(max-device-width: 600px) AND (min-resolution: 192dpi)" />
<img src="fileadmin/_processed_/imagefilenamename_595cc36c48.png" alt="" />
</picture>
I can render it using TypoScript but how can i use this in my own extension?
Thanks in advance.
The most straight-forward way is to use TypoScript. In the example below we use the same configuration I use for tt_content to render News items.
First of all you need to define a TypoScript object that uses the file that is passed to the object. Then you copy the configuration that is used for tt_content.
lib.responsiveImage {
default = IMAGE
default {
file.import.current = 1
altText.data = field:altText
titleText.data = field:titleText
layoutKey = picturefill
layout.picturefill < tt_content.image.20.1.layout.picturefill
sourceCollection < tt_content.image.20.1.sourceCollection
}
}
(You may need to change the example to another layout if you don't want to use picturefill.)
Then, in Fluid, you pass the image to TypoScript. The example below maps the uri of a FileReference:
<f:alias map="{image: {uri: '{f:uri.image(src:\'{mediaElement.uid}\', treatIdAsReference:\'1\')}', altText: mediaElement.originalResource.alternative, titleText: mediaElement.originalResource.title}}">
<f:cObject typoscriptObjectPath="lib.responsiveImage.default" data="{image}" currentValueKey="uri" />
</f:alias>
You can also define other configuration, e.g.
lib.responsiveImage {
default = IMAGE
default {
[...]
}
newsDetail < .default
newsDetail {
[different configuration for type newsDetail]
}
}