storybook 添加argTypes.controls.只读选项

4ktjp1zp  于 2022-10-29  发布在  其他
关注(0)|答案(2)|浏览(257)

您的功能请求是否与问题相关?请描述

目前,可以disable一个arg类型,或者让它消失。请参见https://storybook.js.org/docs/react/essentials/controls#disable-controls-for-specific-properties

export default {
  component: YourComponent,
  title:'My Story',
  argTypes:{
    // foo is the property we want to remove from the UI
    foo:{
      table:{
        disable:true // Will hide the row in the table
      }
    }
  }
};
export default {
  component: YourComponent,
  title:'My Story',
  argTypes:{
    // foo is the property we want to remove from the UI
    foo:{
      control:{
        disable:true // Will show the control but display "-" instead of the value and it won't be editable
      }
    }
  }
};

但是,如果将值设置为只读,则无法显示该值。

描述您想要的解决方案

export default {
  component: YourComponent,
  title:'My Story',
  argTypes:{
    // foo is the property we want to remove from the UI
    foo:{
      control:{
        readonly: true // Would show the control and display its value but won't make it editable
      }
    }
  }
};

描述您考虑过的替代方案

没有。

您是否能够帮助实现该功能?

我可以,但从来没有贡献的基础代码,不知道从哪里开始。

其他上下文

目的是在显示值的同时禁用更改值的功能。
当我们希望用户看到值时,它会很有用,但编辑它会让人感到困惑,比如初始化属性是为了初始化状态,如果手动更新它将不会有任何效果。在这种情况下,看到实际值是有用的,但编辑它会让人困惑,因为它不会反映在组件上。

相关问题