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


  • Onsen UI

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

    0_1502432773166_Screenshot_1.png


  • Onsen UI

    @dvlwjoffice Oh, that. If you inspect the DOM you’ll see that chevron is only a border. Therefore, border-color: #000 should be enough.



  • @Fran-Diox

    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.


  • Onsen UI

    @dvlwjoffice that’s unrelated to Onsen UI, if you are building hybrid apps you need a plugin such as this one for that.


Log in to reply