Owl komponensek

Az Odoo Javascript keretrendszer egy egyedi komponens keretrendszert használ, amelyet Owl-nak hívnak. Ez egy deklaratív komponens rendszer, amelyet lazán a Vue és a React inspirált. A komponensek QWeb sablonok használatával vannak definiálva, amelyeket néhány Owl specifikus direktívával bővítettek. Az hivatalos Owl dokumentáció teljes referenciát és egy útmutatót tartalmaz.

Fontos

Bár a kód a web modulban található, egy külön GitHub tárolóból van karbantartva. Ezért bármilyen módosítást az Owl-on keresztül egy pull request formájában kell végrehajtani a https://github.com/odoo/owl oldalon.

Megjegyzés

Jelenleg minden Odoo verzió (a 14-es verziótól kezdve) ugyanazt az Owl verziót használja.

Owl komponensek használata

Az Owl dokumentáció már részletesen dokumentálja az Owl keretrendszert, így ez az oldal csak az Odoo specifikus információkat fogja nyújtani. De először nézzük meg, hogyan készíthetünk egy egyszerű komponenst az Odoo-ban.

import { Component, xml, useState } from "@odoo/owl";

class MyComponent extends Component {
    static template = xml`
        <div t-on-click="increment">
            <t t-esc="state.value">
        </div>
    `;

    setup() {
        this.state = useState({ value: 1 });
    }

    increment() {
        this.state.value++;
    }
}

Ez a példa azt mutatja, hogy az Owl elérhető könyvtárként a globális névtérben owl néven: egyszerűen használható, mint a legtöbb könyvtár az Odoo-ban. Vegyük észre, hogy itt a sablont statikus tulajdonságként definiáltuk, de a static kulcsszó használata nélkül, amely nem érhető el néhány böngészőben (az Odoo javascript kódnak Ecmascript 2019 kompatibilisnek kell lennie).

Itt a sablont a javascript kódban definiáljuk, az xml segítő segítségével. Azonban ez csak a kezdeti lépésekhez hasznos. Gyakorlatban az Odoo-ban a sablonokat xml fájlban kell definiálni, hogy fordíthatók legyenek. Ebben az esetben a komponensnek csak a sablon nevét kell meghatároznia.

Gyakorlatban a legtöbb komponensnek 2 vagy 3 fájlt kell meghatároznia, ugyanazon a helyen: egy javascript fájlt (my_component.js), egy sablon fájlt (my_component.xml) és opcionálisan egy scss (vagy css) fájlt (my_component.scss). Ezeket a fájlokat ezután hozzá kell adni egy eszközcsomaghoz. A web keretrendszer gondoskodik a javascript/css fájlok betöltéséről, és a sablonok betöltéséről az Owl-ba.

Így kellene definiálni a fenti komponenst:

import { Component, useState } from "@odoo/owl";

class MyComponent extends Component {
    static template = 'myaddon.MyComponent';

    ...
}

És a sablon most a megfelelő xml fájlban található:

<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">

<t t-name="myaddon.MyComponent">
  <div t-on-click="increment">
    <t t-esc="state.value"/>
  </div>
</t>

</templates>

Megjegyzés

A sablonneveknek a addon_name.ComponentName konvenciót kell követniük.

Lásd még

• Owl Repository

Legjobb gyakorlatok

Először is, a komponensek osztályok, tehát van konstruktoruk. Azonban a konstruktorok speciális metódusok a javascriptben, amelyeket semmilyen módon nem lehet felülírni. Mivel ez egy időnként hasznos minta az Odoo-ban, biztosítanunk kell, hogy az Odoo-ban egyetlen komponens se használja közvetlenül a konstruktor metódust. Ehelyett a komponenseknek a setup metódust kell használniuk:

// correct:
class MyComponent extends Component {
    setup() {
        // initialize component here
    }
}

// incorrect. Do not do that!
class IncorrectComponent extends Component {
    constructor(parent, props) {
        // initialize component here
    }
}

