首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Storybook中导入道具选择选项

Storybook是一个用于开发和测试UI组件的开源工具。它提供了一个交互式的开发环境,可以独立于应用程序运行,并且可以展示和测试组件的不同状态和道具选择选项。

在Storybook中导入道具选择选项,可以通过以下步骤完成:

  1. 首先,确保你已经安装了Storybook。你可以通过命令行运行npm install @storybook/react来安装Storybook的React版本,或者根据你的项目需求安装其他版本。
  2. 在你的组件文件中,导入所需的道具选择选项。道具选择选项是组件的属性,用于控制组件的不同状态和行为。
  3. 在Storybook的配置文件(通常是.storybook/config.js)中,创建一个新的Story来展示你的组件和道具选择选项。你可以使用Storybook提供的storiesOf函数来创建一个新的Story,并使用add方法来添加不同的道具选择选项。
  4. 例如,假设你有一个名为Button的组件,并且该组件有一个名为size的道具选择选项,可以选择smallmediumlarge。你可以在配置文件中创建一个名为Button的Story,并使用add方法添加不同的size道具选择选项。
  5. 例如,假设你有一个名为Button的组件,并且该组件有一个名为size的道具选择选项,可以选择smallmediumlarge。你可以在配置文件中创建一个名为Button的Story,并使用add方法添加不同的size道具选择选项。
  6. 运行Storybook,通过命令行运行npm run storybook或者根据你的项目配置运行相应的命令。Storybook将会启动一个本地开发服务器,并在浏览器中展示你的组件和道具选择选项。

通过以上步骤,你可以在Storybook中导入道具选择选项,并展示和测试组件的不同状态和行为。这有助于开发人员更好地理解和调试组件,并提供了一个可视化的界面来展示组件的各种用例和应用场景。

腾讯云相关产品和产品介绍链接地址:

以上是腾讯云提供的一些与云计算相关的产品和服务,可以根据具体需求选择适合的产品来支持和扩展你的云计算应用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端基建处理之组件库优化方案

原文:https://juejin.cn/post/7302255044879400998 背景 前段时间职了新公司后,做一些内部前端基建的工作,其中一个工作就是优化现有的frontend-common...接入storybook 初始化storybook 原先的项目中执行命令初始化storybook的相关配置和依赖 npx -p @storybook/cli sb init --type vue 选择...在这个例子中,backgroundColor 的控件是一个颜色选择器,size 的控件是一个下拉列表,选项包括 'small'、'medium' 和 'large'。...options: 用于指定 'select' 类型控件的选项。...,可以本地预览,如果我们要单独把storybook单独部署一个到一个站点,其他开发可以直接打开去看 增加构建命令 package.json中增加命令,构建出storybook的产物 "scripts

