TailwindCSS , Alpine.js and Laravel Livewire UI kit for Artisans.
📋 Requirements
🎉 Getting Started
⚡️ Installation
Install the Sikessem UI kit using Composer :
By adding the sikessem/ui
dependency to your composer.json
file:
{
"require" : {
"sikessem/ui" : " self.version "
}
}
Or by including the dependency:
composer require sikessem/ui --no-dev
🧑💻 Usage
📝 Syntax
There are several ways to use Sikessem’s UI components.
In the following examples component-name represents the name of the desired UI component.
If you want to use the text component, replace component-name with text as needed.
You can find the list of all components here .
View namespace
< x-ui::component-name property = " value " >
Content
</ x-ui::component-name >
Component alias
< x-ui-component-name property = " value " >
Content
</ x-ui-component-name >
< s-component-name property = " value " />
< s-component-name property = " value " >
{{ $slot }}
</ s-component-name >
Component slots
< s-component-name property = " value " >
< s:slot-name slot-property = " property-value " >
My Slot
</ s:slot-name >
</ s-component-name >
Blade directives
Render a UI component:
@ui ( ' component-name ' , [ ' property ' => ' value ' ], ' Optional component slot or content ' )
If component-name is not a UI component it will be rendered as an HTML element.
Render an HTML orphan tag:
@tag ( ' element-name ' , [ ' property ' => ' value ' ])
Render an HTML paired tag:
@tag ( ' element-name ' , [ ' property ' => ' value ' ])
Here, element content or nothing.
@endtag
Note that the name of the element is not specified when closing. This is automatically detected according to the nesting order of the paired elements.
ui() helper
ui () -> make ( ' component-name ' , [ ' property ' => ' value ' ], ' content ' )
UI facade
UI :: make ( ' component-name ' , [ ' property ' => ' value ' ], ' content ' )
🍱 UI Components
In the following examples, we will use component tags . However, the result will be the same if you prefer to use another syntax .
Text component
Allows to translate and/or escape a text:
< s-text value = " Sigui Kessé Emmanuel < contact@sigui.ci> " escape translate />
This will output the following HTML:
Sigui Kessé Emmanuel < contact@sigui.ci >
Link component
Create an anchor pointing to a route or URL:
< s-link route = " home " > Back to home </ s-link >
< s-link href = " / " > Back to home </ s-link >
This will output the following HTML:
< a href = " / " > Back to home </ a >
< a href = " http://localhost/ " > Back to home </ a >
The Blade input:
< s-button > Click me </ s-button >
The HTML output:
< button type = " button " > Click me </ button >
The Blade input:
< s-button value = " Click me " />
The HTML output:
< input type = " button " value = " Click me " />
The Blade input:
< s-button href = " / " > Click me </ s-button >
The HTML output:
< a href = " http://localhost " > Click me </ a >
The Blade input:
< s-submit-button > Click me </ s-submit-button >
The HTML output:
< button type = " submit " > Click me </ button >
The Blade input:
< s-reset-button > Click me </ s-reset-button >
The HTML output:
< button type = " reset " > Click me </ button >
The Blade input:
< s-image-button src = " ... " alt = " ... " > Click me </ s-image-button >
The HTML output:
< button type = " image " src = " ... " alt = " ... " > Click me </ button >
Create a menu containing a list of entries:
< s-menu ordered :list = " ['Red', 'Green', 'Blue'] " />
< s-menu href = " ['Color' => ['Red', 'Green', 'Blue'], 'Author' => ['Kessé Emmanuel', 'Sigui']] " />
This will output the following HTML:
< ol >
< li > Red </ li >
< li > Green </ li >
< li > Blue </ li >
</ ol >
< ul >
< li >
Color
< ul >
< li > Red </ li >
< li > Green </ li >
< li > Blue </ li >
</ ul >
</ li >
< li >
Author
< ul >
< li > Kessé Emmanuel </ li >
< li > Sigui </ li >
</ ul >
</ li >
</ ul >
Label component
Create a label:
< s-label > Content </ s-label >
< s-label for = " name " text = " Name " />
This will output the following HTML:
< label for = " name " > Name </ label >
Flash component
Create a flash:
< s-flash class = " alert " type = " info " message = " Default info " />
If session “info” was set to “Info”, the output will be:
Otherwise, the output will be:
Or (in the second example):
< p class = " alert " > Default info </ p >
Flashes component
< s-flashes :messages = " ['info' => 'Info', 'warning'] " />
If the “info” and “warning” sessions have been set to “Info” and “Warning” respectively, the output will be:
< ul >
< li > Info </ li >
< li > Warning </ li >
</ ul >
Otherwise, the output will be:
Create a form:
< s-form >
Put the form content here
</ s-form >
This will output the following HTML:
< form method = " GET " action = " # " >
< input type = " hidden " name = " _token " value = " ... " >
</ form >
Error component
Create a error:
Errors component
Entry component
Create an entry:
< s-entry type = " textarea " name = " comment " />
< s-entry type = " name " autocomplete :datalist = "" />
This will output the following HTML:
< input type = " email " name = " email " id = " email " autocomplete = " email " :datalist = " [\'Emmanuel\', \'Kessé\', \'Sigui\'] " aria-invalid = " false " />
< textarea name = " comment " id = " comment " autocomplete = " comment " aria-invalid = " false " >
</ textarea >
< input type = " name " name = " name " id = " name " autocomplete = " name " list = " name-input-datalist " aria-invalid = " false " />
< datalist id = " text-input-datalist " >
< option > Emmanuel </ option >
< option > Kessé </ option >
< option > Sigui </ option >
</ datalist > ',
Icon component
< s-icon name = " user-group " />
< s-icon element = " svg " name = " user-group " type = " solid " width = " 20 " height = " 20 " size = " 20 " />
< s-icon element = " i " name = " user-group " type = " solid " width = " 20 " height = " 20 " size = " 20 " />
< s-icon element = " img " name = " user-group " type = " solid " width = " 20 " height = " 20 " size = " 20 " />
🎨 Custom components
Create custom components from config/ui.php
file.
@ui ( ' custom ' , [ ' class ' => ' element ' , ' id ' => ' myElement ' ], '' )
My custom component
@endui
Output:
< custom-element class = " my custom element " id = " myElement " >
My custom component
</ custom-element >
Component styles
Color utilities
< div class = " text-red bg-red-light-0 border-red-dark-0 " ></ div >