Egy másik jó gyakorlat, hogy következetes konvenciót használjunk a sablonnevekhez: addon_name.ComponentName. Ez megakadályozza a névütközést az odoo bővítmények között.

Referencia lista

Az Odoo web kliens Owl komponensekkel épül fel. A könnyebb használat érdekében az Odoo javascript keretrendszer egy sor általános komponenst biztosít, amelyek újrahasznosíthatók bizonyos gyakori helyzetekben, mint például a legördülő menük, jelölőnégyzetek vagy dátumválasztók. Ez az oldal elmagyarázza, hogyan használhatók ezek az általános komponensek.

Technikai név	Rövid leírás
ActionSwiper	egy swiper komponens, amely érintéses húzással hajt végre műveleteket
CheckBox	egy egyszerű jelölőnégyzet komponens, mellette egy címkével
ColorList	egy színlista, amelyből választhat
Dropdown	teljes funkcionalitású legördülő lista
Notebook	egy komponens, amely lehetővé teszi a lapok közötti navigációt
Pager	egy kis komponens a lapozás kezelésére
SelectMenu	egy legördülő komponens különböző opciók közötti választáshoz
TagsList	egy címkék listája, amelyek lekerekített tablettákban jelennek meg

ActionSwiper

Helyszín

@web/core/action_swiper/action_swiper

Leírás

Ez egy olyan komponens, amely képes műveleteket végrehajtani, amikor egy elemet vízszintesen elhúznak. A swiper egy cél elemet burkol, hogy műveleteket adjon hozzá. A művelet akkor hajtódik végre, amikor a felhasználó elengedte a swipert, miután annak szélességének egy részét átlépte.

<ActionSwiper onLeftSwipe="Object" onRightSwipe="Object">
  <SomeElement/>
</ActionSwiper>

A komponens legegyszerűbb használata az, ha közvetlenül a cél elem köré helyezi egy xml sablonban, ahogy fentebb látható. De néha előfordulhat, hogy egy meglévő elemet szeretne kiterjeszteni, és nem szeretné megduplázni a sablont. Erre is van lehetőség.

Ha egy meglévő elem viselkedését szeretné kiterjeszteni, az elemet közvetlenül be kell helyeznie, azzal körülvéve. Ezenkívül feltételesen hozzáadhat tulajdonságokat annak kezelésére, hogy mikor lehet az elem elhúzható, annak animációját és a művelet végrehajtásához szükséges minimális elhúzási részt.

A komponenst használhatja könnyű interakcióra rekordokkal, üzenetekkel, listák elemeivel és még sok mással.

A következő példa egy alapvető ActionSwiper komponenst hoz létre. Itt a húzás mindkét irányban engedélyezett.

<ActionSwiper
  onRightSwipe="
    {
      action: '() => Delete item',
      icon: 'fa-delete',
      bgColor: 'bg-danger',
    }"
  onLeftSwipe="
    {
      action: '() => Star item',
      icon: 'fa-star',
      bgColor: 'bg-warning',
    }"
>
  <div>
    Swipable item
  </div>
</ActionSwiper>

Megjegyzés

Az akciók felcserélődnek, amikor jobbról balra (RTL) nyelveket használnak.

Tulajdonságok

Név	Típus	Leírás
animationOnMove	Boolean	opcionális logikai érték annak meghatározására, hogy van-e fordítási effektus a húzás során
animationType	String	opcionális animáció, amelyet a húzás befejezése után használnak (bounce vagy forwards)
onLeftSwipe	Object	ha jelen van, az actionswiper balra húzható
onRightSwipe	Object	ha jelen van, az actionswiper jobbra húzható
swipeDistanceRatio	Number	opcionális minimális szélességi arány, amelyet el kell húzni a művelet végrehajtásához

Az onLeftSwipe és onRightSwipe tulajdonságok egyszerre is használhatók.

A bal/jobb húzáshoz használt Object-nek tartalmaznia kell:

• action, amely a visszahívásként szolgáló hívható Function. Miután a húzás a megadott irányba befejeződött, ez az akció kerül végrehajtásra.

• icon az ikon osztály, amelyet használni kell, általában az akciót képviseli. Ennek string típusúnak kell lennie.

• bgColor a háttérszín, amely az akció díszítésére szolgál. Az alábbi bootstrap kontextuális színek egyike lehet (danger, info, secondary, success vagy warning).

Ezeket az értékeket meg kell adni a swiper viselkedésének és vizuális megjelenésének meghatározásához.

Példa: Meglévő komponensek kiterjesztése

A következő példában xpath-okat használhat az ActionSwiper komponensben egy meglévő elem becsomagolására. Itt egy swiper került hozzáadásra, hogy egy üzenetet olvasottként jelöljön meg a levelezésben.

<xpath expr="//*[hasclass('o_Message')]" position="after">
  <ActionSwiper
    onRightSwipe="messaging.device.isMobile and messageView.message.isNeedaction ?
      {
        action: () => messageView.message.markAsRead(),
        icon: 'fa-check-circle',
        bgColor: 'bg-success',
      } : undefined"
  />
</xpath>
<xpath expr="//ActionSwiper" position="inside">
  <xpath expr="//*[hasclass('o_Message')]" position="move"/>
</xpath>

Jelölőnégyzet

Helyszín

@web/core/checkbox/checkbox

Leírás

Ez egy egyszerű jelölőnégyzet komponens, amely mellett egy címke található. A jelölőnégyzet a címkéhez van kapcsolva: a jelölőnégyzet állapota megváltozik, amikor a címkére kattintanak.

<CheckBox value="boolean" disabled="boolean" t-on-change="onValueChange">
  Some Text
</CheckBox>

Tulajdonságok

Név	Típus	Leírás
value	boolean	ha igaz, a jelölőnégyzet be van jelölve, ellenkező esetben nincs bejelölve
disabled	boolean	ha igaz, a jelölőnégyzet le van tiltva, ellenkező esetben engedélyezett

SzínLista

Helyszín

@web/core/colorlist/colorlist

Leírás

A ColorList lehetővé teszi, hogy egy előre meghatározott listából válasszon színt. Alapértelmezés szerint a komponens a jelenleg kiválasztott színt jeleníti meg, és nem bővíthető, amíg a canToggle tulajdonság nincs jelen. Különböző tulajdonságok megváltoztathatják a viselkedését, hogy mindig kibővítse a listát, vagy úgy működjön, mint egy kapcsoló, amelyre kattintva megjeleníti az elérhető színek listáját, amíg egy választás meg nem történik.

Tulajdonságok

Név	Típus	Leírás
canToggle	boolean	opcionális. Meghatározza, hogy a colorlist kibővítheti-e a listát kattintásra
colors	array	színek listája, amelyeket a komponensben megjelenítünk. Minden színnek egyedi id-ja van
forceExpanded	boolean	opcionális. Ha igaz, a lista mindig ki van bontva
isExpanded	boolean	opcionális. Ha igaz, a lista alapértelmezés szerint ki van bontva
onColorSelected	function	visszahívás, amely akkor hajtódik végre, amikor egy színt kiválasztanak
selectedColor	szám	opcionális. A kiválasztott id szín

A színek id-i a következők:

Azonosító	Szín
0	Nincs szín
1	Piros
2	Narancs
3	Sárga
4	Világoskék
5	Sötét lila
6	Lazac rózsaszín
7	Középkék
8	Sötétkék
9	Fukszia
12	Zöld
11	Lila

Legördülő lista

Helyszín

@web/core/dropdown/dropdown és @web/core/dropdown/dropdown_item

Leírás

The Dropdown lets you show a menu with a list of items when a toggle is clicked on. They can be combined with DropdownItems to invoke callbacks and close the menu when items are selected.

Dropdowns are surprisingly complicated components, the list of features they provide is as follow:

• Az elem lista átkapcsolása kattintásra

• Bezárás külső kattintásra

• Call a function when items are selected

• Az elem kiválasztásakor opcionálisan zárja be az elemlistát

