Skip to content

Commit

Permalink
Docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@inxilpro
inxilpro committed Nov 3, 2018
1 parent e43e8a6 commit d0431c3
Show file tree
Hide file tree
Showing 6 changed files with 533 additions and 46 deletions.
210 changes: 187 additions & 23 deletions docs/api.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,52 +34,216 @@ <h1>
</p>

<h2 class="mt-8 pt-8 border-t border-grey-lighter">
<code>Aire</code> <small>(or <code>aire()</code>)</small>
Using the <code>Aire</code> facade or <code>aire()</code> helper
</h2>

<p>
For the most part, everything is accessed via the <code>Aire</code> facade
or the <code>aire()</code> helper method. Use the facade to open a form, and
all subsequent calls will be passed onto that form.
or the <code>aire()</code> helper method. All code examples from here on out
will use the facade syntax, but the helper works exactly the same.
</p>

<p>
Most calls to <code>Aire</code> are passed down to the currently active form.
The first call to any method will instantiate a new Form instance for you.
All subsequent calls will be passed to that instance until you create a new
form.
</p>

<h2 class="mt-8 pt-8 border-t border-grey-lighter">
Opening a new <code>Form</code>
</h2>

<p>
Typically, the first step to using Aire is to instantiate a new Form and
open it. You can do that in a single call, with:
</p>

<p>
<code>Aire::open($action = null, $bound_data = null)</code>
</p>

<p class="text-grey-dark ml-4 pl-4 border-l-4 italic">
You can instantiate a new form with <code>Aire::form()</code>,
but in practice you'll rarely need this step.
</p>

<h2 class="mt-8 pt-8 border-t border-grey-lighter">
<code>
Aire::form($action = null, $bound_data = null)
</code>
Adding an <code>Element</code> to the <code>Form</code>
</h2>

<p>
Calling <code>Aire::form()</code> will instantiate a new <code>Form</code>
object. Pass in a URL to the first parameter to set the form's action. Pass
and object, array, or Eloquent model to the second parameter to bind that
data to the form. Bound data is used to populate fields where the field name
matches the bound data.
Aire provides most common form elements and has helper methods
to quickly instantiate them. All elements are fluent, which means
that configuring them is quick and easy.
</p>

<p>
The elements that Aire provides are:
</p>

<ul>
<li><code>&lt;form&gt;</code></li>
<li><code>&lt;input&gt;</code></li>
<li><code>&lt;select&gt;</code></li>
<li><code>&lt;textarea&gt;</code></li>
<li><code>&lt;button&gt;</code></li>
</ul>

<p>
The <code>Input</code> element supports the following types:
</p>

<ul>
<li><code>checkbox</code></li>
<li><code>color</code></li>
<li><code>date</code></li>
<li><code>datetime</code></li>
<li><code>datetime-local</code></li>
<li><code>email</code></li>
<li><code>file</code></li>
<li><code>hidden</code></li>
<li><code>image</code></li>
<li><code>month</code></li>
<li><code>number</code></li>
<li><code>password</code></li>
<li><code>radio</code></li>
<li><code>range</code></li>
<li><code>reset</code></li>
<li><code>search</code></li>
<li><code>submit</code></li>
<li><code>tel</code></li>
<li><code>text</code></li>
<li><code>time</code></li>
<li><code>url</code></li>
<li><code>week</code></li>
</ul>

<p>
Each element and input type can be instantiated directly from the
<code>Aire</code> facade or from the current <code>Form</code>
instance.
</p>

<pre><code class="language-php">{{ Aire::open() }}

{{ Aire::input('name', 'Your Name') }} {{-- Creates a text input --}}

{{ Aire::email('email_address', 'Your Email Address') }} {{-- Creates an email input --}}

{{ Aire::submit('Submit') }} {{-- Creates a button input with type="submit" --}}

{{ Aire::close() }}</code></pre>

