Cagilo: компоненти Blade для Laravel

Cagilo — це набір компонентів Blade із відкритим кодом для фреймворку Laravel. Цей пакет не потребує CSS-фреймворку чи ресурсів JS для функціонування та містить такі компоненти:

• 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

<x-meta> компонент здається потужним, лише за допомогою кількох рядків ви можете створити наступне:

<x-meta
    title="Hello World"
    description="Blade components are awesome!"
    image="http://example.com/social.jpg"
/>
 
<!--
Outputs the following:
-->
<title>Hello World</title>
 
<!-- Primary Meta Tags -->
<meta name="title" content="Hello World">
<meta name="description" content="Blade components are awesome!">
 
 
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="http://localhost"/>
<meta property="og:locale" content="en"/>
<meta property="og:title" content="Hello World"/>
<meta property="og:description" content="Blade components are awesome!">
<meta property="og:image" content="http://example.com/social.jpg">
 
<!--  Twitter -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:url" content="http://localhost">
<meta name="twitter:title" content="Hello World">
<meta name="twitter:description" content="Blade components are awesome!">
<meta name="twitter:image" content="http://example.com/social.jpg">

Хоча створити кнопку виходу просто, цей пакет має зручний компонент для цього:

<x-logout/>
 
<!--
Outputs the following:
-->
<form method="POST" action="http://localhost/logout" id="logout">
  <input type="hidden" name="_token" value="...">
</form>
 
<button form="logout" type="submit">
  Log out
</button>

Нарешті, <x-device> компонент корисний, якщо ви хочете умовно відобразити свій шаблон на основі агента користувача:

<x-device desktop="true">
    <h1>Hello Word</h1>
</x-device>
 
<!-- or multiple devices -->
<x-device phone="true" tablet="true">
    <h1>Hello Word</h1>
</x-device>

документація може допомогти вам розпочати роботу та містить приклади для кожного компонента леза. Ви можете дізнатися більше про цей пакет, отримати повні інструкції зі встановлення та переглянути вихідний код на GitHub.

Цей пакет було надіслано до нашого розділу Посилання на новини Laravel. Посилання – це місце, де спільнота може публікувати пакети та навчальні посібники в екосистемі Laravel. Підписуйтесь на Twitter @LaravelLinks