over 9 years ago
Options apply standard CSS classes to the snippet. Depending on the method that you choose, the UI will behave differently.
More data-select_class in the same group defines a list of classes that the user can choose to apply. Only one option can be enabled at a time.
The data-toggle_class is used to apply one or more CSS classes from the list to a snippet. Multiple selections can be applied at once.
Let's demonstrate how default options work with a basic example.
We start by adding a new file in our views folder - name it options.xml and add the default Odoo XML markup. Create a new template copy/pasting the following
- <template id="snippet_testimonial_opt" name="Snippet Testimonial Options" inherit_id="website_less.snippet_options">
- <xpath expr="//div[@data-js='background']" position="after">
- <div data-selector=".snippet_testimonial"> <!-- Options group -->
- <li class="dropdown-submenu">
- <a href="#">Your Option</a>
- <ul class="dropdown-menu"> <!-- Options list -->
- <li data-select_class="opt_shadow"><a>Shadow Images</a></li>
- <li data-select_class="opt_grey_bg"><a>Grey Bg</a></li>
- <li data-select_class=""><a>None</a></li>
- </ul>
- </li>
- </div>
- </xpath>
- </template>
<template id="snippet_testimonial_opt" name="Snippet Testimonial Options" inherit_id="website_less.snippet_options">
<xpath expr="//div[@data-js='background']" position="after">
<div data-selector=".snippet_testimonial"> <!-- Options group -->
<li class="dropdown-submenu">
<a href="#">Your Option</a>
<ul class="dropdown-menu"> <!-- Options list -->
<li data-select_class="opt_shadow"><a>Shadow Images</a></li>
<li data-select_class="opt_grey_bg"><a>Grey Bg</a></li>
<li data-select_class=""><a>None</a></li>
</ul>
</li>
</div>
</xpath>
</template>
0 Comment(s)