<p>
Each helper method provides the most common properties as parameters. Below
is an overview of each method signature:
</p>

<ul>
<li><code>Aire::input($name = null, $label = null)</code></li>
<li><code>Aire::color($name = null, $label = null)</code></li>
<li><code>Aire::date($name = null, $label = null)</code></li>
<li><code>Aire::dateTime($name = null, $label = null)</code></li>
<li><code>Aire::dateTimeLocal($name = null, $label = null)</code></li>
<li><code>Aire::email($name = null, $label = null)</code></li>
<li><code>Aire::file($name = null, $label = null)</code></li>
<li><code>Aire::image($name = null, $label = null)</code></li>
<li><code>Aire::month($name = null, $label = null)</code></li>
<li><code>Aire::number($name = null, $label = null)</code></li>
<li><code>Aire::password($name = null, $label = null)</code></li>
<li><code>Aire::radio($name = null, $label = null)</code></li>
<li><code>Aire::range($name = null, $label = null, $min = 0, $max = 100)</code></li>
<li><code>Aire::search($name = null, $label = null)</code></li>
<li><code>Aire::tel($name = null, $label = null)</code></li>
<li><code>Aire::time($name = null, $label = null)</code></li>
<li><code>Aire::url($name = null, $label = null)</code></li>
<li><code>Aire::week($name = null, $label = null)</code></li>
<li><code>Aire::button(string $label = null)</code></li>
<li><code>Aire::submit(string $label = 'Submit')</code></li>
<li><code>Aire::select(array $options, $name = null, $label = null)</code></li>
<li><code>Aire::textArea($name = null, $label = null)</code></li>
<li><code>Aire::checkbox($name = null, $label = null)</code></li>
</ul>

<h2 class="mt-8 pt-8 border-t border-grey-lighter">
<code>
Aire::open($action = null, $bound_data = null)
</code>
Summary Helper
</h2>

<p>
<code>Aire::open()</code> calls <code>Aire::form()</code> and then opens the form.
When a form is opened, it begins output buffering and captures all output until
<code>Aire::close()</code> is called. Typically, this will be your entry point
for a new form.
Aire comes with a special element that can be added to your form using
<code>Aire::summary()</code>. If you're using Laravel form validation,
this element will show a short summary of the errors on the page, if any
exist:
</p>

<div class="border border-red bg-red-lightest text-red font-bold rounded p-4 my-4">
There are 2 errors on this page that you must fix before continuing.
</div>

<p>
You can also add additional information to the summary block with
<code>Aire::summary()->verbose()</code>.
</p>

<div class="border border-red bg-red-lightest text-red font-bold rounded p-4 my-4">
There are 2 errors on this page that you must fix before continuing.
<ul class="pt-4">
<li>The name is required.</li>
<li>The email address is required.</li>
</ul>
</div>

<h2 class="mt-8 pt-8 border-t border-grey-lighter">
<code>
Aire::close()
</code>
Element Groups
</h2>

<p>
<code>Aire::close()</code> closes the currently opened form and renders it. Typically,
you want to call this at the very end of your form.
One of the major benefits of a form builder like Aire is that all the boilerplate
markup that wraps around your form elements can be generated for you. All Aire
elements are groupable, which allows you to associate things like a <strong>label</strong>,
or <strong>help text</strong> to the element without worrying about additional markup.
</p>

<p>
Where it makes sense, elements are grouped by default. This means that <code>Aire::input()</code>
can be passed a <code>->label()</code> and it will just work. You can override these defaults
by calling <code>grouped()</code> to enable grouping, or <code>withoutGroup()</code> to disable
it. Groups provide a few additional methods to any element:
</p>

<ul>
<li>
<code>label(string $text)</code>
sets the label text for the element
</li>
<li>
<code>helpText(string $text)</code>
adds help text/instructions below the element
</li>
<li>
<code>valid()</code>
marks the group as valid (this is usually handled automatically,
but you have the option to manually set it if you like)
</li>
<li>
<code>invalid()</code>
marks the group as invalid (this is usually handled automatically,
but you have the option to manually set it if you like)
</li>
<li>
<code>errors($message)</code>
adds a specific error message to be shown below the element
</li>
<li>
<code>prepend(string $text)</code>
prepends text inline before the element
</li>
<li>
<code>append(string $text)</code>
appends text inline after the element
</li>
</ul>

</div>

Expand Down
136 changes: 136 additions & 0 deletions docs/customizing.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<title>
Aire - Documentation &amp; Demos
</title>

<link rel="stylesheet" href="https://glhd.github.io/aire/aire.css" />

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/solid.css" integrity="sha384-uKQOWcYZKOuKmpYpvT0xCFAs/wE157X5Ua3H5onoRAOCNkJAMX/6QF0iXGGQV9cP" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/brands.css" integrity="sha384-BCEeiNUiLzxxoeYaIu7jJqq0aVVz2O2Ig4WbWEmRQ2Dx/AAxNV1wMDBXyyrxw1Zd" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/fontawesome.css" integrity="sha384-HU5rcgG/yUrsDGWsVACclYdzdCcn5yU8V/3V84zSrPDHwZEdjykadlgI6RHrxGrJ" crossorigin="anonymous" />
</head>

<body class="font-sans antialiased">

<div class="container mx-auto my-8 flex flex-col sm:flex-row-reverse">

<div class="flex-1 border-l border-grey-lighter pl-16 text-grey-darkest">

<h1>
Customizing Aire
</h1>



</div>

<div class="flex-no-shrink pr-16">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 204.07 130.44" width="180">
<title>aire</title>
<g>
<path d="M75.5,126h196a4,4,0,0,1,4,4v35a4,4,0,0,1-4,4H75.5a4,4,0,0,1-4-4V130A4,4,0,0,1,75.5,126Z" transform="translate(-71.43 -86.06)" style="fill: #f4645f;fill-rule: evenodd"/>
<path d="M75.5,126h196a4,4,0,0,1,4,4v35a4,4,0,0,1-4,4H75.5a4,4,0,0,1-4-4V130A4,4,0,0,1,75.5,126Z" transform="translate(-71.43 -86.06)" style="fill: #f4645f;fill-rule: evenodd"/>
<path d="M79.5,131h188c2.21,0,3,.79,3,3v27c0,2.21-.79,3-3,3H79.5c-2.21,0-3-.79-3-3V134C76.5,131.79,77.29,131,79.5,131Z" transform="translate(-71.43 -86.06)" style="fill: #f4645f;fill-rule: evenodd"/>
<path d="M80.5,131h186a4,4,0,0,1,4,4v25a4,4,0,0,1-4,4H80.5a4,4,0,0,1-4-4V135A4,4,0,0,1,80.5,131Z" transform="translate(-71.43 -86.06)" style="fill: #fff;fill-rule: evenodd"/>
<path d="M75.5,173.5h126a4,4,0,0,1,4,4v35a4,4,0,0,1-4,4H75.5a4,4,0,0,1-4-4v-35A4,4,0,0,1,75.5,173.5Z" transform="translate(-71.43 -86.06)" style="fill: #f4645f;fill-rule: evenodd"/>
<path d="M82.69,118.49l-2-.84-.88-1.49,1.25-4H91.9L93,115.88l-.75,1.91-2.46.7v3.11h14.56v-3.25l-3-1.12L92.09,89.09H83.71l-9.35,28.19-2.93,1.07v3.25H82.69Zm1.86-17.63,1.35-6H87l1.35,6,2.24,7.25H82.27Z" transform="translate(-71.43 -86.06)" style="fill: #f4645f"/>
<path d="M111.62,93.78a3.87,3.87,0,1,0-4.14-3.86A3.91,3.91,0,0,0,111.62,93.78ZM105.3,121.6h13.35v-2.83l-2.14-.47-1.07-2v-19H105.3v2.84l2.37.46,1.07,2V116.3l-1.07,2-2.37.47Z" transform="translate(-71.43 -86.06)" style="fill: #f4645f"/>
<path d="M134.7,118.77l-2.47-.47-1.07-2v-6.37a8.65,8.65,0,0,1,3.72-7.49l2.28,2.46c2.42.14,5-1.35,5-4.37a3.74,3.74,0,0,0-3.91-3.81c-2.47,0-4.93,2.14-7.21,7.86l-.37-.19.46-5.91V97.32h-10v2.84l2.23.46,1.07,2V116.3l-1.07,2-2.23.47v2.83H134.7Z" transform="translate(-71.43 -86.06)" style="fill: #f4645f"/>
<path d="M165.12,118.86l-1.35-2.7A16.73,16.73,0,0,1,157,118c-4.09,0-6.19-2.19-6.56-7.22h15.17v-1.48c0-7.4-3.4-12.7-10.47-12.7-6.84,0-11.86,5.62-11.86,13.25,0,7.17,4.37,12.52,11.86,12.52A17.6,17.6,0,0,0,165.12,118.86ZM154.61,99.79c2.88,0,3.81,2.79,3.91,8h-8.15C150.51,102.34,152,99.79,154.61,99.79Z" transform="translate(-71.43 -86.06)" style="fill: #f4645f"/>
</g>
</svg>

<ul class="list-reset mt-8 font-semibold">


<li class="group mb-6">
<i class="fas fa-fw fa-file mr-2 text-grey-dark group-hover:text-grey-darker"></i>
<a href="https://glhd.github.io/aire" class="text-grey-darker no-underline hover:text-grey-darkest">
README
</a>
</li>





<li class="group mb-6">
<i class="fas fa-fw fa-code mr-2 text-grey-dark group-hover:text-grey-darker"></i>
<a href="https://glhd.github.io/aire/api" class="text-grey-darker no-underline hover:text-grey-darkest">
API Overview
</a>
</li>





<li class="group mb-6">
<i class="fas fa-fw fa-paint-brush mr-2 text-grey-dark group-hover:text-grey-darker"></i>
<a href="https://glhd.github.io/aire/themes" class="text-grey-darker no-underline hover:text-grey-darkest">
Theming
</a>
</li>



</ul>

<div class="font-bold -mb-3 mt-6 pt-6 border-t border-grey-lighter text-grey text-sm">
Recipes
</div>

<ul class="list-reset mt-8 font-semibold">


<li class="group mb-6">
<i class="fas fa-fw fa-file-code mr-2 text-grey-dark group-hover:text-grey-darker"></i>
<a href="https://glhd.github.io/aire/basic" class="text-grey-darker no-underline hover:text-grey-darkest">
Basic Demo
</a>
</li>





<li class="group mb-6">
<i class="fas fa-fw fa-file-code mr-2 text-grey-dark group-hover:text-grey-darker"></i>
<a href="https://glhd.github.io/aire/html-buttons" class="text-grey-darker no-underline hover:text-grey-darkest">
HTML in Buttons
</a>
</li>



<li class="group mb-6 mt-6 pt-6 border-t border-grey-lighter">
<i class="fab fa-fw fa-github mr-2 text-grey-dark group-hover:text-grey-darker"></i>
<a href="https://github.com/glhd/aire" class="text-grey-darker no-underline hover:text-grey-darkest" target="_blank">
Aire on Github
<i class="fas fa-external-link-alt text-white group-hover:text-grey-light ml-1"></i>
</a>
</li>

</ul>
</div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-markup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-markup-templating.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-clike.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-php.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-php-extras.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-javascript.min.js"></script>

</body>

</html>
Loading

0 comments on commit d0431c3

Please sign in to comment.