Startseite>PHP-Quellcode>Andere Kategorien
Herunterladen

Termwind-Logo

Termwind

Mit Termwind können Sie mithilfe der Tailwind-CSS- API einzigartige und schöne PHP-Befehlszeilenanwendungen erstellen. Kurz gesagt, es ist wie Tailwind CSS, aber für die PHP-Befehlszeilenanwendungen.

Installation

Erfordert PHP 8.0+

Erfordern Sie Termwind mit Composer: 

composer require nunomaduro/termwind

Verwendung 

 use function Termwind { render };

// single line html...
render ( ' <div class="px-1 bg-green-300">Termwind</div> ' );

// multi-line html...
render (<<<'HTML'
    <div>
        <div class="px-1 bg-green-600">Termwind</div>
        <em class="ml-1">
          Give your CLI apps a unique look
        </em>
    </div>
HTML);

// Laravel or Symfony console commands...
class UsersCommand extends Command
{
    public function handle ()
    {
        render (
            view ( ' users.index ' , [
                ' users ' => User:: all ()
            ])
        );
    }
}

style()

Die Funktion style() kann verwendet werden, um eigene benutzerdefinierte Stile hinzuzufügen und auch Farben zu aktualisieren. 

 use function Termwind { style };

style ( ' green-300 ' )-> color ( ' #bada55 ' );
style ( ' btn ' )-> apply ( ' p-4 bg-green-300 text-white ' );

render ( ' <div class="btn">Click me</div> ' );

ask()

Die Funktion ask() kann verwendet werden, um dem Benutzer eine Frage zu stellen. 

 use function Termwind { ask };

$ answer = ask ( <<<HTML
    <span class="mt-1 ml-2 mr-1 bg-green px-1 text-black">
        What is your name?
    </span>
HTML );

Die von der Ask-Methode bereitgestellte return ist die vom Benutzer bereitgestellte Antwort.

terminal()

Die Funktion terminal() gibt eine Instanz der Terminal-Klasse mit den folgenden Methoden zurück:

  • ->width() : Gibt die volle Breite des Terminals zurück.
  • ->height() : Gibt die volle Höhe des Terminals zurück.
  • ->clear() : Löscht den Terminalbildschirm.

Unterstützte Klassen

Alle unterstützten Klassen verwenden genau dieselbe Logik, die auf tailwindcss.com/docs verfügbar ist.

  • Hintergrundfarbe: bg-{color}-{variant} .
  • Textfarbe: text-{color}-{variant} .
  • Schriftstärke: font-bold , font-normal .
  • Schriftstil: italic .
  • Textdekoration: underline , line-through .
  • Texttransformation: uppercase , lowercase , capitalize , snakecase .
  • Textüberlauf: truncate .
  • Textausrichtung: text-left , text-center , text-right .
  • Rand: m-{margin} , ml-{leftMargin} , mr-{rightMargin} , mt-{topMargin} , mb-{bottomMargin} , mx-{horizontalMargin} , my-{verticalMargin} .
  • Polsterung: p-{padding} , pl-{leftPadding} , pr-{rightPadding} , pt-{topPadding} , pb-{bottomPadding} , px-{horizontalPadding} , py-{verticalPadding} .
  • Leerzeichen: space-y-{space} , space-x-{space} .
  • Breite: w-{width} , w-full , w-auto .
  • Min. Breite: min-w-{width} .
  • Maximale Breite: max-w-{width} .
  • Inhalt ausrichten: justify-between , justify-around , justify-evenly , justify-center .
  • Sichtbarkeit: invisible .
  • Anzeige: block , flex , hidden .
  • Flex: flex-1 .
  • Listenstil: list-disc , list-decimal , list-square , list-none .
  • Inhalt: content-repeat-['.'] .

Responsives Design

Wie TailwindCSS unterstützen wir auch Responsive Design-Medienabfragen und dies sind die unterstützten Haltepunkte:

  • sm : 64 Leerzeichen (640 Pixel)
  • md : 76 Leerzeichen (768px)
  • lg : 102 Leerzeichen (1024px)
  • xl : 128 Leerzeichen (1280 Pixel)
  • 2xl : 153 Leerzeichen (1536px) 
 render (<<<'HTML'
    <div class="bg-blue-500 sm:bg-red-600">
        If bg is blue is sm, if red > than sm breakpoint.
    </div>
HTML);

Alle Größen für die CLI basieren auf der Schriftgröße 15.

Unterstützte HTML-Elemente

Alle Elemente können das class verwenden.

<div>

Das <div> -Element kann als Blocktypelement verwendet werden.

Standardstile : block 

 render (<<<'HTML'
    <div>This is a div element.</div>
HTML);

<p>

Das <p> -Element kann als Absatz verwendet werden.

Standardstile : block 

 render (<<<'HTML'
    <p>This is a paragraph.</p>
HTML);

<span>

