CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

13 April, 2022

Cagilo: Blade Components for Laravel

 Programing Coderfunda     April 13, 2022     Packages     No comments   

 gilo is a set of open-source Blade components for the Laravel framework. This package doesn't require a CSS framework or JS resources to function and provides the following components:

  • Alerts component for working with Laravel session flashing
  • Device component - ability to hide or show depending on the user's device (user-agent)
  • Error component - easy way to work with Laravel's error message bag
  • Icon component - insert inline SVG files
  • Logout component - component log out users via a POST request
  • Meta component - set several OG and meta elements used by social media to provide previews of your content

The <x-meta> component seems powerful, with just a few lines, you can generate the following:

1<x-meta
2 title="Hello World"
3 description="Blade components are awesome!"
4 image="http://example.com/social.jpg"
5/>
6 
7<!--
8Outputs the following:
9-->
10<title>Hello World</title>
11 
12<!-- Primary Meta Tags -->
13<meta name="title" content="Hello World">
14<meta name="description" content="Blade components are awesome!">
15 
16 
17<!-- Open Graph / Facebook -->
18<meta property="og:type" content="website">
19<meta property="og:url" content="http://localhost"/>
20<meta property="og:locale" content="en"/>
21<meta property="og:title" content="Hello World"/>
22<meta property="og:description" content="Blade components are awesome!">
23<meta property="og:image" content="http://example.com/social.jpg">
24 
25<!-- Twitter -->
26<meta name="twitter:card" content="summary_large_image"/>
27<meta name="twitter:url" content="http://localhost">
28<meta name="twitter:title" content="Hello World">
29<meta name="twitter:description" content="Blade components are awesome!">
30<meta name="twitter:image" content="http://example.com/social.jpg">

While creating a logout button is straightforward, this package has a convenient component for doing this:

1<x-logout/>
2 
3<!--
4Outputs the following:
5-->
6<form method="POST" action="http://localhost/logout" id="logout">
7 <input type="hidden" name="_token" value="...">
8</form>
9 
10<button form="logout" type="submit">
11 Log out
12</button>

Lastly, the <x-device> component is helpful if you want to conditionally render your template based on a user's user-agent:

1<x-device desktop="true">
2 <h1>Hello Word</h1>
3</x-device>
4 
5<!-- or multiple devices -->
6<x-device phone="true" tablet="true">
7 <h1>Hello Word</h1>
8</x-device>

The documentation can help you get started and has examples for each blade component. You can learn more about this package, get full installation instructions, and view the source code on GitHub.

  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Vue.js Tutorial
      Vue.js Installation Compatibility Check Before going to install and use Vue.js in your project, you should check the compatibility issues....
  • JqueryUI Tutorial
    JqueryUI Tutorial    JqueryUI is the most popular front end frameworks currently. It is sleek, intuitive, and powerful mobile first fr...
  • Laravel - Application Structure
    The application structure in Laravel is basically the structure of folders, sub-folders and files included in a project. Once we create a ...
  • Python Tutorial
      Python   is a general-purpose interpreted, interactive, object-oriented, and high-level programming language. It was created by Guido van...
  • CSS Online Training
    CSS Online Training CSS is used to control the style of a web document in a simple and easy way. CSS is the acronym for "Casca...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (69)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • July (4)
  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

Loading...

Laravel News

Loading...

Copyright © CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda