formio-sfds
Version:
The Form.io theme for sf.gov
121 lines (104 loc) • 4.85 kB
HTML
<html lang="en">
<head>
<title>Components | formio-sfds documentation</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/sfgov/forms.css">
<link rel="stylesheet" href="https://unpkg.com/highlight.js/styles/github.css">
<style type="text/css">
.h-1em { height: 1em ; }
h2,
h3,
h4,
h5,
h6 {
position: relative;
}
main p {
margin: 0;
}
main p + p {
margin-top: 20px;
}
li + li {
margin-top: 5px;
}
table {
margin: 20px 0;
}
th,
td {
padding: 5px;
}
a[aria-hidden="true"] {
position: absolute;
right: 100%;
font-weight: normal;
text-decoration: none;
}
</style>
</head>
<body>
<div class="formio-sfds">
<div class="container p-2">
<h1 class="h3 mb-4">
<a href="/">formio-sfds@10.0.0</a> /
<a href="/docs/">Docs</a> /
Components
</h1>
<main>
<h3 id="user-content-components"><a href="#components" aria-hidden="true" tabindex="-1"><span>#</span></a>Components</h3>
<p>This theme introduces several custom Formio components. There are two different
"flavors" of custom component:</p>
<ul>
<li>
<p><strong>Class components</strong> are JavaScript classes that extend Formio's component
classes and provide new or modified inputs and behaviors.</p>
</li>
<li>
<p><strong>Component templates</strong> are really just schema templates that we <a href="https://github.com/SFDigitalServices/formio-sfds/tree/main/src/components/builder.js">define in
the theme's builder options</a>, and which are
only available in the <a href="../README/#formio-portal">Form.io portal bundle</a>.</p>
</li>
</ul>
<h3 id="user-content-review-component"><a href="#review-component" aria-hidden="true" tabindex="-1"><span>#</span></a>Review component</h3>
<p>The <a href="https://github.com/SFDigitalServices/formio-sfds/tree/main/src/components/review.js"><code>review</code> class component</a> displays all of the
values provided in the form's submission. Place it within the last panel (page)
of a wizard form so that it always reflects the most up-to-date submission
data.</p>
<h3 id="user-content-address-component"><a href="#address-component" aria-hidden="true" tabindex="-1"><span>#</span></a>Address component</h3>
<p>This <a href="https://github.com/SFDigitalServices/formio-sfds/tree/main/src/components/address.js">class component</a> replaces Formio's built-in
<code>address</code> component and renders a group of inputs for street, city,
<a href="#state-component">state</a>, and <a href="#zip-component">ZIP code</a>.</p>
<h3 id="user-content-state-component"><a href="#state-component" aria-hidden="true" tabindex="-1"><span>#</span></a>State component</h3>
<p>The <a href="https://github.com/SFDigitalServices/formio-sfds/tree/main/src/components/state.js"><code>state</code> component</a> renders a <code><select></code>
dropdown of U.S. states defined in <a href="../data/states.json">data/states.json</a>.</p>
<h3 id="user-content-zip-code-component"><a href="#zip-code-component" aria-hidden="true" tabindex="-1"><span>#</span></a>ZIP code component</h3>
<p>The <a href="https://github.com/SFDigitalServices/formio-sfds/tree/main/src/components/zip.js"><code>zip</code> component</a> renders a ZIP code text input
that validates either a 5-digit number or a ZIP+4 pattern (5 numbers followed
by a dash and 4 more, e.g. <code>94110-1234</code>).</p>
<h3 id="user-content-full-name-component"><a href="#full-name-component" aria-hidden="true" tabindex="-1"><span>#</span></a>Full name component</h3>
<p>This component template provides a container component with the default key
<code>name</code>, and <code>first</code> and <code>last</code> child text fields in a 2-column grid.</p>
</main>
<div class="bg-grey-1 p-2 round-1 mt-4 d-flex flex-justify-between">
<div class="mr-2">
<a href="https://github.com/SFDigitalServices/formio-sfds/edit/main/docs/components.md">
Edit this page on GitHub
</a>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/formiojs@4.14.8/dist/formio.full.min.js"></script>
<script src="/dist/formio-sfds.standalone.js"></script>
<script>
// fix images with height attributes that get
// `height: auto` from drupal.css
for (const img of document.querySelectorAll('img[height]')) {
img.setAttribute('style', `height: ${img.getAttribute('height')}px;`)
}
</script>
</body>
</html>