zoukankan      html  css  js  c++  java
  • [OHIF-Viewers]医疗数字阅片-医学影像-Module: Panel-自定义面板-上

    [OHIF-Viewers]医疗数字阅片-医学影像-Module: Panel-自定义面板-上

    https://docs.ohif.org/extensions/modules/panel.html

    Module: Panel

    An extension can register a Panel Module by defining a getPanelModule method. The panel module provides the ability to define menuOptions and components that can be used by the consuming application. components are React Components that can be displayed in the consuming application's "Panel" Component.

    Panel Extension

    A panel extension example

    The menuOptions's target key points to a registered components's id. A defaultContext is applied to all menuOptions; however, each menuOption can optional provide it's own context value.

    The getPanelModule receives an object containing the ExtensionManager's associated ServicesManager and CommandsManager.

    import MyComponent from './MyComponent.js';
    
    export default {
      id: 'example-panel-module',
    
      /**
       * @param {object} params
       * @param {ServicesManager} params.servicesManager
       * @param {CommandsManager} params.commandsManager
       */
      getPanelModule({ servicesManager, commandsManager }) {
        return {
          menuOptions: [
            {
              // A suggested icon
              // Available icons determined by consuming app
              icon: 'list',
              // A suggested label
              label: 'Magic',
              // 'right' or 'left'
              from: 'right',
              // The target component to toggle open/close
              target: 'target-component-id',
              // UI Hint; If the target panel is in a "disabled" state
              isDisabled: studies => {
                return false;
              },
              // Overrides `defaultContext`, if specified
              context: ['ACTIVE_VIEWPORT:MAGIC'],
            },
          ],
          components: [
            {
              id: 'target-component-id',
              component: MyComponent,
            },
          ],
          defaultContext: ['ROUTE:VIEWER'],
        };
      },
    };
  • 相关阅读:
    es6语法快速上手(转载)
    width百分比
    利用switch case 来运行咱们结婚吧
    利用if else来运行咱们结婚吧
    利用if else 来计算车费
    利用switch case判断是今天的第多少天
    利用if else判断是否及格
    利用if,else判断输入的是不是一个正整数
    再练一遍猜拳
    用if else 判断是不是7的倍数等
  • 原文地址:https://www.cnblogs.com/landv/p/13304709.html
Copyright © 2011-2022 走看看