Skip to content

Commit

Permalink
Bootstrap docs and variants
Browse files Browse the repository at this point in the history
  • Loading branch information
@inxilpro
inxilpro committed Aug 13, 2019
1 parent 3327b8b commit be65735
Show file tree
Hide file tree
Showing 10 changed files with 340 additions and 156 deletions.
12 changes: 12 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,18 @@
alt="MIT Licensed"
/>
</a>
<a href="https://twitter.com/airephp" target="_blank" class="mx-1">
<img
src="https://img.shields.io/twitter/follow/airephp?style=social"
alt="Follow @airephp on Twitter"
/>
</a>
<a href="https://twitter.com/airephp" target="_blank" class="mx-1">
<img
src="https://img.shields.io/twitter/follow/inxilpro?style=social"
alt="Follow @inxilpro on Twitter"
/>
</a>
</div>

<h1>
Expand Down
2 changes: 1 addition & 1 deletion composer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"graham-campbell/markdown": "^10.2",
"barryvdh/reflection-docblock": "^2.0",
"glhd/aire-tailwind-custom-forms": "^1.0.0-beta.1",
"glhd/aire-bootstrap": "^1.0.0-beta.1"
"glhd/aire-bootstrap": "^1.0.0-beta.3"
},
"suggest": {
"glhd/aire-tailwind-custom-forms": "Use the Tailwind custom forms plugin for even nicer looking forms"
Expand Down
54 changes: 53 additions & 1 deletion docs/api.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,59 @@ <h2 class="mt-8 pt-8 border-t border-gray-300">
appends text inline after the element
</li>
</ul>


<h2 class="mt-8 pt-8 border-t border-gray-300">
Variants
</h2>

<p>
As of Aire <code>1.5.0</code> we now support variants like <code>primary</code> or
<code>sm</code>:
</p>

<pre><code class="language-php">{{ Aire::input()->variant('sm') }}</code></pre>

<p>
If you're just applying one variant, you can use the syntax above or do it fluently:
</p>

<pre><code class="language-php">{{ Aire::input()->variant()->sm() }}</code></pre>

<p>
If you're applying multiple variants, use the <code>variants()</code> method:
</p>

<pre><code class="language-php">{{ Aire::input()->variants('sm', 'blue') }}</code></pre>

<p>
When you define your variants, you can use (arbitrary) keys to manage conflict resolution.
For example, if this were our config:
</p>

<pre><code class="language-php">[
'variant_classes' => [
'input' => [
'default' => [
'border' => 'border',
'size' => 'p-2 text-base rounded',
'color' => 'border-gray-200',
],
'primary' => [
'color' => 'border-blue-300',
],
'sm' => [
'size' => 'p-1 text-sm rounded-sm',
],
],
],
]</code></pre>

<p>
Using the keys <code>color</code> and <code>size</code> help us manage how
<code>variants('sm', 'primary')</code> are applied (in this case, it would
result in <code>class=&quot;border p-1 text-sm rounded-sm border-blue-300&quot;</code>).
</p>

</div>
</div>
<div id="navigation" class="flex-shrink-0 lg:max-w-1/5">
Expand Down
101 changes: 76 additions & 25 deletions docs/bootstrap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,26 +99,72 @@ <h2 class="m-0 px-6 py-3 border-b text-salmon">
&lt;/label&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control no-yet-validated&quot; data-aire-component=&quot;input&quot; id=&quot;demo&quot; /&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control&quot; data-aire-component=&quot;input&quot; id=&quot;demo&quot; /&gt;
&lt;small class=&quot;form-text text-muted no-yet-validated&quot; data-aire-component=&quot;help_text&quot;&gt;
&lt;small class=&quot;form-text text-muted&quot; data-aire-component=&quot;help_text&quot;&gt;
This is demo help text.
&lt;/small&gt;
&lt;div class=&quot;not-yet-validated d-none&quot; data-aire-component=&quot;errors&quot;&gt;
&lt;div class=&quot;d-none&quot; data-aire-component=&quot;errors&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot; data-aire-component=&quot;group&quot;&gt;
&lt;label class=&quot; cursor-pointer&quot; data-aire-component=&quot;label&quot; for=&quot;__aire-22-26&quot;&gt;
Input Group
&lt;/label&gt;
&lt;div class=&quot;input-group&quot; data-aire-component=&quot;input_group&quot;&gt;
&lt;div class=&quot;input-group-prepend&quot; data-aire-component=&quot;prepend&quot;&gt;
&lt;div class=&quot;input-group-text&quot;&gt;
$
&lt;/div&gt;
&lt;/div&gt;
&lt;input type=&quot;number&quot; class=&quot;form-control&quot; data-aire-component=&quot;input&quot; step=&quot;1&quot; value=&quot;20&quot; id=&quot;__aire-22-26&quot; /&gt;
&lt;div class=&quot;input-group-append&quot; data-aire-component=&quot;append&quot;&gt;
&lt;div class=&quot;input-group-text&quot;&gt;
.00
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;d-none&quot; data-aire-component=&quot;errors&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot; data-aire-component=&quot;group&quot; data-aire-for=&quot;range&quot;&gt;
&lt;label class=&quot; cursor-pointer&quot; data-aire-component=&quot;label&quot; for=&quot;__aire-22-range29&quot;&gt;
Range
&lt;/label&gt;
&lt;input type=&quot;range&quot; class=&quot;form-control-range&quot; data-aire-component=&quot;input&quot; name=&quot;range&quot; min=&quot;1&quot; max=&quot;10&quot; value=&quot;5&quot; data-aire-for=&quot;range&quot; id=&quot;__aire-22-range29&quot; /&gt;
&lt;div class=&quot;d-none&quot; data-aire-component=&quot;errors&quot; data-aire-for=&quot;range&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot; data-aire-component=&quot;group&quot;&gt;
&lt;label class=&quot; cursor-pointer&quot; data-aire-component=&quot;label&quot; for=&quot;__aire-22-32&quot;&gt;
Demo Select
&lt;/label&gt;
&lt;select class=&quot;form-control no-yet-validated&quot; data-aire-component=&quot;select&quot; id=&quot;__aire-22-26&quot;&gt;
&lt;select class=&quot;form-control custom-select &quot; data-aire-component=&quot;select&quot; id=&quot;__aire-22-32&quot;&gt;
Expand All @@ -134,21 +180,21 @@ <h2 class="m-0 px-6 py-3 border-b text-salmon">
&lt;/select&gt;
&lt;div class=&quot;not-yet-validated d-none&quot; data-aire-component=&quot;errors&quot;&gt;
&lt;div class=&quot;d-none&quot; data-aire-component=&quot;errors&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot; data-aire-component=&quot;group&quot; data-aire-for=&quot;&quot;&gt;
&lt;label class=&quot; cursor-pointer&quot; data-aire-component=&quot;label&quot; for=&quot;__aire-22-29&quot;&gt;
&lt;label class=&quot; cursor-pointer&quot; data-aire-component=&quot;label&quot; for=&quot;__aire-22-35&quot;&gt;
Demo Multi-Select
&lt;/label&gt;
&lt;select class=&quot;form-control no-yet-validated&quot; data-aire-component=&quot;select&quot; multiple data-aire-for=&quot;&quot; name=&quot;[]&quot; id=&quot;__aire-22-29&quot;&gt;
&lt;select class=&quot;form-control custom-select &quot; data-aire-component=&quot;select&quot; multiple data-aire-for=&quot;&quot; name=&quot;[]&quot; id=&quot;__aire-22-35&quot;&gt;
Expand All @@ -164,9 +210,9 @@ <h2 class="m-0 px-6 py-3 border-b text-salmon">
&lt;/select&gt;
&lt;div class=&quot;not-yet-validated d-none&quot; data-aire-component=&quot;errors&quot; data-aire-for=&quot;&quot;&gt;
&lt;div class=&quot;d-none&quot; data-aire-component=&quot;errors&quot; data-aire-for=&quot;&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
Expand All @@ -175,11 +221,11 @@ <h2 class="m-0 px-6 py-3 border-b text-salmon">
&lt;div class=&quot;form-group&quot; data-aire-component=&quot;group&quot;&gt;
&lt;textarea class=&quot;form-control no-yet-validated&quot; data-aire-component=&quot;textarea&quot; id=&quot;__aire-22-32&quot;&gt;Demo text area&lt;/textarea&gt;
&lt;textarea class=&quot;form-control&quot; data-aire-component=&quot;textarea&quot; id=&quot;__aire-22-38&quot;&gt;Demo text area&lt;/textarea&gt;
&lt;div class=&quot;not-yet-validated d-none&quot; data-aire-component=&quot;errors&quot;&gt;
&lt;div class=&quot;d-none&quot; data-aire-component=&quot;errors&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
Expand All @@ -188,15 +234,15 @@ <h2 class="m-0 px-6 py-3 border-b text-salmon">
&lt;div class=&quot;form-group custom-control custom-checkbox&quot; data-aire-component=&quot;group&quot;&gt;
&lt;input type=&quot;checkbox&quot; value=&quot;1&quot; class=&quot;custom-control-input&quot; data-aire-component=&quot;checkbox&quot; id=&quot;__aire-22-34&quot; /&gt;
&lt;input type=&quot;checkbox&quot; value=&quot;1&quot; class=&quot;custom-control-input&quot; data-aire-component=&quot;checkbox&quot; id=&quot;__aire-22-40&quot; /&gt;
&lt;label class=&quot;custom-control-label&quot; data-aire-component=&quot;label&quot; for=&quot;__aire-22-34&quot;&gt;
&lt;label class=&quot;custom-control-label&quot; data-aire-component=&quot;label&quot; for=&quot;__aire-22-40&quot;&gt;
Demo check box
&lt;/label&gt;
&lt;div class=&quot;not-yet-validated d-none&quot; data-aire-component=&quot;errors&quot;&gt;
&lt;div class=&quot;d-none&quot; data-aire-component=&quot;errors&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
Expand All @@ -208,7 +254,7 @@ <h2 class="m-0 px-6 py-3 border-b text-salmon">
&lt;/label&gt;
&lt;div class=&quot;custom-control custom-radio&quot; data-aire-component=&quot;label_wrapper&quot; data-aire-for=&quot;foo&quot;&gt;
&lt;div class=&quot;custom-control custom-radio&quot; data-aire-component=&quot;label_wrapper&quot; data-aire-for=&quot;foo&quot;&gt;
&lt;input
type=&quot;radio&quot; class=&quot;custom-control-input&quot; data-aire-component=&quot;radio-group&quot; name=&quot;foo&quot; data-aire-for=&quot;foo&quot;
value=&quot;one&quot;
Expand Down Expand Up @@ -236,9 +282,9 @@ <h2 class="m-0 px-6 py-3 border-b text-salmon">
&lt;/div&gt;
&lt;div class=&quot;not-yet-validated d-none&quot; data-aire-component=&quot;errors&quot; data-aire-for=&quot;foo&quot;&gt;
&lt;div class=&quot;d-none&quot; data-aire-component=&quot;errors&quot; data-aire-for=&quot;foo&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
Expand All @@ -250,7 +296,7 @@ <h2 class="m-0 px-6 py-3 border-b text-salmon">
&lt;/label&gt;
&lt;div class=&quot;&quot; data-aire-component=&quot;wrapper&quot; data-aire-for=&quot;bar&quot;&gt;
&lt;div class=&quot;&quot; data-aire-component=&quot;wrapper&quot; data-aire-for=&quot;bar&quot;&gt;
Expand Down Expand Up @@ -297,17 +343,22 @@ <h2 class="m-0 px-6 py-3 border-b text-salmon">
&lt;/div&gt;
&lt;div class=&quot;not-yet-validated d-none&quot; data-aire-component=&quot;errors&quot; data-aire-for=&quot;bar&quot;&gt;
&lt;div class=&quot;d-none&quot; data-aire-component=&quot;errors&quot; data-aire-for=&quot;bar&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;button class=&quot;btn btn-primary&quot; data-aire-component=&quot;button&quot; type=&quot;submit&quot;&gt;
&lt;button class=&quot;btn btn-primary &quot; data-aire-component=&quot;button&quot; type=&quot;submit&quot;&gt;
Demo Button
&lt;/button&gt;
&lt;button class=&quot;btn btn-primary btn-secondary&quot; data-aire-component=&quot;button&quot; type=&quot;submit&quot;&gt;
Secondary Button
&lt;/button&gt;
Expand Down
Loading

0 comments on commit be65735

Please sign in to comment.