Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
CSS for Chevron in Ons-List-Item ?
-
Yo guys, i just want to add css to my chevron in ons-list item.
Already tried to find the element/class/whatever that i can found when it render, but its useless.Anyone can help ?
Thanks
-
@dvlwjoffice Try
.list-item--chevron:before
;)If you simply want to rotate it, keep the original
translateY
and only change the rotation angle. E.g. pointing down would be:.list-item--chevron:before { transform: translateY(-50%) rotate(45deg); }
Alternatively, you can also create modifiers to do this:
.list-item--chevron:before { transition: transform .2s ease; } .list-item--down.list-item--chevron:before { transform: translateY(-50%) rotate(45deg); }
And then try this to toggle it:
<ons-list-item modifier="chevron" onclick="ons.modifier.toggle(this, 'down')">
-
@Fran-Diox
erm, something fishy in my case, i tried it to change the color first like this :.list-item--chevron:before{ color: #000 !important; }
But it doesn’t work.
-
@dvlwjoffice Oh, that. If you inspect the DOM you’ll see that chevron is only a border. Therefore,
border-color: #000
should be enough.
-
Well fran, its work ! ! !
thanks so much about it. Btw, beside this chevron, what DOM is only a border ? so maybe nextime i can change it and don’t panic.Oh yeah btw sorry for OOT, was Onsen UI (not monaca) support to make a custom splashscreen? the idea is, when i open my apps, the first page it open will be this splashscreen page, i will load all my configuration here, and then after it complete it will be redirect to index.html.
-
@dvlwjoffice that’s unrelated to Onsen UI, if you are building hybrid apps you need a plugin such as this one for that.