• SIY: stílusozza saját maga

• Támogatja az al-legördülő menüket, bármilyen szintig

• Konfigurálható gyorsbillentyű a legördülő menü megnyitásához/bezárásához vagy egy legördülő menü elem kiválasztásához

• Billentyűzet navigáció (nyilak, tab, shift+tab, home, end, enter és escape)

• Újrapozicionálja magát, amikor az oldal görgetve vagy átméretezve van

• Intelligensen választja ki a nyitás irányát (a jobb-bal irány automatikusan kezelve van).

• Közvetlen testvér legördülő menük: amikor az egyik nyitva van, a többiek átkapcsolása egérrel való áthúzáskor

A <Dropdown/> komponens megfelelő használatához két OWL slotot kell kitölteni:

• default slot: it contains the toggle elements of your dropdown. By default, click events will be attached to this element to open and close the dropdown.

• content slot: it contains the elements of the dropdown menu itself and is rendered inside a popover. Although it is not mandatory, you can put some DropdownItem inside this slot, the dropdown will automatically close when these items are selected.

<Dropdown>
  <!-- The content of the "default" slot is the component's toggle -->
  <button class="my-btn" type="button">
    Click me to toggle the dropdown menu!
  </button>

  <!-- The "content" slot is rendered inside the menu that pops up next to the toggle -->
  <t t-set-slot="content">
    <DropdownItem onSelected="selectItem1">Menu Item 1</DropdownItem>
    <DropdownItem onSelected="selectItem2">Menu Item 2</DropdownItem>
  </t>
</Dropdown>

Dropdown Props

Név	Típus	Leírás
menuClass	String	Optional classname added to the dropdown’s menu
disabled	Boolean	Optional, if true, disables the dropdown so the user is not able to open it anymore. (default: false)
items	Array	Optional list of items to be displayed as DropdownItems inside the dropdown’s menu
position	String	Optionally defines the desired menu opening position. RTL direction is automatically applied. Should be a valid usePosition hook position. (default: bottom-start)
beforeOpen	Function	Optional function called just before opening. May be asynchronous.
onOpened	Function	Optional function called just after opening.
onStateChanged	Function	Optional function called after opening or closing (gives a boolean as single argument that represents whether the dropdown is open or not).
state	Object	Optional object with open(), close() and isOpen properties to manually control when the dropdown opens and closes.
manual	Boolean	Optional, when true, the Dropdown component will not add click event listeners to the toggler. This allows for more control as when to open the dropdown. (This should be used in tandem with the state prop)
navigationOptions	Boolean	Optionally overrides the navigation options of the dropdown, (see web/core/navigation/navigation).
holdOnHover	Boolean	Optional, if true, keeps the Dropdown’s menu at the same position while the mouse is hovering it, creating a better UX when the menu’s content changes.
menuRef	Function	Optional, allows to get a ref of the dropdown’s menu, (expects a function returned from useChildRef)

DropdownItem Props

Név	Típus	Leírás
class	String or Object	Optional value added to the root span classname (supports both strings and OWL classname object notation).
onSelected	Function	Optional function called when the dropdown item is selected.
closingMode	"none" | "closest" | "all"	Optional, controls which parent dropdown should close when the item is selected: none: the dropdown will not close, closest: the direct parent will close, all: every nested parent dropdown will close (default: all)
attrs	Object	Optional object representing attributes that are added to the root element. <DropdownItem attrs="{ title: 'A tooltip', 'data-hotkey': 'shift+a' }">. (If href is set, the element will automatically become an a element).

Fontos

When writing custom css for you components, do not forget that the menu elements are not next to the toggle but inside the overlay container, at the bottom of the document. Thus, use the menuClass and class props to more easily write your selectors. (This DOM magic let us avoid lots of z-index issues.)

Nested Dropdown

Dropdown can be nested, to do this simply put new Dropdown components inside other dropdown’s content slot. When the parent dropdown is open, child dropdowns will open automatically on hover.

By default, selecting a DropdownItem will close the whole Dropdown tree.

