can't use link tag inside material tab tag in material ui
none of codes inside Tab doesn't work
<Tabs>
<Tab>
<Link
style={isActive(history, "/cart")}
to="/cart"
>
Cart{" "}
<sup>
<small className="cart-badge">{itemTotal()}</small>
</sup>
</Link>
<Tab/>
<Tabs/>
By the documentation Tab doesn't support children. Instead you can use component prop.
https://material-ui.com/api/tab/#props
<Tabs>
<Tab
component={() => (
<Link
style={isActive(history, "/cart")}
to="/cart"
>
Cart{" "}
<sup>
<small className="cart-badge">{itemTotal()}</small>
</sup>
</Link>
)}/>
</Tabs>
Related
i'm looking for a way to add a text between the button of 'semantic:negativeAction' and the button of 'semantic:positiveAction' in the footer of a semantic content within a semantic page of 'sap.f.semantic' .
<semantic:positiveAction>
<semantic:PositiveAction text="+"/>
</semantic:positiveAction>
<semantic:negativeAction>
<semantic:NegativeAction text="-" />
</semantic:negativeAction>
Have you considered using customFooterContent aggregation in semantic page for footer
<semantic:customFooterContent>
<Button text="Approve" type="Accept" press="onAcceptPress"/>
<Label text="Test Text between two buttons"></Label>
<Button text="Reject" type="Reject" press="onRejectPress"/>
</semantic:customFooterContent>
Link:
https://sapui5.hana.ondemand.com/#/api/sap.m.semantic.SemanticPage
I have a problem in switching component. It's too slow to switch animation, there are more delays than 1000ms.
My Component structure looks like this:
<div>
<Tabs
value={value}
onChange={this.handleChange}
>
<Tab label="Item One" />
<Tab label="Item Two" />
</Tabs>
{value === 0 && <TabContainer>Item One</TabContainer>}
</div>
The component is a complex component, where there are many data needs to be displayed.
I want the < Tab > component to complete the switching animation immediately, instead of waiting to happen with the < TabContainer > component.
Examine this
<a href="${mybean.href}" data-sly-test="${mybean.href}">
<img src="myimage.jpg" />
</a>
What we need
when data-sly-test="${mybean.href}" evaluates to false, only hide the anchor tag, and not its child elements. The default behavior is that the img tag will disappear also when the anchor tag disappears. We only want to hide the wrapper tag.
I expect some paramater like this
<a href="${mybean.href}" data-sly-test="${mybean.href # hideChildren=false}">
<img src="myimage.jpg" />
</a>
You can use the data-sly-unwrap in your anchor tag as shown below example where mybean.href true result removing of the anchor tag and producing only <img src="myimage.jpg" />
Example
<a href="http://www.google.com" data-sly-test="${mybean.href}" data-sly-unwrap>
<img src="myimage.jpg" />
</a>
For your case the following solution should work
<a href="${mybean.href}" data-sly-unwrap="${!mybean.href}">
<img src="myimage.jpg" />
</a>
I have an sap.m.Select control for a list of countries and I need to put flag near everyone. How can I do it? In XML, if it's possible.
Here is my XML code:
<m:Label text="{i18n>COUNTRY}" />
<m:Select width="100px"
fieldWidth="60%"
class="xcuiInputNoMargin"
enabled="{Edit>/EditOn}"
items="{countryList>/}"
>
<core:Item
key="{countryList>Country}"
text="{countryList>Country} - {countryList>Name}"
/>
</m:Select>
The sap.m.Select Object is restricted to display text (or Like #Jasper_07 said) icon only.
I think that the best solution for your problem is to use another object instead of your select. You can use Select Dialog and put inside whatever you want, like listItem with image.
This is an example:
<SelectDialog
noDataText="No Products Found"
title="Select Product"
search="handleSearch"
confirm="handleClose"
close="handleClose"
items="{
path: '/ProductCollection'
}" >
<StandardListItem
title="{Name}"
description="{ProductId}"
icon="{ProductPicUrl}"
iconDensityAware="false"
iconInset="false"
type="Active" />
</SelectDialog>
see link bellow
As of UI5 version 1.62, the following controls support displaying the icon on the left side.
sap.m.Select
sap.m.SelectList
And other controls based on the above mentioned ones, such as sap.m.ComboBox.
Here is an example:
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
], XMLView => XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
<Select xmlns="sap.m" xmlns:core="sap.ui.core" class="sapUiTinyMargin">
<core:ListItem text="Paper plane" icon="sap-icon://paper-plane" />
<core:ListItem text="Stop Watch" icon="sap-icon://fob-watch" />
<core:ListItem text="Umbrella" icon="sap-icon://umbrella" />
</Select>
</mvc:View>`
}).then(view => view.placeAt("content"))));
<script id="sap-ui-bootstrap"
src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m"
data-sap-ui-preload="async"
data-sap-ui-async="true"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="true"
data-sap-ui-xx-xml-processing="sequential"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
Keep in mind to use sap.ui.ListItem as an aggregation child in this case, instead of sap.ui.core.Item.
Limitation
Currently, the icon property only allows resource paths from "sap-icon://*". I.e. images, that are not icons such as country flags, are not possible. A possible workaround would be to make use of emoji flags as additionalText.
Otherwise, I'd recommend to look for alternative controls as shmoolki suggested.
from the documentation of sap.m.Select
The URI to the icon that will be displayed only when using the
IconOnly type
seems limiting, but try
<m:Select
type="sap.m.SelectType.IconOnly"
icon="sap-icon://cart">
</m:Select>
I am creating a tabPanel in GWT Uibinder
<g:TabLayoutPanel ui:field="tabPanel" barUnit='PX'
barHeight='40' width="100%" height="100%">
<g:tab>
<g:header size='7' >
My tab Name
</g:header>
<g:HTMLPanel ui:field="tabConfiguration" >
<div>
</div>
</g:HTMLPanel>
</g:tab>
<g:tab>
Now when i try to put my internationalized text it doesnt work :
<g:TabLayoutPanel ui:field="tabPanel" barUnit='PX'
barHeight='40' width="100%" height="100%">
<g:tab text = "{i18n.CONFIGURATION}">
<g:header size='7' >
My tab Name
</g:header>
<g:HTMLPanel ui:field="tabConfiguration" >
<div>
</div>
</g:HTMLPanel>
</g:tab>
<g:tab>
It simply gives me an empty tab , with no name
any work around for this .
Please not : in this file if i apply this same I8n text to any other widget its works perfectly.
<g:tab is not a widget, but a uibinder child element of TabLayoutPanel. Therefor you can't use it as a widget. To make it work with plain text you need to set the text in the header element with <ui:text ..> on the same place as in your first example:
<g:header size='7' >
<ui:text from="{i18n.CONFIGURATION}" />
</g:header>