Поддержка ванильного JavaScript для Tailwind Plus

В Tailwind плюс есть много блоков пользовательского интерфейса, которые нуждаются в JavaScript, чтобы быть полезными, например, диалоги, выпадающие списки, командные палитры и многое другое. И если вы не являетесь пользователем React или Vue, использование этих блоков пользовательского интерфейса всегда означало написание всего этого сложного JavaScript самостоятельно.

Что ж, сегодня это наконец меняется – Каждый блок пользовательского интерфейса в Tailwind Plus теперь полностью функционален, доступен и интерактивенвключая простые примеры HTML.

Теперь вы можете использовать любой падатьВ Командная палитраВ диалогВ ящики многое другое в любом проекте, над которым вы работаете – не требуется фреймворк JavaScript.

Чтобы сделать это, мы построили @tailwindplus/elements – Библиотека, которую мы выпускаем исключительно для Tailwind Plus клиенты.

Элементы – это коллекция без головы Пользовательские элементы Это завершает все сложное поведение, необходимое для создания пользовательских интерактивных интерфейсов, используя только HTML, и может быть стилизовано любым способом, который вам нравится, используя утилиты или пользовательские CSS.

Вместо того, чтобы быть связанным с конкретной структурой JavaScript, эти пользовательские элементы работают везде, где вы можете использовать



Мы также связываем любые необходимые полифиллы для этих функций, чтобы убедиться, что элементы работают во всех одинаковых Браузеры, поддерживаемые Tailwind CSS V4.0Полем Это означает, что элементы будут только меньше, так как эти современные функции платформы станут более доступными.

Поскольку HTML является самым низким общим знаменателем между всеми веб-структурами, элементы позволяют всем блокам пользовательского интерфейса только для HTML в Tailwind Plus для работы буквально в любом месте.
Вот один из наших Combobox примеры, подключенные к двустороннему связующему в Стройный:



Combobox.svelte

<script>  let input = $state("");  function handleSubmit() {    alert(`Selected: ${input}`);  }script><form onsubmit={handleSubmit}>  <label for="autocomplete" class="block text-sm/6 font-medium text-gray-900">Assigned tolabel>  <el-autocomplete class="relative mt-2 block">    <input bind:value={input} id="autocomplete" type="text" class="block w-full rounded-md ..." />    <button type="button" class="absolute inset-y-0 right-0 flex ...">      <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-5 text-gray-400">        <path d="M5.22 8.22a.75.75 ..." clip-rule="evenodd" fill-rule="evenodd" />      svg>    button>    <el-options anchor="bottom end" popover class="max-h-60 w-(--input-width) [--anchor-gap:--spacing(1)] ...">      <el-option value="Leslie Alexander" class="block truncate aria-selected:bg-indigo-600 aria-selected:text-white ...">Leslie Alexanderel-option>    el-options>  el-autocomplete>  <button type="submit">Submitbutton>form>

class OrdersController < ApplicationController def new @cars = Car.all @selected_car = @cars.first end def create car = Car.find(params[:car_id]) flash[:notice] = "Selected car: #{car.name}" redirect_to root_path endend

<%= form_with do |form| %> <%= form.label :car_id, "Select model:" %> <el-select name="car_id" id="car_id" value="<%= @selected_car.id %>"> <button type="button" class="grid w-full cursor-default grid-cols-1 ..."> <el-selectedcontent class="col-start-1 row-start-1 truncate pr-6"> <%= @selected_car.name %> el-selectedcontent> <svg viewBox="0 0 16 16" aria-hidden="true" class="col-start-1 row-start-1 size-5 ..."> <path d="M5.22 10.22a.75.75 ..." clip-rule="evenodd" fill-rule="evenodd" /> svg> button> <el-options anchor="bottom end" popover=""> <% @cars.each do |car| %> <el-option value="<%= car.id %>"> <span class="block truncate font-normal group-aria-selected/option:font-semibold"> <%= car.name %> span> <span class="flex group-not-aria-selected/option:hidden group-focus/option:text-white in-[el-selectedcontent]:hidden ..."> <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-5"> <path d="M16.704 4.153a.75.75 0 ..." clip-rule="evenodd" fill-rule="evenodd" /> svg> span> el-option> <% end %> el-options> el-select> <%= form.submit "Place order" %><% end %>

import Link from "next/link";export function Menu() { return ( <el-dropdown className="relative inline-block text-left"> <button className="inline-flex w-full justify-center ..."> Menu <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className="-mr-1 size-5 text-gray-400"> <path d="M5.22 8.22a.75.75 ..." clip-rule="evenodd" fill-rule="evenodd" /> svg> button> <el-menu anchor="bottom end" popover className="transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 ..."> <div className="py-1"> <Link href="https://tailwindcss.com/" className="block px-4 py-2 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden ...">HomeLink> <Link href="/about" className="block px-4 py-2 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden ...">AboutLink> <Link href="/faq" className="block px-4 py-2 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden ...">FAQLink> div> el-menu> el-dropdown> );}

Share this:

Leave a Comment Cancel reply