How to add inline style in this given code? I just want to add an extra style when sideListMenu === 'addNoteMenu'
Here is my code..
<div className="dashboard-side-list-menu_content">
{sideListMenu === 'additionMenu' && <DashboardAdditionMenu onHideSideListMenu={onHideSideListMenu} onShowSideListMenu={onShowSideListMenu} patientDetails={patientDetails} />}
{sideListMenu === 'actionMenu' && <DashboardActionMenu onHideSideListMenu={onHideSideListMenu} onShowSideListMenu={onShowSideListMenu} patientDetails={patientDetails}/>}
{sideListMenu === 'addPatientMenu' && <DashboardAddPatient onHideSideListMenu={onHideSideListMenu} />}
{(sideListMenu === 'addInsuranceMenu' && patientId) && <DashboardAddInsuranceMenu onHideSideListMenu={onHideSideListMenu} patientId={patientDetails.PatientNotesDocsModel.PatientInfo.PatientID} patientDetails={patientDetails}/>}
{(sideListMenu === 'addDocumentMenu' && patientId) && <DashboardAddDocumentMenu onHideSideListMenu={onHideSideListMenu} patientId={patientDetails.PatientNotesDocsModel.PatientInfo.PatientID} />}
{(sideListMenu === 'addNoteMenu' && patientId) && <DashboardAddNoteMenu onHideSideListMenu={onHideSideListMenu} patientId={patientDetails.PatientNotesDocsModel.PatientInfo.PatientID} />}
</div>
You Can Use internal style
DashboardAdditionMenu{
/*Your style here*/
}
DashboardActionMenu {
/*Your style here*/
}
Inline styles can be given to a Tag using:
<div style={{color: 'red', fontSize: '20px'}}>Hello There!!</div>
If you are looking to add a style conditionally,
pass the style via props based on your condition.
Related
All the details are displaying correctly. I want to change the background colour and the width of the tooltip.
css file code for the tooltip
> .discountTooltip {
$tooltip-max-width: 250px;
$tooltip-bg:white
}
reactJS file code for the tooltip.Here please let me know whether I can change those using the CSS file or in another way
> <CTooltip className="discountTooltip"
content={
<>
<CTable align="right" className="mb-0 mt-3 border-1" hover responsive bordered>
<CTableHead color="dark">
<CTableRow className="bannerItemsHeader">
<CTableHeaderCell className="text-start">
All Rules
</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
{item?.data?.map((rule, index) => (
<CTableRow v-for="item in tableItems" key={index}>
{rule?.discountType === 'FLAT_RATE' ? (
<CTableDataCell className="text-center p-0">
<CRow className="m-0 p-0 ">
<CCol className="p-0"></CCol>
{`${rule.trxStartAmount}-${rule.trxEndAmount} Rs ${props.rewardType === 'Discount'
? rule.discountValue
: rule.bonusValue
}.00`}
</CRow>
</CTableDataCell>
) : (
<CTableDataCell className="text-center p-0">
<CRow className="m-0 p-0 ">
<CCol className="p-0"></CCol>
{`${rule.trxStartAmount}-${rule.trxEndAmount} ${props.rewardType === 'Discount'
? rule.discountValue
: rule.bonusValue
}% Max Rs ${props.rewardType === 'Discount'
? rule.maxDiscountValue
: rule.maxBonusValue
}.00`}
</CRow>
</CTableDataCell>
)}
</CTableRow>
))}
</CTableBody>
</CTable>
</>
}
placement="bottom"
>
<CCol>{item.type} </CCol>
{/* <span className="template-content">{item.discountType}</span>
*/}
</CTooltip>
import Footer from "./Footer";
import Navigation from "./Navigation";
import { useRouter } from "next/router";
function Layout({ children }) {
const router = useRouter();
return (
<>
{router.pathname !== "/*" && <Navigation />}
{/* {router.pathname !== "*" && <Navigation />} */}
<main className="main-content">{children}</main>
{router.pathname !== "/*" && <Footer />}
{/* {router.pathname !== "*" && <Footer />} */}
</>
);
}
export default Layout;
Unfortunately the methods with an asterisk do not work :/ ?!?
Thank you in advance and best regards for everyone ;-)
If you are not using a custom 404 page, the default router.pathname is _error so
{router.pathname !== "/_error" && <Navigation />}
should work.
If you are using custom 404 page (404.js inside /pages) router.pathname is /404.
If you reuse the built in error page router.pathname inside your page or component router.pathname would be the current page path.
Ex :
import Error from 'next/error'
const MyPage = ({isError = true})=>{
// pagepath would be something like pages/mypage
return isError ? <Error statusCode={"404"} /> : <p>My page </p>
}
export default MyPage
In this case both methods mentioned above wont work.
However i would not recommended to use this method.
I decided to add this code to serve other people who encounter the same problem. In my case, when we have custom 404 page , the solution looks like this =>
import Footer from "./Footer";
import Navigation from "./Navigation";
import { useRouter } from "next/router";
function Layout({ children }) {
const router = useRouter();
return (
<>
{router.pathname !== "/404" && <Navigation />}
<main className="main-content">{children}</main>
{router.pathname !== "/404" && <Footer />}
</>
);
}
export default Layout;
I am trying to change the style (colors) of elements in list items as they are created from a map function, which provides the rgb-color.
Using classes works, but to get it right dynamically, sofor the data/color provided by the object array is a problem.
The attempts beneath do show e.g. fill="rgb(48, 183, 0)", but the classes which define it's style still override the dynamically added style
<Select
multiple
value={filterList[index]}
renderValue={(selected) => selected.join(", ")}
onChange={(event) => {
filterList[index] = event.target.value;
onChange(filterList[index], index, column);
}} >
{ processStatusColorsArr.map(({ id, name, color} ) =>(
MenuItem key={id} value={name} style={{ fill: `${color}%`, color: `${color}%` }} >
<Checkbox
fill={color} style={{ fill: `${color}%`, color: `${color}%` }} />
<ListItemText primary={name}
color= {color} />
<IconButton color={color}
fill={color}
style={{ fill: `${color}%`, color: `${color}%` }} />
</MenuItem>
))}
</Select>
I have also tried this,
{render_filter_process_status_colors(color)} in place of '<IconButton ..../>'
where I have (above this)
const render_filter_process_status_colors = (value, tableMeta, updateValue) => {
if(value === undefined) return;
return (
<div>
<FontAwesomeIcon icon={"square"} style={value} size={"lg"} fixedWidth/>
</div>
);
}
but no luck.
Thx
By using the function
{render_filter_process_status_colors(color)}
which is defined as
const render_filter_process_status_colors = (value, tableMeta, updateValue) => {
if(value === undefined) return;
const iconColor = {color: value}
return (
<div>
<FontAwesomeIcon icon={"square"} style={iconColor} size={"lg"} fixedWidth/>
</div>
); }
I get the icon with the color from my array of rgb colors.
I am trying to change the index 5 and 6 to opacity 0.2 but I do not know how to change specific className when mapping in react
Here is my following code:
const tabs = [
"Mission",
"Agreement",
"Calendar",
"Managers",
"Members",
"Invitees",
"Applicants",
"Sub-Team",
];
const [activeTab, setActiveTab] = useState(0);
<div className="team-management-tab-items">
{tabs.map((tab, index) => (
<div
className={
activeTab === index
? "team-management-tab-item selected"
: "team-management-tab-item"
}
key={tab}
role="button"
tabIndex={tab}
onKeyPress={() => {
return;
}}
onClick={() => {
if (editable === true) {
setActiveTab(index);
} else if (index !== 5 && index !== 6) {
setActiveTab(index);
}
}}
>
<span className="tab-item-text">{tab}</span>
<span className="tab-item-indicator" />
</div>
))}
</div>
</div>
<div className="team-management-tab-panes">
{tabs[activeTab] === "Mission" && (
<Mission
editable={editable}
teamId={teamId}
teamData={teamData}
fetchTeamData={fetchTeamData}
/>
)}
{tabs[activeTab] === "Agreement" && (
<Agreement
teamData={teamData}
agreement={agreement}
editable={editable}
teamId={teamId}
fetchTeamData={fetchTeamData}
/>
)}
...
);
Here is how my project look like:
So basically I want to change opacity Invitees and Applicants to 0.2. How can I do that?
There are a few ways to do this, the easiest would likely be adding an id tag to the div like:
{tabs.map((tab, index) => (
<div
id = {tab}
className={
activeTab === index
? "team-management-tab-item selected"
: "team-management-tab-item"
}
and then in your css just add
#Invitees, #Applicants{
opacity: 0.2;
}
In my XML view for one of the fields I want to display "Yes" if value from Model parts is "S" or "P" and for rest of all the values want to display "No".
text="{= ${order>/parts} === 'S' ? "Yes" : ${order>/parts} === 'P' ? "Yes" : "No} }"/>
Also, how to write -
if ${order>/parts} has "S" AND ${order>/stock} has "A" then display Yes else No in the similar notion like above?
You should read about formatters, which are exactly what you require
I tried this small example and it works just fine. Maybe because you use double quotes in both opening the text property and at the values ("Yes" and "No"). Try replacing the " with ' in your values. If that doesn't work, you should check if {order>/parts} is not undefined.
View
<Input value="{= ${test1} === 'S' ? 'Yes' : ${test1} === 'P' ? 'Yes' : 'No'}" />
<Input value="{= ${test1} === 'S' ? ${test2} === 'P' ? 'Yes' : 'No' : 'No' }" />
or
<Input value="{= ${test1} === 'S' || ${test1} === 'P' ? 'Yes' : 'No'}" />
<Input value="{= ${test1} === 'S' && ${test2} === 'P' ? 'Yes' : 'No'}"/>
Controller
onInit: function() {
var oModel = new sap.ui.model.json.JSONModel({
test1: "S",
test2: "P"
});
var bindingContext = new sap.ui.model.Context();
bindingContext.oModel = oModel;
bindingContext.sPath = "/";
this.getView().setBindingContext(bindingContext);
this.getView().setModel(oModel);
}
Hope this will help you
<Input value="{= (${order>/parts} === 'S' || ${order>/parts} === 'P') ? 'Yes' : 'No' }" />
<Input value="{= (${order>/parts} === 'S' && ${order>/stock} === 'A') ? 'Yes' : 'No' }" />
It helped me too.
In my case it was using icons:
<Button icon="{= ${Approved} === true ? 'sap-icon://accept' : 'sap-icon://approve'}" press="onApproveProduct" />