fabric.styling
Document{}
Type members
Classlikes
Tag for an object whose data memebers all returns strings (= classnames). You must promise to only have these type of members in the object.
Tag for an object whose data memebers all returns strings (= classnames). You must promise to only have these type of members in the object.
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.
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.
Magnet pattern for concatStyleSetsWithProps.
Magnet pattern for concatStyleSetsWithProps.
- Companion
- 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.
Helper to create entries for the selectors propert on IRawStyle.
Helper to create entries for the selectors propert on IRawStyle.
Create an array of styles. This should really have IStyleBase as input.
Create an array of styles. This should really have IStyleBase as input.
Create an array of styles. This should really have IStyleBase as input. Same as stylearray.
Create an array of styles. This should really have IStyleBase as input. Same as stylearray.
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.
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
mergeStyleSets[SomeClassNames]( styleset( "root" -> stylearray( "xx-PartName", new IRawStyle { ... }, if(something) null else new IRawStyle { ... }, customStyles.flatMap(_.root) ) )
Deprecated classlikes
uifabric/styling == office-ui-fabric-react/lib/Styling. @uifabric/styling also exports most of @uifabic/merge-styles. This should really be the module.
uifabric/styling == office-ui-fabric-react/lib/Styling. @uifabric/styling also exports most of @uifabic/merge-styles. This should really be the module.
- Deprecated
Types
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.
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.
- Type Params
- C
Class names object derived from IClassNamesTag.
- S
Styles js object, derived from IStyleSetTag
- SP
Style props
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.
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.
A simple style object/string/thing or an array of those. A plain string becomes a classname in mergestyles.
A simple style object/string/thing or an array of those. A plain string becomes a classname in mergestyles.
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.
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.
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.
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.
- Type Params
- SP
style props type
- SS
Style set type e.g. IStyleSet or js object derived from IStyleSetTag
A style set or a style function. This mirrors the fabric signature.
A style set or a style function. This mirrors the fabric signature.
- Type Params
- SP
style props type
- SST
style set type e.g. IStyleSet or IStyleSetTag
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]?
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]?
Value members
Concrete methods
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.
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.
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.
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.
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.
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.
Deprecated methods
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.
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.
- Deprecated
Implicits
Implicits
Any old dynamic maps to a style since we don't know what's in it so be hopeful. @group converters
Any old dynamic maps to a style since we don't know what's in it so be hopeful. @group converters
Unwrap the string or return null. @group converters
Unwrap the string or return null. @group converters
Unwrap the string or return null. @group converters
Unwrap the string or return null. @group converters
Convert standard vdom StyleAttr to IStyle. @grop converters
Convert standard vdom StyleAttr to IStyle. @grop converters
Unwrap the option or return null. @group converters
Unwrap the option or return null. @group converters
Directly convert to a style since undefined is valid. @group coneverters
Directly convert to a style since undefined is valid. @group coneverters