I've changed 'medium' font size with loadTheme like such:
loadTheme({
fonts: {
medium: {
fontFamily: fonts.fontFamily,
fontSize: fonts.fontSize.regular
}
}
)
However, the base Checkbox styles are loading font-size directly from FontSizes here:
https://github.com/OfficeDev/office-ui-fabric-react/blob/ace874ab7e56188a7d6de081915c63025def4e05/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts#L223
I know I can override this on the component itself, but it seems like I shouldn't have to. Is this a bug? Shouldn't the component use theme font size by default?
Yes, Checkbox should be reading font from theme. In fact, in the fabric-7 branch, it does:
https://github.com/OfficeDev/office-ui-fabric-react/blob/14b1d77fc97fffb1c333a3601d62c3e30c4cf3b0/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts#L136
Fabric 7 release is planned for May. Meanwhile you should be able to apply your own styling making use of the loadTheme call like this:
const checkboxStyling = (props) => {
return {
text: { ...props.theme.fonts.medium }
}
}
...
<Checkbox label='test' styles={checkboxStyling} />
This works in the following CodePen: https://codepen.io/jasongore/pen/JVwJGO
Related
I have a situation in which I want to display data in a FluentUI DetailsList, where column names can be very long, while the column content can be very narrow. In such a case, the header will be truncated.
See this codepen.
Is there any way to change this behavior, such that the header text wraps over multiple lines?
While I found this unanswered question from 2 years ago, I couldn't find an answer on the topic on neither Stackoverflow, Github or the offical documentation.
Here are some approaches I tried:
inject a CSS class with word-break: break-all; via the headerClassName field of IColumn
setting isMultiLine on the columns
The DetailsHeader component itself whose rendering I can override with onRenderDetailsHeader does not seem to offer any props for customizing how the text is displayed
Is there even a way to achieve the desired behaviour (wrapping over multiple lines instead of truncating long column headers)?
Most of FluentUI Components uses text-overflow: ellipsis. What you can do is to modify that "rule". Inside DetailsList you have onRenderDetailsHeader method which allows you to change header styles.
const onRenderDetailsHeader = (headerProps, defaultRender) => {
if (!headerProps || !defaultRender) {
//technically these may be undefined...
return null;
}
return defaultRender({
...headerProps,
styles: {
root: {
selectors: {
'.ms-DetailsHeader-cell': {
whiteSpace: 'normal',
textOverflow: 'clip',
lineHeight: 'normal',
},
'.ms-DetailsHeader-cellTitle': {
height: '100%',
alignItems: 'center',
},
},
},
},
})
}
<DetailsList
...
onRenderDetailsHeader={onRenderDetailsHeader}
/>
Codepen working solution
Note:
Play around with minWidth, maxWidth props inside this._columns to get expected behavior.
Since the title attempts to address every part of my question, which is very difficult, I need to clearify a bit:
I want to be able to apply a theme to my Office UI Fabric application with all the different color shades an Office UI Fabric theme should have, without having to define each shade myself. The only things I want to define are the primary theme color, the body text color and the body background color. This is just what the theme generator on the Office UI Fabric website does.
So to get to the point: Is it possible to use the functionality of the theme generator in any Office UI Fabric application?
My naive approach was to use createTheme, since it accepts a partial theme, and I hoped to get a full one back:
const theme = createTheme({
palette: { themePrimary: '#007610' },
semanticColors: { bodyBackground: '#ffffff', bodyText: '#000000' },
});
loadTheme(theme);
Alas, this wasn't the case. Only the properties provided are applied.
So is there a simple (official) way to do this or are the sources of the theme creator available somewhere?
So after some investigation of the ColorPage.tsx from the Office UI Fabric repository I found the missing pieces to achieve this myself. The code below is just a very simple usage of that mechanism, that suffices my needs. For now, I don't want the user to change the main background or foreground colors, hence the simplifications. Use and extend it at your own risk, but feel free to ask me, if something isn't clear. But I guess its rather clear what's going on here.
import { loadTheme } from '#uifabric/styling';
import {
IThemeRules,
ThemeGenerator,
themeRulesStandardCreator,
} from 'office-ui-fabric-react/lib/ThemeGenerator';
import { getColorFromString } from 'office-ui-fabric-react/lib/utilities/color/getColorFromString';
import { IColor } from 'office-ui-fabric-react/lib/utilities/color/interfaces';
export default class ThemeProvider {
private themeRules: IThemeRules;
constructor() {
const themeRules = themeRulesStandardCreator();
ThemeGenerator.insureSlots(this.themeRules, false);
ThemeGenerator.setSlot(themeRules.backgroundColor, getColorFromString('#ffffff'), false, true, true);
ThemeGenerator.setSlot(themeRules.foregroundColor, getColorFromString('#000000'), false, true, true);
this.themeRules = themeRules;
}
public loadThemeForColor(hexColor: string): void {
const newColor: IColor = getColorFromString(hexColor);
const themeRules = this.themeRules;
ThemeGenerator.setSlot(themeRules.primaryColor, newColor.str, false, true, true);
this.themeRules = themeRules;
const theme = ThemeGenerator.getThemeAsJson(this.themeRules);
loadTheme({
...{ palette: theme },
isInverted: false,
});
}
}
For more insights have a look at the ColorPage.tsx yourself within the official repo, since I didn't strive to understand everything going on in there.
I use HoverCard Office Fabric UI React component to show preview of images, although I can configure height of the card I don't see similar properties for width. What is a possible solution to set width? I saw property styles?: IHoverCardStyles but don't understand how to use it. Thanks.
HoverCard.styles allows to specify style for the host element but what you are after HoverCard.expandingCardProps property.
One option to specify HoverCard custom width would be to override style via IExpandingCardProps.styles like this:
public render() {
const rootStyle = { width: "800px" }; //set custom width
const expandingCardProps: IExpandingCardProps = {
onRenderCompactCard: this.renderCompactCard,
onRenderExpandedCard: this.renderExpandedCard,
renderData: itemDetails,
styles: {"root": rootStyle}
};
return (
<div>
<HoverCard expandingCardProps={expandingCardProps} instantOpenOnClick={true}>
<div>{itemDetails.title}</div>
</HoverCard>
</div>
);
}
Here is the demo for your reference
I have a .js file which holds global data (actually i am going to fill it from website). Here it is:
const DynGlobals = {
HomePageColor: {
color: '#e74c3c'
}
}
/*
or i can set it like this
HomePageColor: '#e74c3c'
/*
export { DynGlobals }
I have a view and trying to set it's style from this file. So far i have tried many things to create another const and set it to view's style but didn't work
const bgColorStyle = {
backgroundColor: {DynGlobals.HomePageColor.color}
}
with or without bracelets it doesn't work. Any advices on this?
I'm a learning mobile development using Titanium Mobile framework.
I am facing a problem related to application of javascript style sheet.
When I name my jss file same as the js file, to which the style is to be applied, it works fine. But if I name it something else, it don't work. Can anybody tell me a solution. Following is my code sample.
// app.js
var win = Titanium.UI.createWindow({ backgroundColor : '#fff' });
win.add( Ti.UI.createButton({ title : 'Button A' }) );
win.open();
// app.jss, works fine
button { backgroundImage: 'grdadient_img.png'; }
// button_style.jss, don't work
button { backgroundImage: 'grdadient_img.png'; }
I never had much success using more than one JSS file. And if you follow Nandu's links you'll see that it's not really documented very well, likely to be removed from Titanium at some point. I expect that Titanium's Alloy will kill off JSS too.
If you don't want to use JSS (or Alloy yet), there is a neat way to centralise your styles using commonJS modules and optionally underscore.js e.g.
theme.js
var theme = {
tableLabel : {
color : '#3285C7',
backgroundColor : 'transparent',
inactiveColor : '#AAAAAA'
}
}
module.exports = theme;
to use
var theme = require('ui/common/Theme');
...
var myLabel = Ti.UI.createLabel(_.extend({}, theme.tableLabel, {
top : 5,
height : Ti.UI.SIZE,
width : Ti.UI.FILL,
text : "Hello world",
}));
I use _extend to take the settings from the theme and add instance specific settings like size, position etc. Don't forget the first empty object literal in the call to `_.extend()
See http://underscorejs.org/#extend
Ammar, please refer the following links. Hope it will help you
1.How to use jss correctly
2.How Does .jss feature really works in Titanium mobile SDK