Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@uifabric/styling
Advanced tools
Defines the core Office UI Fabric styles through a JavaScript interface.
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 27,308 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.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.