需要主题 - 不

这个 neeto-themes-nano 允许我们在 neto 中构建和使用主题 应用。 这个纳米出口 @bigbinary/neeto-themes-frontend 国家防范机制一揽子计划 财务报告和审定财务报表 neeto-themes-engine 铁路发动机.

目录

1. 用主机应用程序开发
   • 发动机
     • 安装
     • 使用量
   • 前端软件包
     • 安装
     • 发展指示
     • 使用量
2. 出版指令

用主机应用程序开发

发动机

安装

1. 将此行添加到您的应用程序的 Gemfile 中 :

    source "NEETO_GEM_SERVER_URL" do
      # ..existing gems
   
      gem 'neeto-themes-engine'
    end
   

2. 然后执行:

   bundle install
   

3. 将此行添加到您的应用程序 config/routes.rb 文件

    mount NeetoThemesEngine::Engine, at: "/neeto_themes"
   

4. 在表格中添加所需的迁移 db/migrate 文件夹。 运行以下 命令复制从引擎到主机应用程序的迁移.

   bundle exec rails neeto_themes_engine:install:migrations
   bundle exec rails db:migrate
   

5. 添加以下一行为 models/organization.rb 文档.

   has_many :themes, class_name: "NeetoThemesEngine::Theme", as: :owner
   

6. 配置在关联下添加的模型以附加主题 .

   has_one :theme_entity, as: :themeable, class_name: "NeetoThemesEngine::ThemeEntity", dependent: :destroy
   has_one :theme, through: :theme_entity, class_name: "NeetoThemesEngine::Theme"
   

使用量

1. 创建引擎初始化器

   创建名为的文件 neeto_themes_engine.rb 输入 config/initializers 文件夹.

2. 自定义主题方案

   引擎支持根据主机需求定制主题计划 应用。 此方案将在前端使用以渲染主题 属性。 缩写:

    NeetoThemesEngine.theme_properties_schema = [
      { kind: "color", key: "primary_color", default_value: "#2D36D4" },
      { kind: "color", key: "secondary_color", default_value: "#ECF4FF" },
    ]
   

   阵列中的每个对象应该有以下密钥:

   • key:主题属性的独特标识符.

   • kind:主题属性的类型.

   可包含的可选密钥 :

   • default_value: 在创建新主题时设置默认值.

   • hidden:这个布尔道具有助于隐藏UI的财产,但是 允许将其作为 CSS 变量使用.

   • depends_on:提供对其他属性的依赖。 如果一个键是 ,它将检查它的值,并且只有在UI中出现,如果 附属财产存在.

   • parent_class: 此密钥需要为自定义 SS 特性添加才能工作 适当的。 更多见 自定义 css 特性.

   • use_default_image_size: 曾应用默认图像Size 道具传递给 图像加载器组件 .

   • default_image_size: 曾经通过默认图像Size 道具 图像加载器组件 。 应该是一个对象 width 财务报告和审定财务报表 height 属性.

   • fixed_aspect_ratio:过去通过固定的SpectRatio道具 图像加载器组件 。 应该是一个对象 width 财务报告和审定财务报表 height 属性.

   • max_image_size_in_mb: MB 中上传图像的最大尺寸 image 同类财产。 接受小数,例如: 0.1默认为 1。 。 。 .

3. 提供 Css 变量前缀

   此值将用于前置所有 CSS 变量 。 缩写:

     NeetoThemesEngine.css_variable_prefix = "neeto-cal"
   

   为主题属性生成变量 primary_color 将会是 --neeto-cal-primary-color。 。 。 .

4. 提供主题属性所附带的实体

   此值将被用于确定主题属性所在的实体 随函附上。 我们可以提供多个实体。 缩写:

     NeetoThemesEngine.valid_themeable_types = ["Meeting", "Booking"]
   

5. 提供默认主题名称 (备选)

   此提供值将用来识别默认主题 。 如果没有 ,默认主题将命名为"Plain Blue".

     NeetoThemesEngine.default_theme_name = "My theme"
   

前端软件包

安装

1. 添加数据 neeto-themes-frontend 软件包到 package.json

   yarn add @bigbinary/neeto-themes-frontend
   

发展指示

检查 前端软件包开发指南 用于开发前端软件包的分步指令.

使用量

构成部分

1. 导入 NeetoThemesBuilder 构成部分从 @bigbinary/neeto-themes-frontend数字 :

   import React from "react";
   import { NeetoThemesBuilder } from "@bigbinary/neeto-themes-frontend";
   
   const App = () => (
     <NeetoThemesBuilder
       entityId={meeting?.id}
       entityType="Meeting"
       thumbnail={Thumbnail}
     >
       <Preview />
     </NeetoThemesBuilder>
   );
   
   export default App;
   

   道具 :

   • entityId (需要):主题所依附的实体的ID.
   • entityType (需要):实体的类型(如"会","会"等).
   • thumbnail (需要):一个作为主题缩略图显示的回放组件.
   • children (需要):要渲染的预览组件.
   • onPropertiesChange (可选的):主题属性改变时触发回调函数.
   • defaultImageSize (可选) : 图像上传的默认图像大小 。 应该是一个对象 width 财务报告和审定财务报表 height 属性.
   • fixedAspectRatio (可选):图像上传的固定相相相比. 应该是一个对象 width 财务报告和审定财务报表 height 属性.
   • helpDocUrl (可选):帮助文档的URL.
   • isTemplateThemesEnabled (可选的):布尔以启用模板主题特性 。 默认 : false。 。 。 .
   • pageTitle (可选):主题构建器自定义页面标题.
   • onApplyThemeSuccess (可选):一个主题成功应用时触发的回调函数.
   • onUpdateThemeSuccess (可选的):一个主题成功更新时触发的回调函数.
   • onApplyGlobalThemeSuccess (可选):当一个全局主题被成功应用时触发回调函数.
   • helpPopoverProps (可选的):向帮助弹出组件传递的道具.
   • enabledFeatures (可选) : 用于控制启用哪些特性的对象 。 默认 : { customCSS: true }设置 { customCSS: false } 以禁用自定义 CSS 特性.
   • proFeatures (可选):指定哪些特性应被标记为"pro"特性的对象. 示例 { customCSS: true } 将自定义 CSS 标记为亲特性 .

钩子

1. 导入 useThemeUtils 钩从“ @ bigbinary/ neto-主题- 前端”

   import { useThemeUtils } from "@bigbinary/neeto-themes-frontend";
   
   const { setTheme, previewingTheme, currentTheme } = useThemeUtils();
   

• setTheme:此方法用于设定实体的主题.

• previewingTheme: 此对象包含当前预览主题 .

• currentTheme: 此对象包含当前应用到 实体.

自定义 CSS

neeto-themes-nano 将会在您的应用程序中输入自定义 css 作为 a 的一部分 主题。 你可以提供 enabledFeatures={{ customCSS: false }} 内 NeetoThemesBuilder 手动 隐藏 customCSS 特性. 你可以把它配对 proFeatures={{ customCSS: true }} 来展示它 已禁用 在非辅助性案件中.

此特性 要求将初始化器与附加属性一同设置 { kind: "custom_css", key: "custom_css", default_value: "", parent_class: "neeto-form-eui" }。 。 。 . 这个 parent_class 键将用作导入样式和 CSS 的父键 筑巢而来. 这将确保样式不会被注入到您不插入的页面 想要它,并确保样式规则针对此类以外的元素 将不适用。 请确保所提供的价值parent_class实值 以 CSS 类包装方式显示。 例如:neeto-form-eui 在 netoForm 中,所有需要应用主题的外部页面都存在. 它还提供了一个代码编辑器,其中带有语法加亮,这取决于 摩纳哥编辑 作为对等点 依赖性。 请在主机应用程序中安装, 以便正常工作 .

出版指令

传统发展

咨询 构建和释放软件包 关于如何出版的详细指南.