Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@uifabric/styling
Advanced tools
Readme
Integrating components into your project depends heavily on your setup. The recommended setup is to use a bundler such as webpack which can resolve NPM package imports in your code and can bundle the specific things you import.
Within an npm project, you should install the package and save it as a dependency:
npm install --save @uifabric/styling
This will add the styling package which gives you access to the Fabric Core style classes through JavaScript.
Fonts, colors, icons and animations are exported through the classNames
export. The export exposes class names for colors
, fonts
, animations
, and icons
.
Example of returning markup that is themePrimary
colored using the medium
font:
import {
colorClassNames,
fontClassNames
} from '@uifabric/styling';
function renderHtml() {
return (
`<div class="${ [
colorClassNames.themePrimary,
fontClassNamed.medium
].join(' ') }">Hello world!</div>`
);
}
There are a number of classes available under colorClassNames
, fontClassNames
, AnimationClassNames
, and iconClassNames
exports. See the available classes below.
Using animations works the same way:
import {
AnimationClassNames
} from '@uifabric/styling';
function renderHtml() {
return (
`<div class="${ AnimationClassNames.fadeIn }">Hello world!</div>`
);
}
Rendering icons is also simplified:
import {
classNames
} from '@uifabric/styling';
function renderHtml() {
return (
`<i class="${ classNames.icons.snow }" />`
);
}
If you need access to the raw JavaScript style objects so that you can mix them into other classes and use via a css library such as Glamor or Aphrodite, you can access the raw classes like so:
import {
styles
} from '@uifabric/styling';
import { css } from 'glamor';
function renderHtml() {
let className = css({
...styles.fonts.large,
background: 'red'
});
return (
`<div class="${ css(styles.fonts.large, { background: 'red' }) }">Hello!</div>`
);
}
The default palette of colors matches the default Fabric core styling conventions. However, it is possible to override the color slots to match your product requirements:
import {
loadTheme({
colors: {
themePrimary: 'red',
themeSeconary: 'blue'
}
});
}
If you override theme settings, you need to do this before accessing theme colors. Otherwise you won't get a notification that the theme changed.
Members of classNames.colors
:
Name | Description |
---|
Members of classNames.fonts
:
Name | Description |
---|
Members of classNames.animations
:
Name | Description |
---|
Members of classNames.icons
:
Name | Description |
---|
FAQs
Styling helpers for Fluent UI React.
The npm package @uifabric/styling receives a total of 28,861 weekly downloads. As such, @uifabric/styling popularity was classified as popular.
We found that @uifabric/styling demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.