Table of Contents

• quark/css
  • CSSNameExp
  • Interface: StyleSheet
    • StyleSheet
    • stylesheet.time?
    • stylesheet.curve?
    • stylesheet.opacity?
    • stylesheet.cursor?
    • stylesheet.visible?
    • stylesheet.receive?
    • stylesheet.clip?
    • stylesheet.align?
    • stylesheet.width?
    • stylesheet.height?
    • stylesheet.minWidth?
    • stylesheet.minHeight?
    • stylesheet.maxWidth?
    • stylesheet.maxHeight?
    • stylesheet.margin?
    • stylesheet.marginTop?
    • stylesheet.marginRight?
    • stylesheet.marginBottom?
    • stylesheet.marginLeft?
    • stylesheet.padding?
    • stylesheet.paddingTop?
    • stylesheet.paddingRight?
    • stylesheet.paddingBottom?
    • stylesheet.paddingLeft?
    • stylesheet.borderRadius?
    • stylesheet.borderRadiusLeftTop?
    • stylesheet.borderRadiusRightTop?
    • stylesheet.borderRadiusRightBottom?
    • stylesheet.borderRadiusLeftBottom?
    • stylesheet.border?
    • stylesheet.borderTop?
    • stylesheet.borderRight?
    • stylesheet.borderBottom?
    • stylesheet.borderLeft?
    • stylesheet.borderWidth?
    • stylesheet.borderColor?
    • stylesheet.borderWidthTop?
    • stylesheet.borderWidthRight?
    • stylesheet.borderWidthBottom?
    • stylesheet.borderWidthLeft?
    • stylesheet.borderColorTop?
    • stylesheet.borderColorRight?
    • stylesheet.borderColorBottom?
    • stylesheet.borderColorLeft?
    • stylesheet.backgroundColor?
    • stylesheet.background?
    • stylesheet.boxShadow?
    • stylesheet.weight?
    • stylesheet.direction?
    • stylesheet.itemsAlign?
    • stylesheet.crossAlign?
    • stylesheet.wrap?
    • stylesheet.wrapAlign?
    • stylesheet.src?
    • stylesheet.textAlign?
    • stylesheet.textWeight?
    • stylesheet.textSlant?
    • stylesheet.textDecoration?
    • stylesheet.textOverflow?
    • stylesheet.textWhiteSpace?
    • stylesheet.textWordBreak?
    • stylesheet.textSize?
    • stylesheet.textBackgroundColor?
    • stylesheet.textColor?
    • stylesheet.textLineHeight?
    • stylesheet.textShadow?
    • stylesheet.textFamily?
    • stylesheet.security?
    • stylesheet.readonly?
    • stylesheet.type?
    • stylesheet.returnType?
    • stylesheet.placeholderColor?
    • stylesheet.cursorColor?
    • stylesheet.maxLength?
    • stylesheet.placeholder?
    • stylesheet.scrollbarColor?
    • stylesheet.scrollbarWidth?
    • stylesheet.scrollbarMargin?
    • stylesheet.translate?
    • stylesheet.scale?
    • stylesheet.skew?
    • stylesheet.origin?
    • stylesheet.originX?
    • stylesheet.originY?
    • stylesheet.x?
    • stylesheet.y?
    • stylesheet.scaleX?
    • stylesheet.scaleY?
    • stylesheet.skewX?
    • stylesheet.skewY?
    • stylesheet.rotateZ?
  • Class: CStyleSheetsClass
    • CStyleSheetsClass
    • cstylesheetsclass.set(name)
    • cstylesheetsclass.add(name)
    • cstylesheetsclass.remove(name)
    • cstylesheetsclass.toggle(name)
  • createCss(sheets)

quark/css #

CSSNameExp #

• @type CSSNameExp = ".className"

Interface: StyleSheet #

StyleSheet #

stylesheet.time? #

• time?: number keyframe time or css transition time

stylesheet.curve? #

• curve?: types.CurveIn keyframe curve or css transition curve

stylesheet.opacity? #

