Как установить и использовать Daisy UI Tailwind в Laravel 9

В этом разделе мы увидим, как использовать daisy ui в качестве CSS-компонентов Tailwind в laravel 9. Daisy UI — это бесплатная библиотека компонентов Tailwind CSS с открытым исходным кодом. Пользовательский интерфейс Daisy использует класс сортировки, например, бутстрап. `.btn` `.btn-primary` . Пользовательский интерфейс Tailwind daisy поставляется с множеством компонентов попутного ветра, таких как кнопка, карточка, оповещение, аватар, модальное окно, выпадающий список и т. д. В этом разделе мы установим daisy ui с laravel breeze, вы также можете использовать daisy ui с laravel jetstream.

Установите компоненты Daisy UI Tailwind в Laravel 9

Создайте проект Laravel.

composer create-project laravel/laravel laravel-daisyui 

Подключитесь к базе данных и установите Laravel Breeze через композитор

composer require laravel/breeze --dev

выполните команду ниже, чтобы опубликовать файл конфигурации.

php artisan breeze:install

установить и запустить нпм

npm install && npm run dev

запустите команду ниже для миграции

php artisan migrate

Установите daisyUI в laravel

Установите daisyUI через NPM:

npm i daisyui

Затем добавьте daisyUI в файлы tailwind.config.js:

module.exports = {
 //...
 plugins: [require("daisyui")],
}

В ларавеле.

хвостовой ветер.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms'), require("daisyui")],
};

Затем запустите npm run dev.

npm run dev

Теперь ваше приложение готово с daisy UI.

просмотры/dashboard.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200 h-screen flex justify-center">
                    
                    <div class="mt-20">
                        <h3 class="text-center text-xl font-bold">Daisyui Button</h3>
                        <button class="btn">Button</button>
                        <button class="btn btn-primary">Button</button>
                        <button class="btn btn-secondary">Button</button>
                        <button class="btn btn-accent">Button</button>
                        <button class="btn btn-ghost">Button</button>
                        <button class="btn btn-link">Button</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

laravel попутный ветер маргаритка пользовательский интерфейс

Источник:  https://larainfo.com

#php #laravel #tailwindcss 

What is GEEK

Buddha Community

Как установить и использовать Daisy UI Tailwind в Laravel 9

Как установить и использовать Daisy UI Tailwind в Laravel 9

В этом разделе мы увидим, как использовать daisy ui в качестве CSS-компонентов Tailwind в laravel 9. Daisy UI — это бесплатная библиотека компонентов Tailwind CSS с открытым исходным кодом. Пользовательский интерфейс Daisy использует класс сортировки, например, бутстрап. `.btn` `.btn-primary` . Пользовательский интерфейс Tailwind daisy поставляется с множеством компонентов попутного ветра, таких как кнопка, карточка, оповещение, аватар, модальное окно, выпадающий список и т. д. В этом разделе мы установим daisy ui с laravel breeze, вы также можете использовать daisy ui с laravel jetstream.

Установите компоненты Daisy UI Tailwind в Laravel 9

Создайте проект Laravel.

composer create-project laravel/laravel laravel-daisyui 

Подключитесь к базе данных и установите Laravel Breeze через композитор

composer require laravel/breeze --dev

выполните команду ниже, чтобы опубликовать файл конфигурации.

php artisan breeze:install

установить и запустить нпм

npm install && npm run dev

запустите команду ниже для миграции

php artisan migrate

Установите daisyUI в laravel

Установите daisyUI через NPM:

npm i daisyui

Затем добавьте daisyUI в файлы tailwind.config.js:

module.exports = {
 //...
 plugins: [require("daisyui")],
}

В ларавеле.

хвостовой ветер.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms'), require("daisyui")],
};

Затем запустите npm run dev.

npm run dev

Теперь ваше приложение готово с daisy UI.

просмотры/dashboard.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200 h-screen flex justify-center">
                    
                    <div class="mt-20">
                        <h3 class="text-center text-xl font-bold">Daisyui Button</h3>
                        <button class="btn">Button</button>
                        <button class="btn btn-primary">Button</button>
                        <button class="btn btn-secondary">Button</button>
                        <button class="btn btn-accent">Button</button>
                        <button class="btn btn-ghost">Button</button>
                        <button class="btn btn-link">Button</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

laravel попутный ветер маргаритка пользовательский интерфейс

Источник:  https://larainfo.com

#php #laravel #tailwindcss 

Gordon  Taylor

Gordon Taylor

1614840465

How to Create User Authentication in Laravel 8 Using UI Auth Package

Laravel provides user authentication package to manage complete authentication like User Register, Login, Forgot Password, Email Verification. UI Auth…

You can create and manage authentication in Laravel 8 easily using inbuilt packages. User authentication is always the most important concern of any web application. If you want to handle the application functionalities and roles then it always requires a user module. On the basis of the user, you can manage the rights of access in the application. I already shared a post on one of the latest features of Laravel 8 for managing authentication using Jetstream and Livewire. In this post, I will show you how you can create authentication without using Jetstream. I will be going to use the Laravel UI package. Here, I will be starting with a new project in Laravel 8. So, let’s start.

#laravel 8 #auth package in laravel #laravel auth #ui auth in laravel #ui vue auth in laravel #user authentication in laravel

Seamus  Quitzon

Seamus Quitzon

1595201363

Php how to delete multiple rows through checkbox using ajax in laravel

First thing, we will need a table and i am creating products table for this example. So run the following query to create table.

CREATE TABLE `products` (
 `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
 `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
 `description` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
 `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
 `updated_at` datetime DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

Next, we will need to insert some dummy records in this table that will be deleted.

INSERT INTO `products` (`name`, `description`) VALUES

('Test product 1', 'Product description example1'),

('Test product 2', 'Product description example2'),

('Test product 3', 'Product description example3'),

('Test product 4', 'Product description example4'),

('Test product 5', 'Product description example5');

Now we are redy to create a model corresponding to this products table. Here we will create Product model. So let’s create a model file Product.php file under app directory and put the code below.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = [
        'name','description'
    ];
}

Step 2: Create Route

Now, in this second step we will create some routes to handle the request for this example. So opeen routes/web.php file and copy the routes as given below.

routes/web.php

Route::get('product', 'ProductController@index');
Route::delete('product/{id}', ['as'=>'product.destroy','uses'=>'ProductController@destroy']);
Route::delete('delete-multiple-product', ['as'=>'product.multiple-delete','uses'=>'ProductController@deleteMultiple']);

#laravel #delete multiple rows in laravel using ajax #laravel ajax delete #laravel ajax multiple checkbox delete #laravel delete multiple rows #laravel delete records using ajax #laravel multiple checkbox delete rows #laravel multiple delete

Juned Ghanchi

1621508419

Laravel App Development Company in India, Hire Laravel Developers

Hire our expert team of Laravel app developers for flexible PHP applications across various cloud service providers.

With this easy build technology, we develop feature-rich apps that make your complex business process a lot easier. Our apps are,

  • More secure and scalable.
  • A good framework lets you manage and organize resources better.
  • And have a rich community base.

Get your business a best in classlaravel app. Hire laravel app developers in India. We have the best organizational set-up to provide you the most advanced app development services.

#laravel app development company india #hire laravel developers india #laravel app development company #hire laravel developers #laravel development agency #laravel app programmers

mehul bagada

mehul bagada

1592972324

Laravel Autocomplete Search With Jquery UI Example

Hi Guys,

In this Example,I will learn you how to use autocomplete search with jquery ui in laravel.you can easy and simply use autocomplete serach with jquery ui in laravel.

you can add to text search box then related text to get in your datatable.I show how you add jQuery UI autocomplete to the input field in the Laravel project.

Link :- https://www.nicesnippets.com/blog/laravel-autocomplete-search-with-jquery-ui-example

#laravel #laravel tutorial #laravel tutorial for beginner #learn laravel #learn laravel for free