owl-properties

owl-properties

基于Odoo OWL 2的属性面板组件库

简介

owl-properties 是一个基于 Odoo OWL 2 框架设计的属性面板组件库，提供简洁易用的标签页切换功能，适用于需要分类展示属性或内容的场景。

安装

# 使用npm
npm install owl-properties

# 使用yarn
yarn add owl-properties

组件

PropertiesPanel

属性面板主组件，提供标签页切换和内容显示功能。

属性

属性	类型	默认值	说明
defaultActive	string	''	默认激活的标签页值
tabs	Array<TabProps>	[]	标签页配置数组
forceRender	boolean	false	是否强制渲染所有标签页内容
onChangeTab	function	-	标签页切换回调函数

TabProps类型说明

属性	类型	必选	说明
label	string	是	标签页显示的文本
value	string	是	标签页的唯一标识
component	Component	否	标签页内容对应的组件
props	Object	否	传递给组件的属性
icon	string	否	标签页图标html片段，需要使用markup包裹

使用示例

import { PropertiesPanel } from 'owl-properties';
import { Component, markup } from '@odoo/owl';

class MyComponent extends Component {
  static components = { PropertiesPanel };

  static template = xml`
    <PropertiesPanel 
      defaultActive="'tab1'" 
      tabs="tabs" 
      onChangeTab.bind="onTabChange"
    />
  `;

  setup() {
    this.tabs = [
      {
        label: '标签1',
        value: 'tab1',
        component: TabContent1,
        props: {
          /* 传递给组件的属性 */
        },
      },
      {
        label: '标签2',
        value: 'tab2',
        component: TabContent2,
        icon: markup('<span>icon</span>'),
      },
    ];

    this.onTabChange = (tabValue) => {
      console.log('当前激活标签:', tabValue);
    };
  }
}

Tab

标签页组件，用于显示和切换标签。

属性

属性	类型	默认值	说明
active	string	-	当前激活的标签页值
tabs	Array<TabProps>	-	标签页配置数组
onChange	function	-	标签页切换回调函数
className	string	-	自定义类名

Empty

空状态组件，当没有内容时显示。

开发

# 安装依赖
yarn install

# 启动开发服务
yarn start

# 构建
yarn build

# 代码检查
yarn eslint

许可证

LGPL-3.0