• opacity?: number

stylesheet.cursor? #

• cursor?: types.CursorStyleIn

stylesheet.visible? #

• visible?: boolean

stylesheet.receive? #

• receive?: boolean

stylesheet.clip? #

• clip?: boolean

stylesheet.align? #

• align?: types.AlignIn

stylesheet.width? #

• width?: types.BoxSizeIn

stylesheet.height? #

• height?: types.BoxSizeIn

stylesheet.minWidth? #

• minWidth?: types.BoxSizeIn

stylesheet.minHeight? #

• minHeight?: types.BoxSizeIn

stylesheet.maxWidth? #

• maxWidth?: types.BoxSizeIn

stylesheet.maxHeight? #

• maxHeight?: types.BoxSizeIn

stylesheet.margin? #

• margin?: number[]|number

stylesheet.marginTop? #

• marginTop?: number

stylesheet.marginRight? #

• marginRight?: number

stylesheet.marginBottom? #

• marginBottom?: number

stylesheet.marginLeft? #

• marginLeft?: number

stylesheet.padding? #

• padding?: number[]|number

stylesheet.paddingTop? #

• paddingTop?: number

stylesheet.paddingRight? #

• paddingRight?: number

stylesheet.paddingBottom? #

• paddingBottom?: number

stylesheet.paddingLeft? #

• paddingLeft?: number

stylesheet.borderRadius? #

• borderRadius?: number[]|number

stylesheet.borderRadiusLeftTop? #

• borderRadiusLeftTop?: number

stylesheet.borderRadiusRightTop? #

• borderRadiusRightTop?: number

stylesheet.borderRadiusRightBottom? #

• borderRadiusRightBottom?: number

stylesheet.borderRadiusLeftBottom? #

• borderRadiusLeftBottom?: number

stylesheet.border? #

• border?: types.BoxBorderIn[]|types.BoxBorderIn border

stylesheet.borderTop? #

• borderTop?: types.BoxBorderIn

stylesheet.borderRight? #

• borderRight?: types.BoxBorderIn

stylesheet.borderBottom? #

• borderBottom?: types.BoxBorderIn

stylesheet.borderLeft? #

• borderLeft?: types.BoxBorderIn

stylesheet.borderWidth? #

• borderWidth?: number[]|number

stylesheet.borderColor? #

• borderColor?: types.ColorIn[]|types.ColorIn

stylesheet.borderWidthTop? #

• borderWidthTop?: number border width

stylesheet.borderWidthRight? #

• borderWidthRight?: number

stylesheet.borderWidthBottom? #

• borderWidthBottom?: number

stylesheet.borderWidthLeft? #

• borderWidthLeft?: number

stylesheet.borderColorTop? #

• borderColorTop?: types.ColorIn border color

stylesheet.borderColorRight? #

• borderColorRight?: types.ColorIn

stylesheet.borderColorBottom? #

• borderColorBottom?: types.ColorIn

stylesheet.borderColorLeft? #

• borderColorLeft?: types.ColorIn

stylesheet.backgroundColor? #

• backgroundColor?: types.ColorIn

stylesheet.background? #

• background?: types.BoxFilterIn

stylesheet.boxShadow? #

• boxShadow?: types.BoxShadowIn

stylesheet.weight? #

• weight?: number[]|number

stylesheet.direction? #

• direction?: types.DirectionIn

stylesheet.itemsAlign? #

• itemsAlign?: types.ItemsAlignIn

stylesheet.crossAlign? #

• crossAlign?: types.CrossAlignIn

stylesheet.wrap? #

• wrap?: types.WrapIn

stylesheet.wrapAlign? #

• wrapAlign?: types.WrapAlignIn

stylesheet.src? #

• src?: string

stylesheet.textAlign? #

• textAlign?: types.TextAlignIn

stylesheet.textWeight? #

• textWeight?: types.TextWeightIn

stylesheet.textSlant? #

• textSlant?: types.TextSlantIn

stylesheet.textDecoration? #