Example

This example shows how one could make a nested File dropdown menu, with submenus for the New sub elements.

<Dropdown>
  <button>File</button>
  <t t-set-slot="content">
    <DropdownItem onSelected="() => this.onItemSelected('file-save')">Save</DropdownItem>
    <DropdownItem onSelected="() => this.onItemSelected('file-open')">Open</DropdownItem>

    <Dropdown>
      <button>New</button>
      <t t-set-slot="content">
        <DropdownItem onSelected="() => this.onItemSelected('file-new-document')">Document</DropdownItem>
        <DropdownItem onSelected="() => this.onItemSelected('file-new-spreadsheet')">Spreadsheet</DropdownItem>
      </t>
    </Dropdown>
  </t>
</Dropdown>

In the example bellow, we recursively call a template to display a tree-like structure.

<t t-name="addon.MainTemplate">
  <div>
    <t t-call="addon.RecursiveDropdown">
      <t t-set="name" t-value="'Main Menu'" />
      <t t-set="items" t-value="state.menuItems" />
    </t>
  </div>
</t>

<t t-name="addon.RecursiveDropdown">
  <Dropdown>
    <button t-esc="name"></button>
    <t t-set-slot="content">
      <t t-foreach="items" t-as="item" t-key="item.id">

        <!-- If this item has no child: make it a <DropdownItem/> -->
        <DropdownItem t-if="!item.childrenTree.length" onSelected="() => this.onItemSelected(item)" t-esc="item.name"/>

        <!-- Else: recursively call the current dropdown template. -->
        <t t-else="" t-call="addon.RecursiveDropdown">
          <t t-set="name" t-value="item.name" />
          <t t-set="items" t-value="item.childrenTree" />
        </t>
      </t>
    </t>
  </Dropdown>
</t>

Controlled Dropdown

If needed, you can also open or close the dropdown using code. To do this you must use the useDropdownState hook along with the state prop. useDropdownState returns an object that has an open and a close method (as well as an isOpen getter). Give the object to the state prop of the dropdown you want to control and calling the respective functions should now open and close your dropdown.

You can also set manual to true if you don’t want the default click handlers to be added on the toggle.

Example

The following example shows a dropdown that opens automatically when mounted and only has a 50% chance of closing when clicking on the button inside.

import { Component, onMounted } from "@odoo/owl";
import { Dropdown } from "@web/core/dropdown/dropdown";
import { DropdownItem } from "@web/core/dropdown/dropdown_item";
import { useDropdownState } from "@web/core/dropdown/dropdown_hooks";

class MyComponent extends Component {

  static components = { Dropdown, DropdownItem };
  static template = xml`
    <Dropdown state="this.dropdown">
      <div>My Dropdown</div>

      <t t-set-slot="content">
        <button t-on-click="() => this.mightClose()">Close It!<button>
      </t>
    </Dropdown>
  `;

  setup() {
    this.dropdown = useDropdownState();

    onMounted(() => {
      this.dropdown.open();
    });
  }

  mightClose() {
    if (Math.random() > 0.5) {
      this.dropdown.close();
    }
  }
}

DropdownGroup

Location: @web/core/dropdown/dropdown_group

You can use the DropdownGroup component to make Dropdowns share a common group, this means that when one of these Dropdown is open, the others will automatically open themselves on mouse hover, without the need for a click.

To do this, either surround all the Dropdowns with a single DropdownGroup or surround them with DropdownGroups with the same group key.

Example

In the example bellow, all dropdown in the snippet bellow will share the same group:

<DropdownGroup>
  <Dropdown>...</Dropdown>
  <Dropdown>...</Dropdown>
  <Dropdown>...</Dropdown>
</DropdownGroup>

Whereas in the following snippet, only the first, second and fourth dropdown share the same group:

<DropdownGroup group="'my-group'">
  <Dropdown>...</Dropdown>
  <Dropdown>...</Dropdown>
</DropdownGroup>

<DropdownGroup group="'my-other-group'">
  <Dropdown>...</Dropdown>
</DropdownGroup>

<DropdownGroup group="'my-group'">
  <Dropdown>...</Dropdown>
</DropdownGroup>

Jegyzetfüzet

Helyszín

@web/core/notebook/notebook

Leírás

A Jegyzetfüzet több oldalt jelenít meg egy füles felületen. A fülek elhelyezhetők az elem tetején vízszintes megjelenítéshez, vagy bal oldalon függőleges elrendezéshez.

Két módja van a Jegyzetfüzet oldalak definiálásának, akár slot-ok használatával, akár dedikált props átadásával.

Egy oldal letiltható az isDisabled attribútummal, amely közvetlenül a slot csomóponton vagy az oldal deklarációjában van beállítva, ha a Jegyzetfüzetet pages-ként adott props-okkal használják. Letiltás után a megfelelő fül szürkévé válik és inaktív lesz.

Tulajdonságok

Név	Típus	Leírás
anchors	objektum	opcionális. Lehetővé teszi a horgonyok navigációját a nem látható füleken belüli elemekhez.
osztályNév	string	opcionális. Az összetevő gyökerén beállított osztálynév.
alapértelmezettOldal	string	opcionális. Alapértelmezés szerint megjelenítendő oldal id.
ikonok	array	opcionális. A fülekben használt ikonok listája.
tájolás	string	opcionális. A fülek iránya horizontal vagy vertical.
oldalFrissítéskor	function	opcionális. A visszahívás akkor hajtódik végre, amikor az oldal megváltozott.
pages	array	opcionális. Tartalmazza a page listáját, amelyet egy sablonból kell feltölteni.

Example

Az első megközelítés az, hogy az oldalakat a komponens slotjaiba állítjuk be.

<Notebook orientation="'vertical'">
  <t t-set-slot="page_1" title="'Page 1'" isVisible="true">
    <h1>My First Page</h1>
    <p>It's time to build Owl components. Did you read the documentation?</p>
  </t>
  <t t-set-slot="page_2" title="'2nd page'" isVisible="true">
    <p>Wise owl's silent flight. Through the moonlit forest deep, guides my path to code</p>
  </t>
</Notebook>

A másik módja az oldalak meghatározásának, ha a propokat adjuk át. Ez hasznos lehet, ha néhány oldal ugyanazt a struktúrát osztja meg. Először hozzon létre egy komponenst minden oldal sablonhoz, amelyet használhat.

import { Component, xml } from "@odoo/owl";
import { Notebook } from "@web/core/notebook/notebook";

class MyTemplateComponent extends Component {
  static template = xml`
    <h1 t-esc="props.title" />
    <p t-esc="props.text" />
  `;
}

class MyComponent extends Component {
  static template = xml`
    <Notebook defaultPage="'page_2'" pages="pages" />
  `;

  get pages() {
    return [
      {
        Component: MyTemplateComponent,
        title: "Page 1",
        props: {
          title: "My First Page",
          text: "This page is not visible",
        },
      },
      {
        Component: MyTemplateComponent,
        id: "page_2",
        title: "Page 2",
        props: {
          title: "My second page",
          text: "You're at the right place!",
        },
      },
    ]
  }
}

Mindkét példát itt mutatjuk be:

Lapozó

Helyszín

@web/core/pager/pager

Leírás

The Pager is a small component to handle pagination. A page is defined by an offset and a limit (the size of the page). It displays the current page and the total number of elements, for instance, „9-12 / 20”. In the previous example, offset is 8, limit is 4 and total is 20. It has two buttons („Previous” and „Next”) to navigate between pages.

Megjegyzés

A lapozó bárhol használható, de főként a vezérlőpultban van jelentősége. Tekintse meg a usePager hook-ot a vezérlőpult lapozójának manipulálásához.

<Pager offset="0" limit="80" total="50" onUpdate="doSomething" />

Tulajdonságok

Név	Típus	Leírás
offset	szám	Az oldal első elemének indexe. 0-val kezdődik, de a lapozó offset + 1-et jelenít meg.
limit	szám	Az oldal mérete. Az offset és a limit összege az oldal utolsó elemének indexével egyezik meg.
total	szám	Az elemek teljes száma, amelyet az oldal elérhet.
onUpdate	function	Függvény, amelyet akkor hívnak meg, amikor a lapozó módosítja az oldalt. Ez a függvény lehet aszinkron, a lapozó nem szerkeszthető, amíg ez a függvény fut.
isEditable	boolean	Lehetővé teszi a jelenlegi oldal szerkesztését kattintással (alapértelmezés szerint true).
withAccessKey	boolean	Hozzárendeli a p gyorsbillentyűt az előző oldal gombhoz és az n gyorsbillentyűt a következő oldal gombhoz (alapértelmezés szerint true).

VálasztóMenü

Helyszín

@web/core/select_menu/select_menu

Leírás

Ez a komponens akkor használható, ha többet szeretne tenni, mint a natív select elem használata. Meghatározhatja saját opciós sablonját, lehetővé téve az opciók közötti keresést, vagy azok alcsoportokba rendezését.

Megjegyzés

Előnyben részesítse a natív HTML select elemet, mivel az alapértelmezés szerint biztosítja az akadálymentességi funkciókat, és jobb felhasználói felülettel rendelkezik mobil eszközökön. Ez a komponens összetettebb felhasználási esetekhez készült, hogy áthidalja a natív elem korlátait.

Tulajdonságok

Név	Típus	Leírás
choices	array	opcionális. A legördülő listában megjelenítendő choice-ok listája.
class	string	opcionális. Az osztálynév, amely a SelectMenu komponens gyökerére van beállítva.
groups	array	opcionális. A group-ok listája, amelyek choices-t tartalmaznak a legördülő menüben való megjelenítéshez.
multiSelect	boolean	opcionális. Többszörös kiválasztás engedélyezése. Amikor a többszörös kiválasztás engedélyezett, a kiválasztott értékek tag-ként jelennek meg a SelectMenu bemenetben.
togglerClass	string	opcionális. Az osztálynév, amely a kapcsoló gombra van beállítva.
required	boolean	opcionális. Megadható, hogy a kiválasztott érték visszavonható-e.
searchable	boolean	opcionális. Megadható, hogy a keresőmező látható-e a legördülő menüben.
searchPlaceholder	string	opcionális. A keresőmező helyőrzőjeként megjelenített szöveg.
value	any	opcionális. Jelenleg kiválasztott érték. Bármilyen típusú lehet.
onSelect	function	opcionális. Visszahívás, amely akkor hajtódik végre, amikor egy opciót választanak.

A choice alakja a következő:

• value a választás tényleges értéke. Általában egy technikai szöveg, de lehet any típusú is.

• label az opcióhoz társított megjelenített szöveg. Ez általában egy barátságosabb és lefordított string.

A group alakja a következő:

• A choices a megjelenítendő choice lista ehhez a csoporthoz.

• label a csoporthoz társított megjelenített szöveg. Ez egy string, amely a csoport tetején jelenik meg.

Example

A következő példában a SelectMenu négy választási lehetőséget fog megjeleníteni. Az egyikük az opciók tetején jelenik meg, mivel nincs hozzá társított csoport, de a többi a csoportjuk címkéje által van elválasztva.

import { Component, xml } from "@odoo/owl";
import { SelectMenu } from "@web/core/select_menu/select_menu";

class MyComponent extends Component {
  static template = xml`
    <SelectMenu
      choices="choices"
      groups="groups"
      value="'value_2'"
    />
  `;

  get choices() {
    return [
        {
          value: "value_1",
          label: "First value"
        }
    ]
  }
  get groups() {
    return [
      {
          label: "Group A",
          choices: [
              {
                value: "value_2",
                label: "Second value"
              },
              {
                value: "value_3",
                label: "Third value"
              }
          ]
      },
      {
          label: "Group B",
          choices: [
              {
                value: "value_4",
                label: "Fourth value"
              }
          ]
      }
    ]
  }
}

A toggler megjelenését is testre szabhatja, és egyedi sablont állíthat be a választásokhoz, a megfelelő komponens slot-jainak használatával.

<SelectMenu
  choices="choices"
  groups="groups"
  value="'value_2'"
>
  Make a choice!
  <t t-set-slot="choice" t-slot-scope="choice">
    <span class="coolClass" t-esc="'👉 ' + choice.data.label + ' 👈'" />
  </t>
</SelectMenu>

Amikor a SelectMenu több választással van használva, a value propoknak egy Array-t kell tartalmazniuk a kiválasztott választások értékeivel.

Összetettebb felhasználási esetekhez testre szabhatja a legördülő menü alsó területét a bottomArea slot használatával. Itt úgy döntünk, hogy egy gombot jelenítünk meg a keresési bemenetben beállított megfelelő értékkel.

<SelectMenu
    choices="choices"
>
    <span class="select_menu_test">Select something</span>
    <t t-set-slot="bottomArea" t-slot-scope="select">
        <div t-if="select.data.searchValue">
            <button class="btn text-primary" t-on-click="() => this.onCreate(select.data.searchValue)">
                Create this article "<i t-esc="select.data.searchValue" />"
            </button>
        </div>
    </t>
</SelectMenu>

CímkékLista

Helyszín

@web/core/tags_list/tags_list

Leírás

Ez a komponens képes címkék listáját megjeleníteni lekerekített tablettákban. Ezek a címkék egyszerűen felsorolhatnak néhány értéket, vagy szerkeszthetők is lehetnek, lehetővé téve az elemek eltávolítását. Lehetséges korlátozni a megjelenített elemek számát az itemsVisible tulajdonság használatával. Ha a lista hosszabb, mint ez a korlát, a további elemek száma egy körben jelenik meg az utolsó címke mellett.

Tulajdonságok

Név	Típus	Leírás
displayBadge	boolean	opcionális. Meghatározza, hogy a címke jelvényként jelenik-e meg.
displayText	boolean	opcionális. Meghatározza, hogy a címke szöveggel jelenik-e meg vagy sem.
itemsVisible	szám	opcionális. A listában látható címkék korlátja.
tags	array	a komponensnek adott tag elemek listája.

A tag alakja a következő:

• A colorIndex egy opcionális színazonosító.

• Az icon egy opcionális ikon, amely közvetlenül a megjelenített szöveg előtt jelenik meg.

• Az id a címke egyedi azonosítója.

• Az img egy opcionális kép, amely körben jelenik meg, közvetlenül a megjelenített szöveg előtt.

• Az onClick egy opcionális visszahívás, amely az elemhez rendelhető. Ez lehetővé teszi a szülő elem számára, hogy kezelje a címkére kattintáskor végrehajtandó funkciókat.

• Az onDelete egy opcionális visszahívás, amely az elemhez rendelhető. Ez lehetővé teszi az elem eltávolítását a címkék listájából, és a szülő elemnek kell kezelnie.

• A text a címkéhez társított megjelenített string.

Example

A következő példában egy TagsList komponens használatos több címke megjelenítésére. A fejlesztő feladata, hogy a szülőből kezelje, mi történik, amikor a címkére kattintanak, vagy amikor a törlés gombot megnyomják.

import { Component, xml } from "@odoo/owl";
import { TagsList } from "@web/core/tags_list/tags_list";

class Parent extends Component {
  static template = xml`<TagsList tags="tags" />`;
  static components = { TagsList };

  setup() {
    this.tags = [{
        id: "tag1",
        text: "Earth"
    }, {
        colorIndex: 1,
        id: "tag2",
        text: "Wind",
        onDelete: () => {...}
    }, {
        colorIndex: 2,
        id: "tag3",
        text: "Fire",
        onClick: () => {...},
        onDelete: () => {...}
    }];
  }
}

Az egyes címkékhez rendelt attribútumoktól függően megjelenésük és viselkedésük eltérő lesz.