@fluentui-vue/components
TypeScript icon, indicating that this package has built-in type declarations

2.0.0-rc.33 • Public • Published

IE11 Support

Requires a CSS Vars Polyfill.

Styling & Theming

All components use CSS vars, which allows for very flexible theming.

CSS in JS

This library uses CSS in JS for multiple reasons:

  • Fluent UI React uses CSS in JS, so we can just use their style definitions.
  • You can import individual components with full tree-shaking, without the need of babel plugins.
  • Components are JS only, and don't require any fancy tool chains.

Cons

  • The dependencies for CSS in JS make the bundle a bit bigger, which becomes neglectable when importing multiple components.
  • Performance is slower than pure CSS

Color Palette

https://aka.ms/themedesigner.

:root {
  --themePrimary: #0078d4;
  --themeLighterAlt: #eff6fc;
  --themeLighter: #deecf9;
  --themeLight: #c7e0f4;
  --themeTertiary: #71afe5;
  --themeSecondary: #2b88d8;
  --themeDarkAlt: #106ebe;
  --themeDark: #005a9e;
  --themeDarker: #004578;
  --neutralLighterAlt: #faf9f8;
  --neutralLighter: #f3f2f1;
  --neutralLight: #edebe9;
  --neutralQuaternaryAlt: #e1dfdd;
  --neutralQuaternary: #d0d0d0;
  --neutralTertiaryAlt: #c8c6c4;
  --neutralTertiary: #a19f9d;
  --neutralSecondaryAlt: #8a8886;
  --neutralSecondary: #605e5c;
  --neutralPrimaryAlt: #3b3a39;
  --neutralPrimary: #323130;
  --neutralDark: #201f1e;
  --black: #000000;
  --white: #ffffff;
}

neutralSecondaryAlt is not exported by ThemeDesigner.

loadStyles

Override Styles

Using style

See Vue - Class and Style Bindings.

Using styles

styles is an object that allows you to target specific elements.

{
  root: {
    fontWeight: 'bold'
  },
  label: {
    color: 'red'
  }
}
<div class="root" style="font-weight: bold">
  <div class="label" style="color: red;"></div>
</div>

Using theme

theme is an object that allows you to override specific CSS Variables within the element. This requires a CSS Vars Polyfill or a modern browser.

{
  palette: {
    themePrimary: '#0f0'
  }
}
<div style="--themePrimary: #0f0;">/div>

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
2.0.0-rc.331latest

Version History

VersionDownloads (Last 7 Days)Published
2.0.0-rc.331
2.0.0-rc.32104
2.0.0-rc.311
2.0.0-rc.301
2.0.0-rc.290
2.0.0-rc.281
2.0.0-rc.271
2.0.0-rc.250
2.0.0-rc.240
2.0.0-rc.230
2.0.0-rc.220
2.0.0-rc.210
2.0.0-rc.200
2.0.0-rc.190
2.0.0-rc.180
2.0.0-rc.170
2.0.0-rc.160
2.0.0-rc.150
2.0.0-rc.140
2.0.0-rc.130
2.0.0-rc.120
2.0.0-rc.110
2.0.0-rc.100
2.0.0-rc.90
2.0.0-rc.80
2.0.0-rc.70
2.0.0-rc.60
2.0.0-rc.50
2.0.0-rc.40
2.0.0-rc.30
2.0.0-rc.20
2.0.0-rc.10
2.0.0-rc.00
1.1.10
1.1.00
1.0.160
1.0.150
1.0.140
1.0.130
1.0.120
1.0.110
1.0.100
1.0.90
1.0.80
1.0.70
1.0.60
1.0.50
1.0.30
1.0.21
1.0.11
1.0.01

Package Sidebar

Install

npm i @fluentui-vue/components

Weekly Downloads

112

Version

2.0.0-rc.33

License

none

Unpacked Size

4.56 MB

Total Files

546

Last publish

Collaborators

  • johannes-z