• textDecoration?: types.TextDecorationIn

stylesheet.textOverflow? #

• textOverflow?: types.TextOverflowIn

stylesheet.textWhiteSpace? #

• textWhiteSpace?: types.TextWhiteSpaceIn

stylesheet.textWordBreak? #

• textWordBreak?: types.TextWordBreakIn

stylesheet.textSize? #

• textSize?: types.TextSizeIn

stylesheet.textBackgroundColor? #

• textBackgroundColor?: types.TextColorIn

stylesheet.textColor? #

• textColor?: types.TextColorIn

stylesheet.textLineHeight? #

• textLineHeight?: types.TextSizeIn

stylesheet.textShadow? #

• textShadow?: types.TextShadowIn

stylesheet.textFamily? #

• textFamily?: types.TextFamilyIn

stylesheet.security? #

• security?: boolean

stylesheet.readonly? #

• readonly?: boolean

stylesheet.type? #

• type?: types.KeyboardTypeIn

stylesheet.returnType? #

• returnType?: types.KeyboardReturnTypeIn

stylesheet.placeholderColor? #

• placeholderColor?: types.ColorIn

stylesheet.cursorColor? #

• cursorColor?: types.ColorIn

stylesheet.maxLength? #

• maxLength?: number

stylesheet.placeholder? #

• placeholder?: string

stylesheet.scrollbarColor? #

• scrollbarColor?: types.ColorIn

stylesheet.scrollbarWidth? #

• scrollbarWidth?: number

stylesheet.scrollbarMargin? #

• scrollbarMargin?: number

stylesheet.translate? #

• translate?: types.Vec2In

stylesheet.scale? #

• scale?: types.Vec2In

stylesheet.skew? #

• skew?: types.Vec2In

stylesheet.origin? #

• origin?: types.BoxOriginIn[]|types.BoxOriginIn

stylesheet.originX? #

• originX?: types.BoxOriginIn

stylesheet.originY? #

• originY?: types.BoxOriginIn

stylesheet.x? #

• x?: number

stylesheet.y? #

• y?: number

stylesheet.scaleX? #

• scaleX?: number

stylesheet.scaleY? #

• scaleY?: number

stylesheet.skewX? #

• skewX?: number

stylesheet.skewY? #

• skewY?: number

stylesheet.rotateZ? #

• rotateZ?: number

Class: CStyleSheetsClass #

CStyleSheetsClass #

A collection of stylesheet names to apply to the view

cstylesheetsclass.set(name) #

Set Style Collection

• @param name: string[]|string
• @return void

cstylesheetsclass.add(name) #

Add a stylesheet class selector name

• @param name: string
• @return void

cstylesheetsclass.remove(name) #

Delete a stylesheet class selector name

• @param name: string
• @return void

cstylesheetsclass.toggle(name) #

Toggle between Add and Delete

• @param name: string
• @return void

createCss(sheets) #

• css stylesheet is similar to html css stylesheet, supports multi-level stylesheet, but only supports class type

  
  

• Supports 3 pseudo-types normal, hover, action

  
  

  Corresponds to [HighlightedStatus.Normal], [HighlightedStatus.Hover], [HighlightedStatus.Active] in [View.onHighlighted] event

  
  

• When calling this method to create a stylesheet, pause the rendering threads of all windows

  
  

• @param sheets: object

  
  

For example:

createCss({
    '.test': {
        width: '50%',
        height: '50%',
        backgroundColor: '#00f',
    },
    '.test .a': {
        width: 50,
        height: 50,
    },
    '.test .a.b': { // This selector will have a higher priority
        height: 60,
    },
    // Apply these pseudo-classes to the target.
    // To make them effective on the target, the target view must be able to receive events.
    '.test:normal .a': {
        backgroundColor: '#0000',
        time: 1000, // Use transition time
    },
    '.test:hover': {
        backgroundColor: '#f0f',
    },
    '.test:hover .a': {
        backgroundColor: '#f00',
        time: 1000,  // Use transition time
    },
})