本文整理匯總了TypeScript中@uifabric/styling.getFocusStyle函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript getFocusStyle函數的具體用法？TypeScript getFocusStyle怎麽用？TypeScript getFocusStyle使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了getFocusStyle函數的3個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: getFocusStyle
export const getStyles = (props: ICalendarMonthStyleProps): ICalendarMonthStyles => {
const { className, theme, hasHeaderClickCallback, highlightCurrentMonth, highlightSelectedMonth } = props;
const { palette } = theme;
const disabledStyle = {
selectors: {
'&, &:disabled, & button': {
color: palette.neutralTertiaryAlt,
pointerEvents: 'none'
}
}
};
return {
root: [
normalize,
{
width: 196,
padding: 12,
boxSizing: 'content-box'
},
className
],
headerContainer: {
display: 'flex'
},
currentYearButton: [
getFocusStyle(theme, -1, 'relative'),
{
fontSize: FontSizes.medium,
fontWeight: FontWeights.semibold,
textAlign: 'left',
backgroundColor: 'transparent',
flexGrow: 1,
padding: '0 4px 0 10px',
border: 'none'
},
hasHeaderClickCallback && {
selectors: {
'&:hover, &:active': {
cursor: !hasHeaderClickCallback ? 'default' : 'pointer',
color: palette.neutralDark,
outline: '1px solid transparent',
backgroundColor: palette.neutralLight
}
}
}
],
yearNavigationButtonsContainer: {
display: 'flex',
alignItems: 'center'
},
yearNavigationButton: [
getFocusStyle(theme, -1, 'relative'),
{
width: 28,
minWidth: 28,
height: 28,
minHeight: 28,
display: 'block',
textAlign: 'center',
lineHeight: 28,
fontSize: FontSizes.small,
color: palette.neutralPrimary,
borderRadius: 2,
position: 'relative',
backgroundColor: 'transparent',
border: 'none',
padding: 0,
selectors: {
'&:hover': {
color: palette.neutralDark,
cursor: 'pointer',
outline: '1px solid transparent',
backgroundColor: palette.neutralLight
}
}
}
],
monthGridContainer: {
marginTop: 4
},
monthButton: [
getFocusStyle(theme, -1, 'relative'),
{
width: 40,
height: 40,
minWidth: 40,
minHeight: 40,
lineHeight: 40,
fontSize: FontSizes.small,
margin: '0 12px 16px 0',
color: palette.neutralPrimary,
backgroundColor: 'transparent',
border: 'none',
borderRadius: 2,
selectors: {
'&:nth-child(4n + 4)': {
marginRight: 0
},
//.........這裏部分代碼省略.........
示例2: getFocusStyle
export const styles = (props: ICalendarStyleProps): ICalendarStyles => {
const { className, theme, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props;
const { palette } = theme;
let totalWidth = isDayPickerVisible && isMonthPickerVisible ? 440 : 220;
if (showWeekNumbers) {
totalWidth += 30;
}
return {
root: [
normalize,
{
display: 'flex',
width: totalWidth
},
!isMonthPickerVisible && {
flexDirection: 'column'
},
className
],
divider: {
top: 0,
borderRight: '1px solid',
borderColor: palette.neutralLight
},
monthPickerWrapper: [
{
display: 'flex',
flexDirection: 'column'
}
],
goTodayButton: [
getFocusStyle(theme, -1, 'relative'),
{
bottom: 0,
color: palette.neutralPrimary,
height: 30,
lineHeight: 30,
backgroundColor: 'transparent',
border: 'none',
boxSizing: 'content-box',
padding: '0 4px',
alignSelf: 'flex-end',
marginRight: 16,
fontSize: FontSizes.small,
selectors: {
'& div': {
fontSize: FontSizes.small
},
'&:hover': {
color: palette.themePrimary,
backgroundColor: 'transparent',
cursor: 'pointer'
},
'&:active': {
color: palette.themeDark
},
'&:disabled': {
color: palette.neutralTertiaryAlt,
pointerEvents: 'none'
}
}
}
]
};
};示例3: getGlobalClassNames
export const styles = (props: ICalendarDayStyleProps): ICalendarDayStyles => {
const { className, theme, headerIsClickable, dateRangeType, showWeekNumbers } = props;
const { palette } = theme;
const classNames = getGlobalClassNames(GlobalClassNames, theme);
const disabledStyle = {
selectors: {
'&, &:disabled, & button': {
color: palette.neutralTertiaryAlt,
pointerEvents: 'none'
}
}
};
return {
root: [
normalize,
{
width: 196,
padding: 12,
boxSizing: 'content-box'
},
showWeekNumbers && {
width: 226
},
className
],
header: {
position: 'relative',
display: 'inline-flex',
height: 28,
lineHeight: 44,
width: '100%'
},
monthAndYear: [
getFocusStyle(theme, -1, 'relative'),
{
alignItems: 'center',
fontSize: FontSizes.medium,
color: palette.neutralPrimary,
display: 'inline-flex',
flexGrow: 1,
fontWeight: FontWeights.semibold,
padding: '0 4px 0 10px',
border: 'none',
backgroundColor: 'transparent',
borderRadius: 2
},
headerIsClickable && {
selectors: {
'&:hover': {
cursor: 'pointer',
background: palette.neutralLight,
color: palette.black
}
}
}
],
table: [
{
textAlign: 'center',
borderCollapse: 'collapse',
borderSpacing: '0',
tableLayout: 'fixed',
fontSize: 'inherit',
marginTop: 4,
width: 197
},
showWeekNumbers && {
width: 226
}
],
monthComponents: {
display: 'inline-flex',
alignSelf: 'flex-end'
},
headerIconButton: [
getFocusStyle(theme, -1, 'relative'),
{
width: 28,
height: 28,
display: 'block',
textAlign: 'center',
lineHeight: 28,
fontSize: FontSizes.small,
color: palette.neutralPrimary,
borderRadius: 2,
position: 'relative',
backgroundColor: 'transparent',
border: 'none',
padding: 0,
selectors: {
'&:hover': {
color: palette.neutralDark,
backgroundColor: palette.neutralLight,
cursor: 'pointer',
outline: '1px solid transparent'
}
}
//.........這裏部分代碼省略.........