Nativescript: Support for pseudo/state selectors in CSS

[enchev]

_From @vakrilov on April 14, 2015 9:17_

For example:

button:pressed { background-color: blue }

More on the topic: Pseudo-classes

_Copied from original issue: NativeScript/cross-platform-modules#280_

[lscown]

Would be great to see this! Not only would it be good to see for buttons, but also any UI element that has a tap event attached to it. This could extend into applying the Android ripple effect on tap.

We are currently using a stacklayout as a button, because this element can contain child elements (i.e. image and text).

[PanayotCankov]

We could use these in our QSF :+1:

[bradmartin]

+1

[NathanWalker]

This would be awesome to see +1

[chromonav]

+1

[mike-ense]

+1

It's not implemented already. I guess the ability to give differentiated color to buttons and then color variation when they're pressed, is extremely high prio.

Is any workaround available in the meantime?

(For instance someone maybe could implement a patch, or a temporary button implementation altogether. I don't understand the internals well enough to have any idea yet.)

[mike-ense]

Could I somehow hook into the like "onMouseDown" and "onMouseUp" events and just change the button's .cssClass accordingly -

I can't find any "onpressed" and "onunpressed" events though - what am I missing?

[mike-ense]

So those are called MotionEvent.ACTION_UP and MotionEvent.ACTION_DOWN on Android, and those in turn are mapped to the GestureStateType:s "began" and "ended" in the {N} runtime.

But they seem not to be exported to userland currently.

To make history happen faster I open a separate issue for that: https://github.com/NativeScript/NativeScript/issues/1366 .

Actually if you think about it, a ":pressed" CSS pseudo-class will only alter the CSS applied on a button, so there will be cases when you will want event listeners for this functionality. So I guess the request in that github issue makes a lot of sense.

[jpdail01]

+1

This would be great. I'd also like to see nth-child pseudo class so we can easily style alternating row color on a listivew:

myListViewItem:nth-child(odd) {
background-color: #ff0000;
}

[sitefinitysteve]

Just encountered this now, would be nice :) Had to look at the source to get selectedBackgroundColor on the segmented bar where

SegmentedBar:active{} (or whatever)

Would have been super handy

[mike-ense]

Since my comment above here in this issue, touch events were implemented https://github.com/NativeScript/NativeScript/pull/1383 , so all I wanted can be done programmatically. While of course a ":pressed" pseudoclass would be super-nice, at least the same goal can be reached other ways, so, for me this is not an issue anymore (and things like an SVG renderer are much higher prio).

[vjoao]

+1 on this. Would be great to have first/last child selectors.

[BenKingBBC]

Do we still not have :pressed? Would go a long way to making elements feel more native if you could style them while your finger is on them.

[vjoao]

@BenKingBBC I guess the pressed style is handled by the platform itself (i.e Ripple on Android 5)

[burkeholland]

For the segmented bar, it would be ideal if it was possible to style the selected background color via css pseudo selectors. In the case of the segmented bar, only the background color can be changed, but that would at least allow all of the styling to be done in the CSS.

.segmented-bar:selected {
    background-color: #efefef;
}

[BenKingBBC]

Agreed @burkeholland, although in the segmented-bar case I would argue naming it active over selected would be better for aligning with the web equivalent.

[leocaseiro]

That would be nice for repeaters as well. I'm using a repeater to emulate a ListView with headers. However, onTap event doesn't seem natural. It's missing the :pressed or :selected colour.

[FireSt-dead]

nth-child should handle the various hand-made even/odd implementations:
https://github.com/NativeScript/nativescript-sdk-examples-ng/blob/master/app/listview/creating-listview/creating-listview.component.html#L5
Possibly replacing the .even and .odd selectors with ListView>:nth-child(even) and ListView>:nth-child(odd) without additional code in the xml or html temlpates.

[toddanglin]

For the benefit of this thread, the :highlighted pseudo selector is now supported.

It behaves more or less like the :active selector from the web. You can find more details in this issue: https://github.com/NativeScript/theme/issues/4.

[NathanaelA]

@toddanglin just one clarification; this pseudo selector only supports buttons currently...

[toddanglin]

Thanks, Nathan.

Is there a pseudo selector for the disabled state on buttons yet? If not, that would be really valuable here, too. For example, when isEnabled=false on a button, this should match:

.myButton:disabled {
   ...
}

[nsndeck]

Hi all,
Added support for pseudo states named in this issue:
button: pressed, active and highlighted state (button will enter this state when tap and hold)
view: disabled (isEnabled = false)

For the request from @burkeholland about SegmentedBar:selected state
We introduced a new css property named selected-background-color with following usage:

.segmentedBar {
    selected-background-color: red;
}

So closing issue, if you need some other pseudo class property please open a separate issue, since this one is way too big for reading.

Nedyalko

[karim007]

+1

[codejtech]

would be great to have support for :before and :after as well.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.