Download the PHP package aw-studio/fjord-ui-kit without Composer
On this page you can find all versions of the php package aw-studio/fjord-ui-kit. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package fjord-ui-kit
Bladesmith
A package with helpful Blade components for your litstack project.
Official Documentation
Documentation for Bladesmith can be found on litstack.io.
License
Bladesmith was created by Lennart Carstens-Behrens under the Sponsorware license.
Setup
To include all styles and scripts the x-styles
tag must be placed in the head
and the x-scripts
tag at the end of the body.
Customize
If you want to customize the blade components, you can simply publish them and edit them as desired.
Image
The image component uses lazy loading and prints a base64 string of the image before loading it. It also outputs the appropriate media conversion for the corresponding screen sizes.
The component requires an image parameter with a media model:
The component lazy loads images and previews a minified base64 version of the image untill it is loaded.
You may disable lazy loading by setting the lazy
attribute to false:
Building Navigations in Fjord
Every page needs a navigation. Building it often takes time, especially if the
design has to be adapted exactly to your needs. The Ui kit comes with a simple
extensive solution to include all possible navigations types that are built with
a list
field in a short time.
We start by creating a form in that we can build our navigation:
The next step is to add a nav
field to the newly created config file:
Now we can simply pass the list field to the x-fj-nav-list
component and a
navigation is created that can be build in the fjord backend:
This will result in the following simple horizontal navigation:
Customize the table using the following options
Method | Description |
---|---|
layout |
Can be horizontal or vertical . (default is vertial ) |
dropdown |
Wether the navigation should be a dropdown menue on mouseover . |
depth |
Max depth. |
subLevel |
Start depth. |
expandable |
Only display's level one, all child levels can be expanded on click . |
class |
Navigation class. |
activeClass |
Class of active items. (default is: fj--active ) |
Translatable Routes
Build translated routes in the form of /en/home
, /de/startseite
made easy.
Make shure to translate your routes within your translation-files in the
resources
directory, for example:
You can now simply add translated Routes to your preferred routes file using the
__()
helper in the uri string like this:
A translated route will be created for all locales defined in your
translatable
config. The locale will be prepended to the given uri and
name. So the routes for the previous example would be:
en.home
=>/en/home
de.home
=>/de/startseite
The __route
helper prepends the current locale to the given name and returns
the corresponding route:
Switching Languages
You may want to place a link to the different language route on your website. To
do this, the translate
method can be applied to the current route with the
desired locale.
With Parameters
For routes with parameters a translator must be specified. A translator is a controller method that returns the route parameters for the desired locale. The translator method receives the desired locale and the parameters for the current locale.
Localize
The Blade componend x-fj-localize
creates a link to the translated routes of
all locales.
Result:
You may change the content of the link By passing a slot with the name of the locale:
Result:
Helpers
child_is_active
The child is active determines wether a list item has a child with an active
route. The following example will add the is-active
class when a list item has
an active route
that is added from route field.
(Google)-Bot detection
For bot-detection in your templates use the custom Blade-If: