フクロウコンポーネント

The Odoo Javascript framework uses a custom component framework called Owl. It is a declarative component system, loosely inspired by Vue and React. Components are defined using QWeb templates, enriched with some Owl specific directives. The official Owl documentation contains a complete reference and a tutorial.

重要

コードは web モジュールにありますが、別の GitHub リポジトリからメンテナンスされています。 Owl への変更は、https://github.com/odoo/owl のプルリクエストで行う必要があります。

注釈

現在、すべてのOdooバージョン(バージョン14から)は、同じOwlバージョンを共有しています。

Owl コンポーネントの使用

Owl documentation はすでにOwl framework を詳細にドキュメントしているため、このページは Odoo 固有の情報のみを提供します。 まずは、Odoo で簡単な構成要素を作る方法を見てみましょう。

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++;
    }
}

この例では、Owl がグローバル名前空間のライブラリとして owl`として利用可能であることを示しています: Odoo のほとんどのライブラリと同じように単純に利用できます。 ここでテンプレートを静的なプロパティとして定義しましたが、`static キーワードを使用しないでください。 一部のブラウザーでは使用できません(Odoo javascript コードは Ecmascript 2019 準拠している必要があります)。

ここでは、`xml`ヘルパーの助けを借りて、javascriptのコードでテンプレートを定義しますが、始めるのに便利です。 実際には、Odoo のテンプレートは xml ファイルで定義する必要があります。 その場合、コンポーネントはテンプレート名のみを定義する必要があります。

実際には、ほとんどのコンポーネントは 2 または 3 ファイルを同じ場所に定義する必要があります: javascript ファイル (my_component) です。 s), テンプレートファイル (my_component.xml ) とオプションで scss (またはcss) ファイル (my_component. css). これらのファイルは、いくつかのアセットバンドルに追加される必要があります。 Webフレームワークは、javascript/cssファイルのロードとテンプレートの読み込みを処理します。

上記のコンポーネントを定義する方法は次のとおりです:

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

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

    ...
}

そして、テンプレートは対応する xml ファイルにあります。

<?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>

注釈

テンプレート名は addon_name.ComponentName の規約に従います。

関連項目

ベストプラクティス

最初に、コンポーネントはクラスなので、コンストラクタを持っています。しかし、コンストラクタはjavascriptでは特別なメソッドであり、決して上書きできません。 Odoo ではこれが時折便利なパターンなので、Odoo のコンポーネントが constructor メソッドを直接使用しないようにする必要があります。 代わりに、コンポーネントは setup メソッドを使用します。

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

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

もう一つの良い方法は、 addon_name.ComponentName というテンプレート名に一貫した規則を使用することです。これにより、doo アドオン間の名前の衝突を防ぐことができます。

参照リスト

Odoo Web クライアントは Owl コンポーネントで構築されています。 簡単にするために、Odoo javascriptフレームワークは、いくつかの一般的な状況で再利用できる汎用コンポーネントのスイートを提供します。 例えばドロップダウンやチェックボックスやデータピッカーなどです このページでは、これらの汎用コンポーネントの使用方法を説明します。

技術名

簡単な説明

ActionSwiper

スワイプ時の操作を行うスイパーコンポーネントです

CheckBox

ラベルの付いた単純なチェックボックスコンポーネント

ColorList

から選択する色のリスト

ドロップダウン

フル機能のドロップ

Notebook

タブを使用してページ間を移動するためのコンポーネント

Pager

ペジネーションを処理する小さな構成要素です

SelectMenu

異なるオプションから選択するドロップダウンコンポーネント

TagsList

丸みを帯びたピルに表示されるタグのリスト

ActionSwiper

ロケーション

@web/core/action_swiper/action_swiper

説明

これは、要素が水平方向にスワイプされたときにアクションを実行できるコンポーネントです。 スワイパーはアクションを追加するためにターゲット要素をラップしています。 ユーザーがその幅の一部を通過したスワイパーを解放すると、アクションが実行されます。

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

コンポーネントを使用する最も簡単な方法は、上記のように xml テンプレート内でターゲット要素を直接使用することです。 しかし、時には、既存の要素を拡張し、テンプレートを複製したくない場合があります。

既存の要素の動作を拡張したい場合は、要素を直接ラップして内部に配置する必要があります。 また、要素がスワイプ可能な場合に管理する props を条件付きで追加することもできます。 アニメーションとスワイプする最小の部分が動作します

このコンポーネントを使用して、レコード、メッセージ、リスト内のアイテムなどと簡単にやり取りできます。

ActionSwiper の使用例

次の例では、基本的な ActionSwiper コンポーネントを作成します。ここでは、スワイプを両方向に有効にします。

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

注釈

右から左への言語(RTL)を使用する場合、アクションは固定されます。

props

名前（name）

型

説明

animationOnMove

Boolean

スワイプ中に翻訳効果が存在するかどうかを決定するオプションの boolean

animationType

String

スワイプ終了後に使用されるオプションのアニメーション (bounce または forwards)

onLeftSwipe

Object

存在する場合、アクションスワイパーは左にスワイプすることができます

onRightSwipe

Object

現時点ではアクションスワイパーは右にスワイプできます

swipeDistanceRatio

数値

アクションを実行するためにスワイプする必要があるオプションの最小幅比

onLeftSwipe と onRightSwipe プロパティの両方を同時に使用できます。

左右スワイプに使用される Object には以下を含める必要があります：

  • action は呼び出し可能な`Function` がコールバックとして機能します。スワイプが指定された方向に完了すると、そのアクションが実行されます。

  • `icon`は、通常はアクションを表すアイコンクラスです。`string`でなければなりません。

  • bgColor は背景色です。 bootstrapコンテキストカラー (danger, info, secondary, success, warning)のいずれかになります。

スワイパーの動作と視覚的な側面を定義するには、これらの値を指定する必要があります。

例: 既存のコンポーネントを拡張

次の例では、xpath を使用して、ActionSwiper コンポーネント内の既存の要素をラップできます。 ここでは、メールで既読としてメッセージをマークするスワイパーが追加されました。

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

CheckBox

ロケーション

@web/core/checkbox/checkbox

説明

これは、その隣にラベルが付いた単純なチェックボックスコンポーネントです。 チェックボックスはラベルにリンクされています。チェックボックスは、ラベルがクリックされるたびに切り替えられます。

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

props

名前（name）

型

説明

数値

boolean

true の場合チェックボックスがチェックされています。チェックされていない場合はチェックされていません

disabled

boolean

trueの場合チェックボックスは無効になりますそうでなければ有効になります

カラーリスト

ロケーション

@web/core/colorlist/colorlist

説明

ColorList では、定義済みリストから色を選択できます。 デフォルトでは、コンポーネントは現在選択されている色を表示し、canToggle プロパティが存在するまで展開できません。 異なるプロパティは、その動作を変更したり、リストを常に展開したり、クリックされるとトグルとして動作させることができます。 を選択すると、選択されるまで使用可能な色のリストが表示されます。

props

名前（name）

型

説明

canToggle

boolean

任意です。カラーリストがクリック時にリストを展開できるかどうか

色

配列

コンポーネントに表示する色のリスト。それぞれの色には固有の id があります。

forceExpanded

boolean

任意です。true の場合、リストは常に展開されます

isExpanded

boolean

任意です。trueの場合、リストはデフォルトで展開されます

onColorSelected

function

色が選択されるとコールバックが実行されます

selectedColor

number

任意です。選択されている色 id

id の色 は次のとおりです。

Id

色

0

No color

1

Red

2

橙

3

黄

4

Light blue

5

ダークパープル

6

サーモンピンク

7

Medium blue

8

ダークブルー

9

Fuchsia

12

Green

11

Purple

ロケーション

@web/core/dropdown/dropdown と @web/core/dropdown/dropdown_item

説明

ドロップダウンでは、トグルがクリックされたときに項目のリストを表示することができます。 ドロップダウンアイテムと組み合わせることで、コールバックを呼び出し、項目が選択されたときにメニューを閉じることができます。

ドロップダウンは驚くほど複雑なコンポーネントで、彼らが提供する機能のリストは以下のとおりです。

  • クリック時にアイテムリストを切り替えます

  • 外のクリックで閉じる

  • アイテムを選択したときに関数を呼び出します。

  • 必要に応じてアイテムが選択されたときにアイテムリストを閉じます

  • SIY: 自分でスタイル

  • 任意のレベルまでのサブドロップダウンをサポート

  • ドロップダウンを開く/閉じるか、ドロップダウンアイテムを選択する設定可能なホットキーです。

  • キーボードナビゲーション (矢印、タブ、Shift+タブ、ホーム、終了、入力とエスケープ)

  • ページがスクロールまたはサイズ変更されるたびに自分自身を再配置します

  • スマートに開くべき方向を選択しました(右から左への方向は自動的に処理されます)。

  • 直接的な兄弟のドロップダウン: 1つが開いているとき、ほかの人をホバーで切り替えます

<Dropdown/>`コンポーネントを適切に使用するには、2つの`OWLスロット を追加する必要があります:

  • default slot: ドロップダウンの toggle 要素が含まれています。 デフォルトでは、クリックイベントがこの要素に追加され、ドロップダウンを開いて閉じます。

  • content slot: ドロップダウンメニュー自体の 要素 を含み、ポップオーバーの中にレンダリングされます。 必須ではありませんが、いくつかの`DropdownItem`をこのスロットに入れることができます。これらのアイテムが選択されると、ドロップダウンは自動的に閉じます。

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

入れ子になったドロップ

ドロップダウンは入れ子にすることができます。これを行うには、他のドロップダウンのコンテンツスロット内に新しいドロップダウンコンポーネントを置きます。 親ドロップダウンが開いている場合、子ドロップダウンはホバーで自動的に開きます。

デフォルトでは、DropdownItem を選択すると、ドロップダウンツリー全体が閉じられます。

Example

この例では、New サブ要素のサブメニューを使用して、ネストされた File ドロップダウン メニューを作成する方法を示します。

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

以下の例では、再帰的にテンプレートを呼び出し、ツリーのような構造を表示します。

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

制御されたドロップダウン

必要に応じて、コードを使用してドロップダウンを開いたり閉じたりすることもできます。 これを行うには、useDropdownState`フックと`state`プロパティを使用する必要があります。 `useDropdownState は、`open`と`close`メソッド(と`isOpen`getter)を持つオブジェクトを返します。 オブジェクトをコントロールしたいドロップダウンの`state`プロパティに与え、それぞれの関数を呼び出すと、ドロップダウンが開いて閉じます。

デフォルトのクリックハンドラをトグルに追加したくない場合は、 manual を true に設定することもできます。

Example

次の例は、マウント時に自動的に開き、内部のボタンをクリックしたときにのみ閉じる確率が50%であることを示しています。

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();
    }
  }
}

メモ帳

ロケーション

@web/core/notebook/notebook

説明

メモ帳はタブ付きのインターフェイスに複数のページを表示するように作られています。 タブは、要素の上部に配置して水平に表示することも、左側に垂直レイアウトを表示することもできます。

`slot`を使用するか、専用の`props`を使用してインスタンス化する方法は2つあります。

isDisabled 属性でページを無効にすることができます。スロットノードに直接設定します。 またはページ宣言では、メモ帳が props として与えられた pages で使用されている場合。 無効にすると、対応するタブも灰色表示になり、非アクティブになります。

props

名前（name）

型

説明

anchors

object

オプションを選択します。表示されないタブ内の要素へのアンカーナビゲーションを許可します。

className

string

任意です。クラス名はコンポーネントのルートに設定されます。

defaultPage

string

任意です。デフォルトで表示するページ「id」。

アイコン

配列

任意です。タブで使用されるアイコンの一覧です。

オリエンテーション

string

任意です。タブの方向が 水平 か vertical か。

onPageUpdate

function

オプションです。ページが変更されるとコールバックが実行されます。

ページ

配列

任意です。テンプレートから取り込むための page のリストを保持します。

Example

最初の方法は、コンポーネントのスロットにページを設定することです。

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

ページを定義するもう一つの方法はpropsを渡すことです。これは、同じ構造を共有しているページがある場合に便利です。 最初に、使用するページテンプレートごとにコンポーネントを作成します。

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!",
        },
      },
    ]
  }
}

どちらの例もここに示されています:

垂直レイアウトと水平レイアウトの例

ペガー

ロケーション

@web/core/pager/pager

説明

ページャーはページネーションを扱うための小さなコンポーネントです。ページは offset と limit (ページのサイズ) によって定義されます。 現在のページと total 要素数を表示します。たとえば、"9-12 / 20"です。 前の例では、`offset`は8、`limit`は4、`total`は20です。ページ間を移動するための2つのボタン("Previous"と"Next")があります。

注釈

ページャーはコントロールパネルでメインの使用以外の場所でも使用できます。 コントロールパネルのページャーを操作するには、 usePager フックを参照してください。

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

props

名前（name）

型

説明

offset

number

ページの最初の要素のインデックス。最初は 0 で始まりますが、ページャーは offset + 1 を表示します。

limit

number

ページのサイズ。offset と limit の合計は、ページの最後の要素のインデックスに対応します。

合計

number

ページがアクセスできる要素の合計数。

onUpdate

function

ページがページャによって変更されたときに呼び出される関数。 この関数は非同期であり、この関数が実行されている間はページャーを編集できません。

isEditable

boolean

現在のページをクリックして編集することができます（デフォルトでは true ）。

withAccessKey

boolean

前のページのボタンにアクセスキー`p`を、次のページのボタンに`n`をバインドします（デフォルトは`true`）。

選択メニュー

ロケーション

@web/core/select_menu/select_menu

説明

このコンポーネントは、ネイティブの select 要素を使用するよりも多くを行いたい場合に使用できます。 独自のオプションテンプレートを定義して、オプション間で検索したり、サブセクションでグループ化したりすることができます。

注釈

デフォルトのアクセシビリティ機能を提供し、モバイルデバイスでより優れたユーザーインターフェイスを持つため、ネイティブの HTML の select 要素を好みます。 このコンポーネントは、ネイティブ要素の制限を克服するために、より複雑なユースケースのために使用するように設計されています。

props

名前（name）

型

説明

choices

配列

任意です。ドロップダウンに表示する choice の一覧です。

class

string

任意です。SelectMenuコンポーネントのルートにクラス名を設定します。

groups

配列

省略可能です。ドロップダウンに表示する choices を含む`group`のリストです。

multiSelect

boolean

任意です。複数選択を有効にします。複数選択が有効になっている場合、選択された値は SelectMenu 入力に :ref:`tag <frontend/tags_list>`s として表示されます。

togglerClass

string

任意です。切り替えボタンにクラス名を設定します。

required

boolean

オプション。選択した値を選択解除できるかどうか。

searchable

boolean

オプション。検索ボックスがドロップダウンに表示されているかどうか。

searchPlaceholder

string

任意です。検索ボックスのプレースホルダとして表示されるテキスト。

数値

any

任意です。現在選択されている値です。任意の種類の値を指定できます。

onSelect

function

オプションです。オプションが選択されたときにコールバックが実行されます。

`選択`の形は以下のとおりです。

  • `value`は実際に選択した値です。通常は技術的な文字列ですが、`any`型でも構いません。

  • `label`はオプションに関連付けられた表示テキストです。これは通常、よりフレンドリーで翻訳された`string`です。

group の形は次のとおりです。

  • choices は、このグループに表示する choice のリストです。

  • `label`はグループに関連付けられた表示テキストです。これはグループの上部に表示される`string`です。

Example

次の例では、SelectMenuには4つの選択肢が表示されます。 そのうちの1つはオプションの上に表示されます。グループが関連付けられていないためです。 しかし他のグループはグループのラベルで区切られています

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"
              }
          ]
      }
    ]
  }
}

また、トグルの外観をカスタマイズし、適切なコンポーネント slot を使用して、選択のためのカスタムテンプレートを設定することもできます。

<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>
SelectMenuの使用例とカスタマイズの例

SelectMenuが複数の選択で使用される場合、value propsは選択した選択肢の値を含む`Array`でなければなりません。

複数選択で使用されるSelectMenuの例

もっと高度な使用例では、bottomArea スロットを使ってドロップダウンの下部をカスタマイズできます。 ここでは、検索入力に対応する値が設定されたボタンを表示します。

<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>
SelectMenuの下部エリアカスタマイズの例

TagsList

ロケーション

@web/core/tags_list/tags_list

説明

このコンポーネントは丸みを帯びたピルのタグのリストを表示できます。 これらのタグは、単にいくつかの値をリストすることができますか、またはアイテムの削除を可能にする編集可能です。 `itemsVisible`プロパティを使用すると、表示されるアイテムの数を制限することができます。 リストがこの制限よりも長い場合、追加項目の数は最後のタグの隣に円で表示されます。

props

名前（name）

型

説明

displayBadge

boolean

オプション。タグがバッジとして表示されるかどうか。

displayText

boolean

任意です。タグがテキストで表示されるかどうか。

itemsVisible

number

任意です。リスト内の表示タグの制限。

タグ

配列

コンポーネントに与えられた tag 要素のリストです。

tag の形は以下のとおりです。

  • colorIndex は任意の色 id です。

  • `icon`は、表示されるテキストの直前に表示されるオプションのアイコンです。

  • id はタグの一意の識別子です。

  • img は、表示されるテキストの直前に円形に表示される任意の画像です。

  • onClick は、要素に与えることができる任意のコールバックです。 これにより、親要素はクリックされたタグに応じて任意の機能を扱うことができます。

  • onDelete は、要素に与えることができる任意のコールバックです。 これにより、タグのリストからアイテムを削除できるようになり、親要素によって処理されなければなりません。

  • text はタグに関連付けられている string です。

Example

次の例では、TagsList コンポーネントを使用して複数のタグを表示します。 開発者は、タグが押されたとき、または削除ボタンがクリックされたときに何が起こるかを親から処理します。

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: () => {...}
    }];
  }
}

各タグに与えられる属性によって、その外観と動作は異なります。

異なるプロパティや属性を使用した TagsList の例