Form.io 美国网络设计系统模板

此寄存器将改变形式在 formio.js中的渲染,以便使用html和兼容的类 美国网络设计系统 框架.

正式文件

最新文件、发布资料和指南一律参考本文中提供的官方表格:

https://help.form.io (英语)

使用量

import uswds from '@formio/uswds';
import { Formio } from '@formio/js';
Formio.use(uswds);

或者如果您想直接嵌入您的网站,您可以使用以下内容.

<html>
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/css/uswds.min.css"
    />
    <link rel="stylesheet" href="https://cdn.form.io/js/formio.form.min.css" />
    <link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/js/uswds.min.js"></script>
    <script src="https://cdn.form.io/js/formio.form.min.js"></script>
    <script src="https://cdn.form.io/uswds/uswds.min.js"></script>
  </head>
  <body>
    <div id="formio"></div>
    <script type="text/javascript">
      Formio.use(uswds);
      Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
    </script>
  </body>
</html>

你可以试试这个 通过去以下JSFiddle - https://jsfiddle.net/travistidwell/yrwp9m24/1 互联网档案馆的存檔,存档日期2014-12-22

窗体构建器

除了作为表单渲染器之外,您还可以使用此库将表单.io格式构建器嵌入您自己的应用程序中,使用以下方法.

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/css/uswds.min.css"
    />
    <link rel="stylesheet" href="https://cdn.form.io/js/formio.full.min.css" />
    <link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/js/uswds.min.js"></script>
    <script src="https://cdn.form.io/js/formio.full.min.js"></script>
    <script src="https://cdn.form.io/uswds/uswds.min.js"></script>
  </head>
  <body>
    <div id="builder"></div>
    <script type="text/javascript">
      Formio.use(uswds);
      Formio.builder(document.getElementById('builder'));
    </script>
  </body>
</html>

示例应用程序

关于这个平台如何运作的例子,请参见以下应用程序.

https://formio.github.io/uswds. 中国植物物种信息数据库