Das <span> -Element kann als Inline-Textcontainer verwendet werden. 

 render (<<<'HTML'
    <p>
        This is a CLI app built with <span class="text-green-300">Termwind</span>.
    </p>
HTML);

<a>

Das <a> -Element kann als Hyperlink verwendet werden. Es ermöglicht die Verwendung des href Attributs, um den Link zu öffnen, wenn darauf geklickt wird. 

 render (<<<'HTML'
    <p>
        This is a CLI app built with Termwind. <a href="/">Click here to open</a>
    </p>
HTML);

<b> und <strong>

Die Elemente <b> und <strong> können verwendet werden, um den Text als fett zu markieren.

Standardstile : font-bold 

 render (<<<'HTML'
    <p>
        This is a CLI app built with <b>Termwind</b>.
    </p>
HTML);

<i> und <em>

Mit den Elementen <i> und <em> kann der Text kursiv markiert werden.

Standardstil : italic 

 render (<<<'HTML'
    <p>
        This is a CLI app built with <i>Termwind</i>.
    </p>
HTML);

<s>

Mit dem <s> -Element kann ein hinzugefügt werden Linie durch der Text.

Standardstile : line-through 

 render (<<<'HTML'
    <p>
        This is a CLI app built with <s>Termwind</s>.
    </p>
HTML);

<br>

Das <br> -Element kann für einen Zeilenumbruch verwendet werden. 

 render (<<<'HTML'
    <p>
        This is a CLI <br>
        app built with Termwind.
    </p>
HTML);

<ul>

Das <ul> -Element kann für eine ungeordnete Liste verwendet werden. Es kann nur <li> -Elemente als untergeordnete Elemente akzeptieren. Wenn ein anderes Element vorhanden ist, wird eine InvalidChild Ausnahme ausgelöst.

Standardstile : block , list-disc 

 render (<<<'HTML'
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
HTML);

<ol>

Das <ol> -Element kann für eine geordnete Liste verwendet werden. Es kann nur <li> -Elemente als untergeordnete Elemente akzeptieren. Wenn ein anderes Element vorhanden ist, wird eine InvalidChild Ausnahme ausgelöst.

Standardstile : block , list-decimal 

 render (<<<'HTML'
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
    </ol>
HTML);

<li>

Das <li> -Element kann als Listenelement verwendet werden. Es sollte nur als untergeordnetes Element der Elemente <ul> und <ol> verwendet werden.

Standardstile : block , list-decimal 

 render (<<<'HTML'
    <ul>
        <li>Item 1</li>
    </ul>
HTML);

<dl>

Das <dl> -Element kann für eine Beschreibungsliste verwendet werden. Es kann nur <dt> oder <dd> -Elemente als untergeordnete Elemente akzeptieren. Wenn ein anderes Element vorhanden ist, wird eine InvalidChild Ausnahme ausgelöst.

Standardstile : block 

 render (<<<'HTML'
    <dl>
        <dt> Termwind</dt>
        <dd>Give your CLI apps a unique look</dd>
    </dl>
HTML);

<dt>

Das <dt> -Element kann als Beschreibungstitel verwendet werden. Es sollte nur als untergeordnetes Element von <dl> -Elementen verwendet werden.

Standardstile : block , font-bold 

 render (<<<'HTML'
    <dl>
        <dt> Termwind</dt>
    </dl>
HTML);

<dd>

Das <dd> -Element kann als Beschreibungstitel verwendet werden. Es sollte nur als untergeordnetes Element von <dl> -Elementen verwendet werden.

Standardstile : block , ml-4 

 render (<<<'HTML'
    <dl>
        <dd>Give your CLI apps a unique look</dd>
    </dl>
HTML);

<hr>

Das <hr> -Element kann als horizontale Linie verwendet werden. 

 render (<<<'HTML'
    <div>
        <div> Termwind</div>
        <hr>
        <p>Give your CLI apps a unique look</p>
    </div>
HTML);

<table>

Das <table> -Element kann Spalten und Zeilen haben. 

 render (<<<'HTML'
    <table>
        <thead>
            <tr>
                <th>Task</th>
                <th>Status</th>
            </tr>
        </thead>
        <tr>
            <th>Termwind</th>
            <td> Done</td>
        </tr>
    </table>
HTML);

<pre>

Das <pre> -Element kann als vorformatierter Text verwendet werden. 

 render (<<<'HTML'
    <pre>
        Text in a pre element
        it preserves
        both      spaces and
        line breaks
    </pre>
HTML);

<code>

Das <code> -Element kann als Code-Hervorhebung verwendet werden. Es akzeptiert line und start-line . 

 render (<<<'HTML'
    <code line="22" start-line="20">
        try {
            throw new Exception('Something went wrong');
        } catch (Throwable $e) {
            report($e);
        }
    </code>
HTML);

Termwind ist eine Open-Source-Software, die unter der MIT-Lizenz lizenziert ist.

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle