Polish component example docs
This commit is contained in:
parent
9887a13d76
commit
02f5f08503
5 changed files with 22 additions and 22 deletions
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Alerts"
|
||||
description: null
|
||||
description: Examples of building alert components with Tailwind CSS.
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress-example')
|
||||
Tailwind doesn't include pre-designed alert components out of the box, but they're easy to build using existing utilities.
|
||||
|
||||
### Traditional
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Buttons"
|
||||
description: null
|
||||
description: Examples of building buttons with Tailwind CSS.
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress-example')
|
||||
Tailwind doesn't include pre-designed button styles out of the box, but they're easy to build using existing utilities.
|
||||
|
||||
### Simple
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Cards"
|
||||
description: null
|
||||
description: Examples of building card components with Tailwind CSS.
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress-example')
|
||||
Tailwind doesn't include pre-designed card components out of the box, but they're easy to build using existing utilities.
|
||||
|
||||
## Stacked
|
||||
### Stacked
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
|
||||
<div class="max-w-sm rounded overflow-hidden shadow-lg">
|
||||
|
|
@ -25,7 +25,7 @@ description: null
|
|||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Horizontal
|
||||
### Horizontal
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
|
||||
<div class="max-w-md w-full lg:flex">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Forms"
|
||||
description: null
|
||||
description: Examples of building forms with Tailwind CSS.
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress-example')
|
||||
Tailwind doesn't include purpose-built form control classes out of the box, but form controls are easy to style using existing utilities.
|
||||
|
||||
## Login Form
|
||||
### Login Form
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'px-3 py-10 bg-grey-lighter flex justify-center'])
|
||||
<div class="w-full max-w-xs">
|
||||
|
|
@ -39,7 +39,7 @@ description: null
|
|||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Inline Form
|
||||
### Inline Form
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
|
||||
<form class="w-full max-w-xs">
|
||||
|
|
@ -83,7 +83,7 @@ description: null
|
|||
</form>
|
||||
@endcomponent
|
||||
|
||||
## Form Grid
|
||||
### Form Grid
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
|
||||
<form class="w-full max-w-md">
|
||||
|
|
@ -143,7 +143,7 @@ description: null
|
|||
</form>
|
||||
@endcomponent
|
||||
|
||||
## Underline Form
|
||||
### Underline Form
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
|
||||
<form class="w-full max-w-sm">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Navigation"
|
||||
description: null
|
||||
description: Examples of building navigation components with Tailwind CSS.
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress-example')
|
||||
Tailwind doesn't include pre-designed navigation components out of the box, but they're easy to build using existing utilities.
|
||||
|
||||
## Simple
|
||||
### Simple
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex">
|
||||
|
|
@ -25,7 +25,7 @@ description: null
|
|||
</ul>
|
||||
@endcomponent
|
||||
|
||||
## Responsive Header
|
||||
### Responsive Header
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<nav class="flex items-center justify-between flex-wrap bg-teal p-6">
|
||||
|
|
@ -57,7 +57,7 @@ description: null
|
|||
</nav>
|
||||
@endcomponent
|
||||
|
||||
## Tabs
|
||||
### Tabs
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex border-b">
|
||||
|
|
@ -76,7 +76,7 @@ description: null
|
|||
</ul>
|
||||
@endcomponent
|
||||
|
||||
## Pills
|
||||
### Pills
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex">
|
||||
|
|
@ -92,7 +92,7 @@ description: null
|
|||
</ul>
|
||||
@endcomponent
|
||||
|
||||
## Stretched
|
||||
### Stretched
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex">
|
||||
|
|
@ -108,7 +108,7 @@ description: null
|
|||
</ul>
|
||||
@endcomponent
|
||||
|
||||
## Justified
|
||||
### Justified
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex justify-between">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue