本文整理汇总了TypeScript中office-ui-fabric-react/lib/Styling.getTheme函数的典型用法代码示例。如果您正苦于以下问题:TypeScript getTheme函数的具体用法?TypeScript getTheme怎么用?TypeScript getTheme使用的例子?那么, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了getTheme函数的9个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: getTheme
export const getStyles: IStyleFunction<IFeedbackListStyleProps, IFeedbackListStyles> = props => {
const { theme = getTheme() } = props;
const pivotStyles: Partial<IPivotStyles> = {
root: [{ paddingTop: 20 }, globalClassNames.pivot]
};
return {
issueList: [
{
maxHeight: 400,
overflowY: 'auto'
},
globalClassNames.issueList
],
button: [
{
marginBottom: 10,
// Temporary workaround for https://github.com/OfficeDev/office-ui-fabric-react/issues/6782.
selectors: {
'&a:link, &a:hover, &a:focus, &a:visited': {
color: theme.palette.white
}
}
},
globalClassNames.button
],
itemCell: [
getFocusStyle(theme, -1),
{
minHeight: 54,
padding: 10,
boxSizing: 'border-box',
borderBottom: `1px solid ${theme.semanticColors.bodyDivider}`,
display: 'flex',
selectors: {
'&:hover': { background: theme.palette.neutralLight }
}
}
],
itemName: [
theme.fonts.xLarge,
{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}
],
itemLabel: [
{
fontSize: theme.fonts.medium.fontSize,
fontWeight: FontWeights.bold
},
globalClassNames.listElement
],
timeStamp: [{ fontSize: theme.fonts.medium.fontSize }, globalClassNames.timeStamp],
subComponentStyles: {
pivot: pivotStyles
}
};
};
示例2: getTheme
export const getStyles: IStyleFunction<IPropertiesTableSetStyleProps, IPropertiesTableSetStyles> = props => {
const { theme = getTheme() } = props;
return {
tableRoot: [
{
marginBottom: 20,
overflowX: 'auto',
overflowY: 'inherit'
},
'PropertiesTable'
],
tableHeader: theme.fonts.xLarge
};
};
示例3: describe
describe('parseGap', () => {
loadTheme({
spacing: {
m: '16em'
}
});
const theme = getTheme();
it('returns a default value when given undefined', () => {
expect(parseGap(undefined, theme)).toEqual({ value: 0, unit: 'px' });
});
it('returns a default value when given am empty string', () => {
expect(parseGap('', theme)).toEqual({ value: 0, unit: 'px' });
});
it('returns a value with px when given a number', () => {
expect(parseGap(10, theme)).toEqual({ value: 10, unit: 'px' });
});
it('can parse a string with px', () => {
expect(parseGap('32px', theme)).toEqual({ value: 32, unit: 'px' });
});
it('can parse a string with a float', () => {
expect(parseGap('20.5px', theme)).toEqual({ value: 20.5, unit: 'px' });
});
it('can parse a string with em', () => {
expect(parseGap('5em', theme)).toEqual({ value: 5, unit: 'em' });
});
it('can parse a string with percentage', () => {
expect(parseGap('100%', theme)).toEqual({ value: 100, unit: '%' });
});
it('can parse a string with no numerical part', () => {
expect(parseGap('px', theme)).toEqual({ value: 0, unit: 'px' });
});
it('defaults to px with given a string with no units', () => {
expect(parseGap('16', theme)).toEqual({ value: 16, unit: 'px' });
});
it('parses the value from the theme when given a spacing key', () => {
expect(parseGap('m', theme)).toEqual({ value: 16, unit: 'em' });
});
});
示例4: getTheme
export const getStyles: IStyleFunction<IComponentPageStyleProps, IComponentPageStyles> = props => {
const { theme = getTheme(), componentStatus } = props;
return {
body: globalClassNames.body,
root: [
{
backgroundColor: theme.palette.white,
overflow: 'hidden'
},
globalClassNames.root
],
header: [
{
backgroundColor: componentPageColor,
minHeight: 245,
padding: componentPagePadding,
paddingBottom: 0
},
globalClassNames.header
],
headerLink: [
theme.fonts.large,
{
color: theme.palette.white,
textDecoration: 'none',
selectors: { '&:hover': { color: theme.palette.neutralLight } }
},
globalClassNames.headerLink
],
title: [
theme.fonts.xxLarge,
{
fontSize: 82,
lineHeight: 94,
color: theme.palette.white,
display: 'inline-block',
width: '100%',
marginTop: componentPagePadding,
marginBottom: componentPagePadding
},
globalClassNames.title
],
navigation: globalClassNames.navigation,
subHeading: [
{
// Set margins on the heading container not heading text to fix vertical alignment on sections
// with an edit button
marginTop: 0,
marginBottom: 24,
selectors: {
// Set font here to be more specific
h2: [theme.fonts.xxLarge, { fontSize: 36, margin: 0 }]
}
},
globalClassNames.subHeading
],
section: {
padding: componentPagePadding
},
overviewSection: [
{
maxWidth: '60em'
},
!!componentStatus && { paddingTop: 15 },
globalClassNames.overviewSection
],
overviewText: [
{
fontSize: theme.fonts.medium.fontSize,
// This is meant to be a ratio, so it has to be in quotes so it's not interpreted as pixels
lineHeight: '1.5',
marginBottom: -6, // Trim padding off last paragraph
selectors: {
p: {
margin: 0,
padding: '16px 0'
},
ul: { paddingLeft: ulLeftPadding },
li: [
theme.fonts.medium,
{
marginBottom: 16
}
],
'ul li': { listStyle: 'disc' }
}
},
globalClassNames.overviewText
],
overviewHeading: [
{
selectors: {
[`&.${globalClassNames.subHeading}`]: {
marginTop: 0
}
}
},
globalClassNames.overviewHeading
],
// These are for the actual "Best Practices" heading/text (rarely shown).
//.........这里部分代码省略.........
示例5: getTheme
export const getStyles: IStyleFunction<IAppStyleProps, IAppStyles> = props => {
const { responsiveMode, theme = getTheme() } = props;
const isLargeDown = responsiveMode <= ResponsiveMode.large;
return {
root: [
{
selectors: {
':global(body)': {
padding: 0,
margin: 0,
position: 'absolute',
left: 0,
top: 0,
minWidth: '100%',
minHeight: '100%',
'-webkit-tap-highlight-color': 'transparent'
}
}
},
globalClassNames.root
],
headerContainer: [
{
position: 'absolute',
top: 0,
height: headerHeight,
left: 0,
right: 0
},
globalClassNames.header
],
leftNavContainer: [
{
position: 'absolute',
left: 0,
width: navWidth,
top: headerHeight,
bottom: 0,
borderRight: `1px solid ${theme.palette.neutralLight}`,
background: theme.palette.white,
boxSizing: 'border-box',
overflowX: 'hidden',
overflowY: 'auto',
WebkitOverflowScrolling: 'touch'
},
globalClassNames.leftNav
],
content: [
{
position: 'absolute',
left: isLargeDown ? 0 : navWidth,
right: 0,
top: headerHeight,
bottom: 0,
padding: isLargeDown ? 5 : undefined,
overflowX: 'auto',
overflowY: 'auto',
// Helps to enable hardware acceleration and improve painting performance.
transform: 'translateZ(0)',
// Helps to enable smooth scrolling on ios devices.
WebkitOverflowScrolling: 'touch'
},
globalClassNames.content
],
linkFlair: [
{
fontSize: 10,
textTransform: 'upppercase',
float: 'right',
background: theme.palette.neutralTertiaryAlt,
color: theme.palette.white,
lineHeight: 'normal',
display: 'inline',
verticalAlign: 'middle',
transform: 'translateY(-50%)',
position: 'absolute',
right: 20,
top: '50%',
padding: '2px 6px',
borderRadius: 2
},
globalClassNames.linkFlair
],
linkFlairStarted: [
{
background: theme.palette.yellowLight,
color: theme.palette.black
},
globalClassNames.linkFlairStarted
],
linkFlairBeta: [
{
background: theme.palette.greenLight
},
globalClassNames.linkFlairBeta
],
linkFlairRelease: [
{
background: theme.palette.green
},
//.........这里部分代码省略.........
示例6: getTheme
export const getStyles: IStyleFunction<IExampleCardStyleProps, IExampleCardStyles> = props => {
const { isRightAligned, isScrollable, isCodeVisible, theme = getTheme() } = props;
const sharedToggleButtonStyles = {
marginRight: 0,
background: 'none',
backgroundColor: 'transparent',
border: `1px solid ${theme.palette.neutralTertiary}`,
borderBottom: 0,
borderTopLeftRadius: '4px',
borderTopRightRadius: '4px',
padding: '4px 12px',
minWidth: 100,
transition: `border ${AnimationVariables.durationValue3} ${AnimationVariables.easeFunction1}`
};
const codeButtonActiveStyles: IRawStyle = {
backgroundColor: theme.palette.neutralDark,
borderColor: theme.palette.neutralDark,
selectors: {
'.ms-Button-icon, .ms-Button-label': {
color: theme.palette.white
}
}
};
const dropdownStyles: Partial<IDropdownStyles> = {
caretDownWrapper: {
top: '6px'
},
title: [
sharedToggleButtonStyles,
{
alignItems: 'center',
display: 'flex',
height: 40,
width: 150,
selectors: {
[`&.${globalClassNames.themeDropdown}:focus`]: {
borderColor: theme.palette.neutralDark,
outlineColor: theme.palette.neutralDark
}
}
},
globalClassNames.themeDropdown
]
};
const buttonStyles: Partial<IButtonStyles> = {
root: [
sharedToggleButtonStyles,
{
// This is meant to be a ratio, so it has to be in quotes so it's not interpreted as pixels
lineHeight: '1',
selectors: {
'&:hover': codeButtonActiveStyles
}
},
globalClassNames.codeButton,
isCodeVisible && [codeButtonActiveStyles, globalClassNames.isActive]
],
label: {
color: theme.palette.neutralDark,
borderColor: theme.palette.neutralDark
}
};
return {
root: [
{
margin: '20px 0'
},
globalClassNames.root,
isCodeVisible && globalClassNames.isCodeVisible
],
header: [
{
borderBottom: `1px solid ${theme.palette.neutralTertiary}`,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
position: 'relative'
},
isCodeVisible && {
borderColor: theme.palette.neutralDark
},
globalClassNames.header
],
title: [
theme.fonts.large,
{
marginBottom: 10,
display: 'inline-block'
},
globalClassNames.title
],
toggleButtons: [
theme.fonts.large,
{
display: 'flex',
//.........这里部分代码省略.........
示例7: describe
describe('parseGap', () => {
loadTheme({
spacing: {
m: '16em'
}
});
const theme = getTheme();
it('returns a default value when given undefined', () => {
expect(parseGap(undefined, theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
});
it('returns a default value when given an empty string', () => {
expect(parseGap('', theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
});
it('returns a value with px when given a number', () => {
expect(parseGap(10, theme)).toEqual({ rowGap: { value: 10, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
});
it('can parse a string with px', () => {
expect(parseGap('32px', theme)).toEqual({ rowGap: { value: 32, unit: 'px' }, columnGap: { value: 32, unit: 'px' } });
});
it('can parse a string with a float', () => {
expect(parseGap('20.5px', theme)).toEqual({ rowGap: { value: 20.5, unit: 'px' }, columnGap: { value: 20.5, unit: 'px' } });
});
it('can parse a string with em', () => {
expect(parseGap('5em', theme)).toEqual({ rowGap: { value: 5, unit: 'em' }, columnGap: { value: 5, unit: 'em' } });
});
it('can parse a string with percentage', () => {
expect(parseGap('100%', theme)).toEqual({ rowGap: { value: 100, unit: '%' }, columnGap: { value: 100, unit: '%' } });
});
it('can parse a string with no numerical part', () => {
expect(parseGap('px', theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
});
it('defaults to px with given a string with no units', () => {
expect(parseGap('16', theme)).toEqual({ rowGap: { value: 16, unit: 'px' }, columnGap: { value: 16, unit: 'px' } });
});
it('parses the value from the theme when given a spacing key', () => {
expect(parseGap('m', theme)).toEqual({ rowGap: { value: 16, unit: 'em' }, columnGap: { value: 16, unit: 'em' } });
});
it('can parse a string with both horizontal and vertical gap', () => {
expect(parseGap('30px 10px', theme)).toEqual({ rowGap: { value: 30, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
});
it('can parse a string with horizontal and vertical gap with different units', () => {
expect(parseGap('50px 15%', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 15, unit: '%' } });
});
it('defaults to px with a string with horizontal and vertical gap with no units', () => {
expect(parseGap('50 30', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 30, unit: 'px' } });
});
it('can parse a string with horizontal and vertical gap with one of them getting value from the theme when given a spacing key', () => {
expect(parseGap('50px m', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 16, unit: 'em' } });
});
});
示例8: getTheme
import { IDetailsRowStyleProps, IDetailsRowStyles } from 'office-ui-fabric-react/lib/DetailsList';
import { DefaultPalette, FontSizes, getFocusStyle, getTheme, IStyle } from 'office-ui-fabric-react/lib/Styling';
import { IStyleFunctionOrObject } from 'office-ui-fabric-react/lib/Utilities';
const theme = getTheme();
const listRowActionButtonWidth = 36;
const listRowActionButtonMargin = -10;
export const getListRowFocusStyles = (): IStyleFunctionOrObject<IDetailsRowStyleProps, IDetailsRowStyles> => {
return {
root: [getFocusStyle(theme, undefined, undefined, undefined, 'transparent', undefined)]
};
};
export const getfocusStyle = (): IStyle => {
return [getFocusStyle(theme, undefined, undefined, undefined, 'transparent', undefined)];
};
export const getListActionColumnStyle = (isCompactMode: boolean): IStyle => {
return {
display: 'flex',
fontSize: isCompactMode ? FontSizes.small : FontSizes.medium,
color: DefaultPalette.neutralDark,
textOverflow: 'ellipsis',
maxWidth: '100%',
justifyContent: 'space-between'
};
};
export const getListActionFieldStyle = (isCompactMode: boolean): IStyle => {
return {
示例9: getTheme
export const getStyles: IStyleFunction<IHeaderStyleProps, IHeaderStyles> = props => {
const { theme = getTheme(), isLargeDown } = props;
const commonStyles: IRawStyle = {
display: 'inline-block',
verticalAlign: 'top',
color: theme.palette.white,
borderRadius: 0
};
const iconStyles: IIconStyles = { root: { fontSize: 18 } };
return {
root: [
{
height: 50,
lineHeight: 50,
padding: isLargeDown ? 0 : '0 20px',
backgroundColor: '#272630',
overflow: 'hidden',
whiteSpace: 'no-wrap',
userSelect: 'none',
color: 'white'
},
globalClassNames.root
],
title: [
commonStyles,
theme.fonts.large,
{
lineHeight: 48
},
globalClassNames.title
],
button: [
commonStyles,
getFocusStyle(theme, 1, 'relative', undefined, theme.palette.themeLight, 'transparent'),
{
position: 'relative',
textDecoration: 'none',
background: 'none',
backgroundColor: 'transparent',
border: 'none',
padding: '0 10px',
minWidth: 50,
lineHeight: 50,
margin: isLargeDown ? 0 : '0 5px',
textTransform: 'uppercase',
display: 'inline-block',
verticalAlign: 'top',
boxSizing: 'border-box',
selectors: {
'&:hover': {
background: isLargeDown ? 'inherit' : theme.palette.themePrimary
}
}
},
globalClassNames.button
],
buttons: [
commonStyles,
{
float: 'right'
},
globalClassNames.buttons
],
subComponentStyles: {
icons: iconStyles
}
};
};