带有Angular的StoryBook中的自定义控件
是指在使用Angular框架开发的StoryBook中，开发者可以自定义控件来展示和测试组件的不同状态和交互效果。
自定义控件是StoryBook中的一个重要概念，它允许开发者在StoryBook中创建可视化的UI组件库，并提供了一个交互式的界面来展示和测试这些组件。通过自定义控件，开发者可以更方便地调试和验证组件的功能和样式。
自定义控件的分类可以根据功能和用途进行划分。常见的自定义控件包括按钮、输入框、下拉菜单、复选框、单选框、表格等。每个自定义控件都有自己的特点和用途，可以根据实际需求选择合适的控件。
自定义控件的优势在于提高开发效率和代码复用性。通过使用自定义控件，开发者可以快速构建和展示组件，减少重复的开发工作。同时，自定义控件可以被多个组件复用，提高代码的可维护性和可扩展性。
自定义控件在各种应用场景中都有广泛的应用。例如，在Web应用程序中，可以使用自定义控件来展示用户界面的各种交互元素；在移动应用程序中，可以使用自定义控件来构建丰富的用户界面；在企业级应用程序中，可以使用自定义控件来展示和管理各种业务数据。
对于开发者来说，腾讯云提供了一系列与云计算相关的产品，可以帮助开发者更好地构建和部署应用程序。其中，与自定义控件相关的产品包括：
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，可以用于部署和运行Web应用程序和自定义控件。 产品介绍链接：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，可以用于存储和管理自定义控件的相关资源文件。 产品介绍链接：https://cloud.tencent.com/product/cos
- 腾讯云云数据库MySQL版（TencentDB for MySQL）：提供高性能、可扩展的云数据库服务，可以用于存储和管理自定义控件的相关数据。 产品介绍链接：https://cloud.tencent.com/product/cdb_mysql
通过使用以上腾讯云产品，开发者可以更好地支持和扩展自定义控件的开发和部署过程，提高应用程序的性能和可靠性。
相关·内容
我开始在一个Angular组件库中使用Storybook。 它对于像布尔值或字符串这样具有输入的组件工作得很好，它使用控件显示这些输入。 但在某些组件中，输入是对象。对于这些组件，我可以提供一个对象，但用户可以使用对象的JSON表示来编辑字符串，而不是几个输入。 如何以用户友好的方式完成此操作，以便用户可以在控件中编辑这些属性，而无需使用对象的JSON表示形式？
浏览 12提问于2020-09-08得票数 2
我有一个大型的Angular 9CLI应用程序，它使用自定义的webpack配置来允许将变量从JSON文件引用到SCSS文件中。和非捆绑的站点(ng服务器)
我感到困惑的是，Edge devtools将问题定位在索引文件中的位置(1,1)：
这是我自定义
浏览 1提问于2020-06-28得票数 5
我正在尝试根据另一个参数的值有条件地禁用Storybook.js控件。例如，我有一个模态组件，它的类型可以是'alert‘、'confirmation’、'content‘或'photo’。除了“照片”之外，所有这些模式类型都需要string类型的内容属性。照片模式不需要这个内容属性，因为它不显示任何文本。因此，每当类型属性被选为“照片”时，我想禁用Storybook中的content控件。我首
浏览 0提问于2020-11-14得票数 9
根据，我正在尝试在conifig.js文件中添加自定义视口：import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
浏览 9提问于2019-05-20得票数 0
我使用的是基于Angular的Storybook。我所要做的就是根据Storybook控件中给出的值重新呈现图表。但是，即使更改了控件的值，Chart也保持不变。我在Storybook中的组件： import { Component, Input, Output, EventEmitter, OnInit } from '@an
浏览 40提问于2021-03-25得票数 0
回答已采纳
我有一个使用@storybook/angular的自定义插件。每次附加组件中的某些值发生变化时，当前故事中的Angular组件都应该重新呈现，因此它应该完全重新初始化。我尝试在@storybook/angular中使用forceReRender()，但它似乎没有任何作用。当我选择另一个故事并再次打开上一个故事时，由于组件已重新初始化，因此将应用更改。
浏览 5提问于2020-10-30得票数 3
1回答
我在角库的根部设置了故事本。为了配置SCSS导入路径，我在库的ng-package.json中添加了以下内容 "styleIncludePaths": ["<some directory>"]但是，Storybook如果我将以下内容添加到根的angular.json中，在architect > builder > build > options故事书下将
浏览 7提问于2022-02-10得票数 1
回答已采纳
1回答
storybook/angular/types-6-0'./Page.stories.ts(1,45):
TS2307: Cannot find module '@storybook/angular'.但是，@storybook/angular是在package.json上安装的，而且当使用vscode可视化时，文件本身不会提示任何错误。我尝试使用google的所有解决方案
浏览 13提问于2021-06-21得票数 1
回答已采纳
我在Nx工作区中创建了一个角库来提供ui组件(ui-kit)。在这个图书馆里，我又加了一本故事簿，这本书运行得很好。现在，我还想包括Tailwind，因为组件使用它。我使用nx generate @nrwl/angular:setup-tailwind --project=ui-kit --buildTarget=build-storybook命令为该库设置顺风。我有一个tailwind.config.js，它看起来像这样：
const { createGlobPatternsForDependencies } = require
浏览 13提问于2022-02-25得票数 4
回答已采纳
2回答
我正在迁移一个库，以使用12 (目前在版本10中)，并且Storybook用于公开这个库的各种组件。不幸的是，以前在故事呈现中全局包含的base.scss文件不再包括在内(故事现在没有任何CSS)。这个base.scss文件包含在一个类型记录文件中：
import '!style-loader!<anonymous> (D:\bmx\node_modules\@angular-devkit\build-angular</e
浏览 23提问于2021-10-15得票数 5
回答已采纳
我正在使用Angular (11.2.8)构建一个组件库，并尝试添加TailwindCss和StoryBook6。 我发现了不同的配置，但它们都不起作用。运行storybook时，我的组件没有样式。下面是我的配置： .storybook/main.js const path = require('path'); stories: ['..moduleMetadata } from
浏览 29提问于2021-04-19得票数 5
我正在运行一个Angular v8应用程序，并且在故事书中。我想为它集成自动化的可视化测试，并找到了StoryShots。我找到了this指令并像这样实现了它。因为Karma是应用程序中的测试工具，所以我调整了jest配置，只对带有"test.ts“的文件进行可视化测试。谁有使用angular和StoryShots的经验？ 这是我的代码： package.json "scripts": {
..
浏览 16提问于2019-12-06得票数 0
回答已采纳
我在我的角项目中安装了Storybook，直到今天，当我运行了yarn install，在这个故事书构建失败之后，所有的事情都进行得很好，出现了以下TS错误
node_modules/@storybook属性“目标”的类型是不兼容的。呃！removeEventListener()：boolean；dispatchEvent(事件:事件)：布尔；getAttribute(attr: string)：string 000-null；}’但在类型'EventTarget‘中
浏览 15提问于2022-10-12得票数 3
回答已采纳
2回答
我试图在故事书中加载一个自定义的全局样式文件，主题-default.scss。虽然我的组件加载在故事书，但样式没有被应用，我遵循本教程的自定义webpack配置。(我对webpack不是很熟悉)const path = require('path');
const MiniCssExtractPlugin/src/**/*.stories.ts'
浏览 7提问于2020-08-04得票数 21
我所做的是： npx -p @storybook/cli sb init --type angular 当我开始这个项目时，我看到以下错误： ERROR in .../src/stories/0-Welcome.stories.ts(1,25):
TS2307: Cannot find module '@storybook/angular/demo'.我的Package.json "@sto
浏览 21提问于2020-03-19得票数 6
回答已采纳
我们使用的是Storybook 5和Angular 9，一些测试使用的是Jest 26。问题是，当我们使用Typescript <3.8.0 -这显然是Angular 9在ng build --prod中需要的-我们会得到一堆如下所示的Jest类型错误：
node_modules/@types当我们升级到Typescript 3.8.3时，类型可以工作，但Angular不能再为prod构建，因为它需要更低的</
浏览 2提问于2020-12-10得票数 1
我已经从文档中集成了webpackFinal对sass的支持。在.storybook目录中，我创建了一个scss-loader.scss文件，该文件应该加载全局样式表。在'preview.js‘文件中，我导入preview.jsModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/n
浏览 7提问于2021-10-25得票数 2
1回答
具有同步的故事书
、、
我试图看看我是否能够创建一个故事簿应用程序来公开一组控件，包括所有的控件以及后面将要编写的进一步的自定义控件。[moduleMetadata({ declarations: [ButtonComponent], imports: [ButtonModule]})]
ButtonComponent包含使用的组件现在，我还不确定这是否是正确的做法。
浏览 7提问于2022-01-31得票数 0
1回答
我将在Angular 12下使用Storybook安装快照测试。问题出在Storybook中的Storyshorts插件。initStoryshots from '@storybook/addon-storyshots';
initStoryshots(); 当我在我的Angular项目中运行命令jest时，我变成了这个错误/frameworks/angular/loade
浏览 50提问于2021-10-21得票数 1
回答已采纳
2回答
❯ npx nx build-storybook client
info => Using angular project "client:build" for configuring Storybookg
浏览 14提问于2022-01-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
