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.