Nativescript: Feature Request - More CSS3 styles needed

[jamesharvey2]

Hello NativeScript,

Please implement missing CSS3 styles such as box shadow, text shadow, psuedo classes, CSS3 shapes (https://hackernoon.com/mastering-css-series-shape-outside-44d626270b25), CSS3 filters (https://www.w3schools.com/cssref/css3_pr_filter.asp) and so on.

Also, please increase number of built-in components we can use. More button styles, sliders, tab menus are all welcome.

You can design incredible user interface with just CSS3. Right now, the majority of essential CSS3 styling elements are missing...

https://www.youtube.com/watch?v=s9Qm99-aEkI&t=344s

Check this video and see what you can do with CSS3.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tsonevn]

Hi @jamesharvey2,
Thank you for the provided feature request,
I reviewed your suggestion, however, the box shadow functionality is already logged here.
About the third suggestion, we have already implemented some pseudo-selectors. For example button :highlighted.

Regarding that, it would help if you could provide some more info about the pseudo-classes, which you think it is needed to be added in NativeScript.

Also, keep in mind that there are some limitations on iOS and Android, which could prevent us from including all CSS styling features in NativeScript.

Best Regards,

[jamesharvey2]

Hi Tsonevn,

Thanks for responding.

Text-shadow property for instance, can do amazing tricks in terms of styling.
Check these youtube video examples and see how you can be creative with text shadow:

https://www.youtube.com/watch?v=zM2PGapc_vM

https://www.youtube.com/watch?v=3wKE8JZzA5Y&t=20s

I can't understand why text shadow property is missing in NativeScript. Currently, NativeScript ships with only the minimum CSS3 styles which I find to be not suitable for complicated UI design.

Check React Native regarding implementing text-shadow and box-shadow on native layer. React Native ships with box-shadow, text-shadow. https://facebook.github.io/react-native/docs/stylesheet.html

Also, I would like to recommend CSS3 3D properties. It can do amazing things. CSS3 3D property is light-weight, highly intelligent solution for 3D design on HTML.. and possibly on XML.
https://www.youtube.com/watch?v=HoFsAyHQLeU

and CSS3 filters! should be included. CSS3 filter adds so much to great UI design.
https://www.youtube.com/watch?v=OHX8GdpPcRA
https://www.w3schools.com/cssref/css3_pr_filter.asp

I would love get :nth-child psuedo selectors, :after, :before psuedo selectors. and :active, :hover, :focused. These selectors are essential for designing complicated user interface. Check this youtube tutorial to learn how they can be used on CSS3 UI:

https://www.youtube.com/watch?v=GfbuVM5neds&t=33s

Above video shows you how to use box-shadow to create a 3D looking object. All these properties should be a part of nativescript.

[jamesharvey2]

Here's an example of JavaScript & CSS3 calculator using box shadow property:

https://codepen.io/huan555/pen/RgXVEb

I hope you guys get some inspiration and understand why it's important to have these CSS3 properties. Especially, 'inset' in box-shadow, text-shadow matters a lot.

[jamesharvey2]

and please don't forget all gradient properties...

https://www.w3schools.com/css/css3_gradients.asp

[imnikkielyn]

Any updates regarding this?

[bundyo]

Of the things listed, :focus state is available for TextField elements and :active for Buttons and TabStripItems (in Tabs and BottomNavigation). Also linear-gradient works for background-image.

[ascottishpenguin]

Confirmation that :after :before selectors are still not usable in Nativescript? I am trying to create a rectangle button with side arrows where these selectors are required to create it.

[vytautas-pranskunas-]

it would be nice to have ::after and content selectors for example then it can be used to add badges to tabs like (btw it looks like ::after is supported but styling applies not as expected in HTML but content with attr(data-attribute) does not work
<Image src="font://&#xe986;" class="icon badge" data-count="4"></Image>
.badge[data-count]::after { position: absolute; right: 10%; top: 8%; content: attr(data-count); font-size: 40%; padding: .2em; border-radius: 50%; line-height: 1em; color: white; background: rgba(255, 0, 0, .85); text-align: center; min-width: 1em; //font-weight:bold; }

because currently bttom navigation cannot have badges and this is a big problem because other tabs in native market lacks lazy loading support

[pap5508]

@vytautas-pranskunas- : have you did any workaround to fix this? thanks

[vytautas-pranskunas-]

nop i switched away from NS