Packages

p

fabric

styling

package styling

You can create styling for css-in-js fabric style using literals but its not typesafe. Use the types and imports below to be *more*, but *not* completely, typesafe. Importing the object's contents brings a few implicit type converters into scope so you can use some "type inference driving" functions to create your style parts.

Linear Supertypes
AnyRef, Any
Ordering
  1. Grouped
  2. Alphabetic
  3. By Inheritance
Inherited
  1. styling
  2. AnyRef
  3. Any
  1. Hide All
  2. Show All
Visibility
  1. Public
  2. Protected

Type Members

  1. type GetClassNamesFn[SP <: Any, S <: IStyleSetTag, C <: IClassNamesTag] = Function2[SP, UndefOr[IStyleFunctionOrObject[SP, S]], C]

    Type for a logical getClassNames function declared as a val.

    Type for a logical getClassNames function declared as a val. Use this if you need to memoize the function and use js memoization. If all you do is call getClassNames inside a useMemo hook, then you can define your component's getClassNames as a standard scala function.

  2. trait IAnimationClassNames extends Object
    Annotations
    @JSType() @native()
  3. trait IAnimationStyles extends Object
    Annotations
    @JSType() @native()
  4. trait IClassNamesTag extends Object

    Tag for an object whose data memebers all returns strings (= classnames).

    Tag for an object whose data memebers all returns strings (= classnames). You *must* promise to only have these type of members in the object.

    Annotations
    @JSType()
  5. trait IColorClassNames extends Object
    Annotations
    @JSType() @native()
  6. trait IEffects extends Object
    Annotations
    @JSType() @native()
  7. trait IFabricConfig extends AnyRef
  8. trait IFontClassNames extends Object
    Annotations
    @JSType() @native()
  9. trait IFontSizes extends Object
    Annotations
    @JSType() @native()
  10. trait IFontStyles extends Object
    Annotations
    @JSType() @native()
  11. trait IFontWeights extends Object
    Annotations
    @JSType() @native()
  12. trait IIconFontSizes extends Object
    Annotations
    @JSType() @native()
  13. trait IIconOptions extends Object
    Annotations
    @JSType()
  14. trait IIconSubset extends Object
    Annotations
    @JSType()
  15. trait IPalette extends Object
    Annotations
    @JSType() @native()
  16. trait IRawStyle extends Object with IRawStyleBase
    Annotations
    @JSType()
  17. trait IRawStyleArray extends Array[IStyle]
    Annotations
    @JSType()
  18. type IRawStyleBase = RawStyleBase
  19. type ISelectorSet = Dictionary[Any]

    Selector sets typically have styles but you could be defining a :global css var which may only have a value e.g.

    Selector sets typically have styles but you could be defining a :global css var which may only have a value e.g. a string color or number.

  20. trait ISemanticColors extends Object
    Annotations
    @JSType() @native()
  21. trait ISpacing extends Object
    Annotations
    @JSType() @native()
  22. type IStyle = |[IStyleBase, IRawStyleArray]

    A simple style object/string/thing or an array of those.

    A simple style object/string/thing or an array of those. A plain string becomes a classname in mergestyles.

  23. type IStyleBase = |[|[|[IRawStyle, String], Dynamic], Object]

    Added js.Dynamic so you can add anything dynamically, which is not typesafe but it is convenient! Should we keep js.Object to the union? Allows us to define and use some non-native JS traits but is also a bit loosely typed.

  24. type IStyleFn[SP <: Any, SS <: IStyleSetTag] = Function1[SP, SS]

  25. type IStyleFunction[SP <: Any, SS <: IStyleSetTag] = Function1[SP, SS]

    Convert style props to a style set.

    Convert style props to a style set. Declare your props=>styleset functions with this type e.g. val getStyles: IStyleFunction[SP, SST] = props => new Styles { ... }. However, its easier to use the smart constructor stylingFunction.

  26. type IStyleFunctionOrObject[SP <: Any, SS <: IStyleSetTag] = |[IStyleFunction[SP, SS], SS]

    A style set or a style function.

    A style set or a style function. This mirrors the fabric signature.

  27. trait IStyleOptions extends Object
    Annotations
    @JSType()
  28. type IStyleSet = Dictionary[IStyle]

    Keys are usually the logical names of your component, e.g.

    Keys are usually the logical names of your component, e.g. root, header, footer. Fabric also desginates subComponentStyles as a property that is an object with string->istyle mappings or a function that takes properties (an object) and returns string->istyle mappings. So fabric defines a style set as a potentially hierarchical specification of stylesets. When you want to be specific, use a trait instead of IStyleSet. Most of your code should use IStyleSetTag js objects with explicitly defined data members and rely on implicit conversions from IStyleSetTag to IStyleSet defined for convenience when calling the fabric style functions. Should this really be js.Dictonary[js.UndefOr[IStyle]?

  29. trait IStyleSetTag extends Object

    Tag your style trait to help drive style inference.

    Tag your style trait to help drive style inference. You *must* promise to only have specific types of values in your trait. Generally, your member types will all be var stylename: js.UndefOr[IStyle] so that you can specific a subset of the members based on your need. This is for use to create a statically typed version of IStyleSet (a dictionary) where the members are statically declared as trait data members. Implicit conversions are available to convert a js.Object to a IStyleSet to call the interop functions. You must promise to only have IStyle or js.UndefOr[IStyle] objects as values.

    Annotations
    @JSType()
  30. trait IStylesheetConfig extends Object
    Annotations
    @JSType()
  31. trait IVendorSettings extends Object
    Annotations
    @JSType() @native()
  32. sealed trait InjectionMode extends Any
    Annotations
    @JSType() @native()
  33. trait MergeStyles extends Object

    uifabric/merge-styles.

    uifabric/merge-styles.

    Annotations
    @JSType() @native()
  34. trait StyleSetArg extends Object

    Magnet pattern for concatStyleSetsWithProps.

    Magnet pattern for concatStyleSetsWithProps.

    Annotations
    @JSType() @native()
  35. trait Stylesheet extends Object
    Annotations
    @JSType() @native()
  36. trait StylingLike extends Object
    Annotations
    @JSType() @native()
  37. trait styles_Common extends Object
    Annotations
    @JSType() @native()
  38. trait styles_CommonStyles extends Object
    Annotations
    @JSType() @native()

Value Members

  1. implicit def dyn2IStyle(d: Dynamic): IStyle

    Any old dynamic maps to a style since we don't know what's in it so be hopeful.

    Any old dynamic maps to a style since we don't know what's in it so be hopeful. @group converters

  2. implicit def iStyleSetTagToIStyleSet[SS <: IStyleSetTag](s: SS): IStyleSet
  3. implicit def jsObject2IStyleSet[T <: Object](u: T): IStyleSet
  4. implicit def jsUndefOrJsObject2IStyleSet[T <: Object](u: UndefOr[T]): IStyleSet
  5. implicit def null2IStyle(n: Null): IStyle

    Convert null to style.

    Convert null to style. @group converters

  6. implicit def stringOpt2IStyle(sopt: Option[String]): IStyle

    Unwrap the string or return null.

    Unwrap the string or return null. @group converters

  7. implicit def stringUndefOr2IStyle(sopt: UndefOr[String]): IStyle

    Unwrap the string or return null.

    Unwrap the string or return null. @group converters

  8. implicit def styleAttr2IRawStyleBase(arr: StyleAttr): IStyle

    Convert standard vdom StyleAttr to IStyle.

    Convert standard vdom StyleAttr to IStyle. @grop converters

  9. implicit def styleOpt2IStyle(vopt: Option[IStyle]): IStyle

    Unwrap the option or return null.

    Unwrap the option or return null. @group converters

  10. def stylingFunction[SP <: Any, SS <: IStyleSetTag](f: (SP) => SS): IStyleFunction[SP, SS]

    Smart constructor with better type inference to define a IStyleFunction as a val.

    Smart constructor with better type inference to define a IStyleFunction as a val. Use this whene you need to keep the type as a function.

  11. def stylingFunctionOr[SP <: Any, SS <: IStyleSetTag](f: (SP) => SS): IStyleFunctionOrObject[SP, SS]

    Smart constructor with better type inference to define a IStyleFunctionOrObject as a val.

    Smart constructor with better type inference to define a IStyleFunctionOrObject as a val. Use this when you need to pass your styling function to fabric's functions but don't need to call it yourself.

  12. def toStyleSetArgs[StyleProps <: Object, Styles <: IStyleSetTag](args: Seq[UndefOr[IStyleFunctionOrObject[StyleProps, Styles]]]): Seq[StyleSetArg]

    Combine IStyleFunction, IStyleFunctionOrObject into a single array of type StyleSetArg needed for the args in concatStyleSets or concatStyleSetsWithProps.

    Combine IStyleFunction, IStyleFunctionOrObject into a single array of type StyleSetArg needed for the args in concatStyleSets or concatStyleSetsWithProps. Helps with type inference and composing args for varargs.

  13. implicit def undef2IStyle(vopt: UndefOr[IStyle]): IStyle

    Directly convert to a style since undefined is valid.

    Directly convert to a style since undefined is valid. @group coneverters

  14. implicit def undefOrIRawyStyle2IStyle(u: UndefOr[IRawStyle]): IStyle

  15. implicit def undefOrJsObject2IStyle(u: UndefOr[Object]): IStyle

    Map a UndefOr <stuff> to IStyle directly.

    Map a UndefOr <stuff> to IStyle directly. @group converters

  16. object InjectionMode
  17. object StyleSetArg
  18. object StyleToClassName extends Object

    Totally odd that this is not included in the overall Styling exports.

    Totally odd that this is not included in the overall Styling exports.

    Annotations
    @native() @JSImport("@uifabric/merge-styles/lib/styleToClassName", JSImport.Namespace)
  19. object module extends Object with styles_CommonStyles with ThemeLike with StylingLike with MergeStyles
    Annotations
    @native() @JSImport("@uifabric/styling", JSImport.Namespace)
  20. object selectorset extends MakeSelectors

    Helper to create entries for the selectors propert on IRawStyle.

  21. object stylearray extends MakeStyles

    Create an array of styles.

    Create an array of styles. This should really have IStyleBase as input.

  22. object styles extends MakeStyles

    Create an array of styles.

    Create an array of styles. This should really have IStyleBase as input. Same as stylearray.

  23. object styleset

    Create a style set.

    Create a style set. You can use this to help drive type inference or you can use a JS trait directly (see make and IStyleSetTag). Use this helper when you want an explicit IStyleSet but generally you should create style objects and tag them with IStyleSetTag.

    Example:

    1.  mergeStyleSets[SomeClassNames](
 styleset(
   "root" -> stylearray(
     "xx-PartName",
     new IRawStyle { ... },
     if(something) null else new IRawStyle { ... },
     customStyles.flatMap(_.root)
 )
)

Deprecated Value Members

  1. def resolve[SP <: Any, SS <: IStyleSetTag](props: SP, styles: UndefOr[IStyleFunctionOrObject[SP, SS]]*): SS

    Given some props and a list of IStyleFunctionOrObjects, resolve to a single (string->IStyle) by either calling the style function with the props or just using the props.

    Given some props and a list of IStyleFunctionOrObjects, resolve to a single (string->IStyle) by either calling the style function with the props or just using the props. Calls Styling.concatStyleSheets to properly recursively merge the data. This function is kept js oriented to match _resolve in the fabric styled HOC module (@uifabric/utilities/styled). Note that @merge-styles/concatStylesSetsWithProps can perform this processing.

    Annotations
    @deprecated
    Deprecated

    Use concatStyleSetsWithProps

  2. object Styling extends Object with ThemeLike with StylingLike with MergeStyles

    uifabric/styling == office-ui-fabric-react/lib/Styling.

    uifabric/styling == office-ui-fabric-react/lib/Styling. @uifabric/styling also exports most of @uifabic/merge-styles. This should really be the module.

    Annotations
    @deprecated @native() @JSImport("@uifabric/styling", JSImport.Namespace)
    Deprecated

    Use fabric.styling.module

Inherited from AnyRef

Inherited from Any

converters

Ungrouped