@ajsf/bootstrap4 (中文(简体) )
首选项4框架 协会,它从JSON Schema中构建了角形.
开始
安装软件包和 Bootstrap 4 :
npm install @ajsf/bootstrap4 bootstrap@4
将 Bootstrap 样式表添加到 styles 目标 angular.json数字 :
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
导入 Bootstrap4FrameworkModule 以独立组件构成形式。 没有进去 app.config.ts数字 :
import { Component } from '@angular/core';
import { Bootstrap4FrameworkModule } from '@ajsf/bootstrap4';
@Component({
selector: 'app-root',
imports: [Bootstrap4FrameworkModule],
templateUrl: './app.html',
})
export class App {
schema = {
type: 'object',
properties: {
name: { type: 'string', title: 'Name' },
plan: { type: 'string', title: 'Plan', enum: ['free', 'pro', 'team'] },
},
required: ['name'],
};
onSubmit(data: any) {
console.log(data);
}
}
在一个 NgModule 应用程序,添加 Bootstrap4FrameworkModule 到模块的 imports 换句话说.
然后在组件的模板中使窗体:
<json-schema-form
[schema]="schema"
framework="bootstrap-4"
(onSubmit)="onSubmit($event)">
</json-schema-form>
framework="bootstrap-4" 选择此软件包的模板。 其他价值是: material-design, (中文(简体) ), primeng, (中文(简体) ), bootstrap-3, (中文(简体) ), bootstrap-5 财务报告和审定财务报表 no-framework,默认值.
要尝试库而不安装 Bootstrap,绑定 [loadExternalAssets]="true" 打开 <json-schema-form> 换句话说,它从CDN装入了靴子4。 自己把资产装入生产.
这个 AJSF 读取 涵盖其他输入和输出、布局、自定义部件和验证消息.
靴子4标记,20.1.0改正
这个软件包之前发布了"靴子3"类名称. 它是作为一个
存档副本 @ajsf/bootstrap3 随着CDN URL的改变,所以类 Botstrap 4
却默默无闻地袖手旁观 如果你已经写
CSS与旧的输出相对应,这些名称被改变.
| 曾经 | 现在 | 为什么 |
|---|---|---|
has-error, (中文(简体) ), has-success, (中文(简体) ), has-feedback | is-invalid 在字段包装上 | 靴子4标记球场,而不是容器 |
help-block | form-text text-muted | Fotstrap 4 的帮助文本类 |
form-control-feedback, (中文(简体) ), glyphicon | 删除 | 4艘无胶原舰 |
input-group-addon | input-group-prepend 或者说 input-group-append 包装 input-group-text | 靴子4的外加结构 |
pull-right | float-right | 在 Bootstrap 4 中重新命名 |
control-label | 无类 | Bootstrap 4 以堆叠形式样式的普通标签 |
btn-default | btn-secondary | 靴子4的中性按钮 |
form-group 财务报告和审定财务报表 sr-only 4 仍然定义
都一样.
验证电文的行为也不同,这一部分适用于
@ajsf/bootstrap3 财务报告和审定财务报表 @ajsf/bootstrap5 我也一样。 曾经只显示的消息
当值改变时, 将目标聚焦到需要的字段并留为空
什么都没有 一旦球场被触及或被改变,它现在就会出现.
错误文本和帮助文本现在也是单独的元素,所以可以样式一个
没有另一个.
复选框和收音机结构,于22.1.0中更改
复选框和收音机之前提供了 <input> 内部 <label>, (中文(简体) ),
此软件包是复制出来的。 他们现在让
作为兄弟姐妹在a .form-check 包裹,这就是"靴子"4
及其状态要求:
<div class="form-check">
<input class="form-check-input" id="control1" type="checkbox">
<label class="form-check-label" for="control1">Accept</label>
</div>
内含变体 (checkboxes-inline, (中文(简体) ), radios-inline同样的移动方式,
从已删除的靴子 3 checkbox-inline 财务报告和审定财务报表 radio-inline 类改为
form-check form-check-inline 同样的兄弟形状.
切换按钮( T)checkboxbuttons, (中文(简体) ), radiobuttons)不变. 诱饵 4
文档 .btn-group-toggle 标签内输入,以及
没有 .btn-check。 。 。 .
如果您写 CSS 选择 label > input 或将标签设置为
控制是祖先,这是区别所在.
阵列行布局,22.2.0有变化
阵列项上的删除按钮曾经是字段的第一个子 包裹并浮出水面,所以它离开了正常的流量,坐在排行的顶端 而不是在控制之外。 它现在与球场共用一排活字. 还有 当项目是一组时,它与控制中心相对应 中点移动 随着内容的增长.
有两个细节,如果你已经写 CSS 与旧输出。 每个字段
在外侧之间增加一个折叠元素 form-group 集装箱和外地
本身,包装器变成一个弹性容器 只在可移动阵列上
页:1 无效的标记已移动到包装上, 因此选择器为
.input-group.is-invalid 不再匹配; 标记现在在
元素直接在它的上方.
阵列标题,22.2.0中更改
一个阵列两次实现了标题:一次作为字段标签,另一次作为
字段集图例,部件从原始属性名重建。 A 类
phone_numbers 属性显示“Phone numbers”后加“Phone numbers”.
标题现在属于部件, 就像它已经为一个字段集所做的一样, 所以它
制作一次,在 <legend> 在正常状态下命名组
拼写。 如果您的 CSS 瞄准数组标签通过 labelHtmlClass现在
适用于传说.
需要的标记随标题一起移动. 原仅附后 框架本身的标签,所以需要的字段集,其标题的部件 已经拥有,没有星号,现在有了.