Support for pseudo/state selectors in CSS about nativescript HOT 25 CLOSED

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 {
   ...
}

from nativescript.

+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;
}

from nativescript.

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

from nativescript.

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;
}

from nativescript.

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.

from nativescript.

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: NativeScript/theme#4.

from nativescript.

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).

from nativescript.

We could use these in our QSF 👍

from nativescript.

+1

from nativescript.

This would be awesome to see +1

from nativescript.

+1

from nativescript.

+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.)

from nativescript.

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?

from nativescript.

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: #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.

from nativescript.

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

from nativescript.

Since my comment above here in this issue, touch events were implemented #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).

from nativescript.

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

from nativescript.

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.

from nativescript.

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

from nativescript.

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.

from nativescript.

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.

from nativescript.

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

from nativescript.

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

from nativescript.

+1

from nativescript.

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.

from nativescript.