37510
  • Angular 工具篇之Storybook

    Storybook 这款工具很强大,它支持很多流行的框架,比如: React React Native Vue Angular Polymer Riot 接下来我们来介绍一下 Angular 项目中如何使用.../cli: $ npm i -g @storybook/cli 成功安装以上依赖后,命令行运行 getstorybook 命令初始化 storybook,该命令会为我们自动生成以下两个 npm script...然后该目录下分别创建两个文件:config.js 和 addons.js 文件。...: string; }; 通过 @storybook/addon-actions 库中导入的 action 方法,我们能够方便地记录用户触发的自定义事件。...core@7.0.0 --save-dev 成功安装完以上依赖后,我们再次运行 npm run storybook 命令,这时打开 http://localhost:6006/ 地址,你将会看到以下内容

    2K20

    Sentry 开发者贡献指南 - 前端(ReactJS生态)

    使用 yarn storybook 本地运行 Storybook 或在 https://storybook.getsentry.net/ 上查看托管版本 PropTypes 使用它们,要明确,尽可能使用共享的自定义属性...Storybook 的配置可以 https://github.com/getsentry/sentry/tree/master/.storybook 中找到。...要在本地运行 Storybook,请在 getsentry/sentry 存储库的根目录中运行 npm run storybook。 它部署某个地方吗?...作为这个选择器的一个很好的奖励,我们确保我们的应用程序是可访问的。它很可能与 name 选项 getByRole('button', {name: /save/i}) 一起使用。...Accessibility/ARIA/ARIA_Techniques#roles getByLabelText/getByPlaceholderText - 用户使用 label 文本查找表单元素,因此测试表单时首选此选项

    6.9K30

    从文档开发框架到package.json,带你走一轮React组件库构建与发布

    经过笔者实践,得出一份React组件库构建时的对比 对比 dumi storybook 国内教程 多 少 安装难度 简单(开箱即用) 一般 组件文档编写 简单(基本全React原生语法) 麻烦(需要额外学习...mdx以及storybook自己实现的语法) 编译体验 快(MFSU,号称比VIte还快) 一般 UI 我喜欢❤️ 真觉得不好看 对比过程我就不说了,都是泪,这是被我废弃的storybook仓库...无法使用,因为Next是约定式导入样式文件,仅允许_app.tsx文件中导入样式 正常项目未配置less-loader无法使用,怎么会有组件库打包继续使用import "xxx.less"这种语法,这本身就是不对的...github pages上进行部署,github pages带有项目名后缀, 而另外一点值得注意的是outputPath,我们填写的是docs,原因就在上图的红圈处,github page目前看到提供的选项就是..., }), ], autoprefixer: { browsers: ['ie>9', 'Safari >= 6'], }, }; 解释一下各个选项

    4K20

    前端食堂技术周刊第 55 期:Rollup v3.0.0、Volar 1.0 Nika、TypeScript 十年

    其他信息 Bun v0.2.0[9] Storybook 7.0 中 Vite 成为内置选项[10] Astro 1.5.0 Release[11] Deno 1.26 Release[12] Ant...周刊一锅端 如果大家还没看过瘾,给大家推荐一下食堂技术周刊的合作伙伴,赶快把他们也抱碗中吧~ 前端早早聊的 18 个成长宝藏库[18]:前端早早鸟,前端早早跑 MDH 前端周刊[19]:大厂一线 P8.../next-level-playground/ [9] Bun v0.2.0: https://github.com/oven-sh/bun/releases/tag/bun-v0.2.0 [10] Storybook...7.0 中 Vite 成为内置选项: https://storybook.js.org/blog/first-class-vite-support-in-storybook/ [11] Astro 1.5.0...NGux3r0P1JJH_z4-vfeksQ [20] DEX 周刊: https://newsletter.dex.group/ 公众号:前端食堂 知乎:童欧巴 掘金:童欧巴 这是一个终身学习的男人,他坚持自己热爱的事情

    61820

    Storybook 7 来了:迄今为止最大的更新

    我们的新 Framework API 会根据你的应用程序设置自动配置 Storybook,包括你选择的构建工具(Webpack 和 Vite)、渲染器(React、Vue、Angular、Svelte、...以组件为中心的自动文档生成 Storybook 7 中,你现在可以直接将文档附加到你的组件上。页面会出现在侧边栏中,与组件的 stories 一起显示,而不是以前的选项卡式用户界面。...此外,它对 JSX 元素内嵌套 markdown 提供了更好的支持。 为了适应一些重大变化,Storybook 将在 7.x 时间范围内继续支持 MDX1 的选择性支持,以确保我们的用户平稳过渡。...使用 MDX 引用导入 stories Storybook 7 鼓励所有用户 CSF3 中定义 stories,然后 MDX 中引用它们。...官方文档里可以了解更多有关这些变化的信息。 改进的交互测试和代码覆盖率 Storybook 迅速成为测试组件的最佳选择。你可以通过向 story 附加 play 函数将其转换为测试。

    51430

    2019年,React 开发者应该掌握的 22 种神奇工具

    我们还可以传递有用的选项以查看更多详细信息,如 generateStatsFile: true ,并且还可以选择生成静态 HTML 文件,保存在开发环境之外的某个地方,以备后用。 2....有很多不同的 React 组件,可供任何人使用,包括选项卡、按钮、图表、表格、导航条、下拉菜单、加载旋转器、日期选择器、面包屑导航(breadcrumbs)、图标、布局等等。 10....Storybook 如果你还不了解 Storybook(https://storybook.js.org/),并且希望能够轻松地构建 UI 组件,我强烈建议你立即使用它。...例如,利用 Storybook README 包,我们可以同一页面上创建 README 文档,同时开发供生产使用的 React 组件。这足以作为常规文档页面: ? 11....一些示例包括诸如道具代理,不同场景下处理各种 UX 的组合之类的概念,甚至还提示了每个开发人员应该避免的一些陷阱。 这是他们页面上的样子,如大家左侧的菜单上看到的那样,有很多信息:) ? 15.

    2.4K21

    2020年值得你去试试的10个React开发工具

    但因为新的工具每天都在不断的出现,开发者尝试时总会有些不知所措。 因此,当为你的新React项目选择合适的IDE,合适的可视化工具甚至是合适的样式时,你都会有很多选择,你该怎么选择合适的?...本文中,我将介绍11个关于React的开发工具,以帮助你选择以及带你了解如何用它们来使你更充分的使用框架。 1....安装完成后,打开Chrome的开发人员工具你就能看到多出了Components和Profiler选项卡,“Components”选项能帮助你查看屏幕上组件列表以及从其他组件派生出的子组件,你能够选择检查甚至编辑组件的状态和属性...使用“Profiler”选项卡,你也可以评估应用程序的性能。 这两个选项都可以Chrome DevTools选项卡上找到,为了能更好的体验该插件的功能和特性,你可以使用这个在线站点去体验。 2....安装DevTools后,在你已经React Dev Tools和React Sight的扩展设置中启用了“允许访问文件URL”选项,你就可以DevTools种找到一个新的名为“React Sight

    7.9K20

    storybook插件说明: integrations与addons推荐

    links插件这个插件比较常用,可以不同story间进行跳转,可以当是个a链接用。links插件文档。knobs插件这个插件厉害了,主要是用来生成变量,并可以进行在线切换用的。比如最简单的切换文字。...docs插件文档viewport插件这个插件可以对tab页新增个选项,跟chrome里的切换不同设备有点像,使用这个功能,就可以把一个组件放入不同设备大小的story里。viewport插件文档。...开发过程中提供帮助。...插件文档地址Readme 插件这个功能有点对标了docs插件,感觉适合纯内部分享使用,它可以对每个story做一个文档说明,并且功能和docs差不多,就是docs是tab页并且可以独立输出,这个是addons...插件文档地址Storybook Playroom Addon 插件可以同时浏览不同分辨率下的效果。

    1K20

    一天一夜,山月写完了这份高效组织 npm script 最佳实践

    dev 与 start 的区别趋于明显,一个为生产环境,一个为开发环境 dev: 开发环境启动项目,一般带有 watch 选项,监听文件变化而重启服务,此时会耗费大量的 CPU 性能,不宜放在生产环境...Hooks -> 如何把新项目快速跑起来 新人职新上手项目,如何把它跑起来,这是所有人都会碰到的问题:所有人都是从新手开始的。... CI 或前端托管平台 Vercel/Netlify 中,对于部署前端项目,最重要的一步就是打包。...开发基础组件库时,可以配置 npm run storybook 进行更好的测试 $ npm run storybook { "scripts": { "storybook": "start-storybook...-p 9001 -c .storybook", "storybook:build": "build-storybook -c .storybook -o .out", "prepublishOnly

    2K20

    花 40 块搞个游戏机「GitHub 热点速览 v.22.27」

    以下内容摘录自微博@HelloGitHub 的 GitHub Trending 及 Hacker News 热帖(简称 HN 热帖),选项标准:新发布 | 实用 | 有趣,根据项目 release 时间分类...GitHub 地址→https://github.com/webhdx/PicoBoot 2.3 UI 资源管理器:storybook 本周 star 增长数 600+ Storybook 是一个 UI...GitHub 地址→https://github.com/storybookjs/storybook 2.4 下一代 Web 框架:fresh 本周 star 增长数:3,250+ New Fresh...本框架同时专注于检测的精度和推理效率,工业界常用的尺寸模型中:YOLOv6-nano COCO 上精度可达 35.0% AP, T4 上推理速度可达 1242 FPS;YOLOv6-s COCO...和之前的送书活动类似,留言点赞 Top3 的小伙伴(棒),小鱼干会努力去找 Repo 的^^ HelloGitHub 交流群现已全面开放,添加微信号:HelloGitHub001 为好友群,可同前端、

    66620

    React 应用架构实战 0x2:构建和文档化组件

    React 中,所有的东西都是组件。这种范式允许我们将用户界面拆分成更小的部分,从而更容易开发应用程序。它还启用了组件的可重用性,因为我们可以多个地方重复使用相同的组件。...使用组件库的优点是它可以提高我们的开发效率,如按钮、对话框和选项卡。此外,某些库默认具有很好的可访问性,因此我们不必像从头开始构建一切那样考虑太多。...例如,我们可以轻松地一个地方更改主色值,并将其应用于整个应用程序,而无需进行任何其他更改。.../link"; # 使用 Storybook Storybook 是一个允许我们隔离环境下开发和测试 UI 组件的工具。可以将其视为制作所有组件目录的工具,它非常适合用于记录组件。...使用 Storybook 的一些好处: Storybook 允许隔离环境中开发组件,而无需重现应用程序的精确状态,从而使开发人员可以专注于他们正在构建的东西 Storybook 作为 UI 组件的目录

    83010

    前端食堂技术周刊第 57 期:Turbopack、Next.js13、Chrome107、Vite3.2、图解 TLS 1.3

    4.Vite 3.2[10] Vite 3.2 发布,主要特性如下: Library 模式下支持多个打包入口; build.modulePreload 构建选项[11]。...下面来看一下好文推荐,本周推荐的好文是: 1. Next.js 中构建一个交互式的 WebGL 体验[26] 2.8K HDR!...周刊一锅端 如果大家还没看过瘾,给大家推荐一下食堂技术周刊的合作伙伴,赶快把他们也抱碗中吧~ 前端早早聊的 18 个成长宝藏库[28]:前端早早鸟,前端早早跑 MDH 前端周刊[29]:大厂一线 P8...3.2: https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md [11] build.modulePreload 构建选项...的新网站: https://storybook.js.org/blog/new-website-for-storybook/ [24] AI 绘画资料合集: https://github.com/hua1995116

    1K20

    大势 | 2018最值得关注的JavaScript趋势

    Angular剩下的拥护者已经表态说Angular会成为企业选择的JS框架,但这一断言尚有待证实,而且2018年未必能得到证实。 Reason Facebook生产使用的一切永远都值得关注。...Storybook 哇哦,2017年Storybook真的是火了。 Storybook是一个定义、开发和测试UI组件的环境。 它从年初的几乎一潭死水变成年中的大规模流行,这要感谢社区的巨大努力。...你可能已经碰到过用Storybook来设计的开源项目了,但如果想自己看看它是怎么用的话,那就看看用Storybook设计的Airbnb的日期选择器。...Facebook开发的Flow是React开发者的优先选择,因为它很容易跟Babel集成,React项目中也使用得很普遍。...5.跟着Relay Modern学,这是React+GraphQL应用的数据抓取选项之一。 6.StorybookStorybookStorybook

    80220

    从零开始,手摸手搭建前端组件库

    MI-vant组件库 打造一个内部的组件库,我们进行代码的重构,以及开发新的功能的时候,抽离公共的组件,减少代码的复用,注重业务与组件的分离,简化耦合度,便于开发与维护。...来支持项目的预览功能引入vue-loader15引vue-markdown-loader等相关插件 支持文档功能babel7为什么要升级到babel7 全局配置 babel.config.js 里的配置默认对整个项目生效...升级注意事项从 babel7 开始,所有的官方插件和主要模块,都放在了 @babel 的命名空间下,从而可以避免 npm 仓库中 babel 相关名称被抢注的问题Babel7 是对整个项目都生效的配置...webpack的配置 所以只能使用storybook中提供的自定义babel和webpack配置 基础设置都配置好了,引入插件的时候 发现插件不能用.............} // compiles Less to CSS }], exclude: /node_modules/ }) 最终选择

    2.8K30

    vue 开发常用工具及配置二

    目录 1,代理后端接口,关于 /api/ping 2,storybook 3,源码 ---- 1,代理后端接口,关于 /api/ping 作者个人工作中喜欢用go语言,因为它简单方便。...浏览器中访问http://0.0.0.0:8080/ping,可以看到接口有返回。 以下是准备后端接口,以便测试。...devServer.proxy配置本地调试接口时特别有用,因为多数情况下,开发环境的接口地址与正式环境是不一致的。...2,storybook 一个组件的配置可能很多,为了让学习者直观查看,可以利用storybook写很多story,左侧的每一项点击打开后,都是组件的一个不同的状态,这个不同的状态,就是一个story。...如何选择一个 vue ui 框架? 梳理 50 年人机交互界面发展史,得出这个规律,开发框架的选择不再迷茫 vue 开发常用工具及配置一

    1.1K20
    领券