Téléchargement termwind - Téléchargement du code source termwind

termwind

Autres catégories

v2.3.0

Télécharger

Logo Termwind

`Termwind`

Termwind vous permet de créer des applications de ligne de commande PHP uniques et magnifiques, à l'aide de l'API CSS Tailwind . En bref, c'est comme Tailwind CSS, mais pour les applications PHP en ligne de commande.

Installation

Nécessite PHP 8.0+

Exiger Termwind à l’aide de Composer :

composer require nunomaduro/termwind

Usage

 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()`

La fonction style() peut être utilisée pour ajouter vos propres styles personnalisés et également mettre à jour les couleurs.

 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()`

La fonction ask() peut être utilisée pour poser une question à l'utilisateur.

 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 );

Le return fourni par la méthode Ask sera la réponse fournie par l'utilisateur.

`terminal()`

La fonction terminal() renvoie une instance de la classe Terminal, avec les méthodes suivantes :

->width() : Renvoie toute la largeur du terminal.
->height() : Renvoie la hauteur totale du terminal.
->clear() : Il efface l'écran du terminal.

Cours pris en charge

Toutes les classes prises en charge utilisent exactement la même logique disponible sur tailwindcss.com/docs.

Couleur d'arrière-plan : bg-{color}-{variant} .
Couleur du texte : text-{color}-{variant} .
Poids de la police : font-bold , font-normal .
Style de police : italic .
Décoration du texte : underline , line-through .
Transformation du texte : uppercase , lowercase , capitalize , snakecase .
Débordement de texte : truncate .
Alignement du texte : text-left , text-center , text-right .
Marge : m-{margin} , ml-{leftMargin} , mr-{rightMargin} , mt-{topMargin} , mb-{bottomMargin} , mx-{horizontalMargin} , my-{verticalMargin} .
Remplissage : p-{padding} , pl-{leftPadding} , pr-{rightPadding} , pt-{topPadding} , pb-{bottomPadding} , px-{horizontalPadding} , py-{verticalPadding} .
Espace : space-y-{space} , space-x-{space} .
Largeur : w-{width} , w-full , w-auto .
Largeur minimale : min-w-{width} .
Largeur maximale : max-w-{width} .
Justifier le contenu : justify-between , justify-around , justify-evenly , justify-center .
Visibilité : invisible .
Affichage : block , flex , hidden .
Flex : flex-1 .
Style de liste : list-disc , list-decimal , list-square , list-none .
Contenu : content-repeat-['.'] .

Conception réactive

Comme TailwindCSS, nous prenons également en charge les requêtes multimédias Responsive Design et voici les points d'arrêt pris en charge :

sm : 64 espaces (640px)
md : 76 espaces (768px)
lg : 102 espaces (1024px)
xl : 128 espaces (1280px)
2xl : 153 espaces (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);

Toutes les tailles de la CLI sont basées sur la taille de police 15.

Éléments HTML pris en charge

Tous les éléments ont la capacité d'utiliser l'attribut class .

`<div>`

L'élément <div> peut être utilisé comme élément de type bloc.

Styles par défaut : block

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

`<p>`

L'élément <p> peut être utilisé comme paragraphe.

Styles par défaut : block

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

`<span>`

L'élément <span> peut être utilisé comme conteneur de texte en ligne.

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

`<a>`

L'élément <a> peut être utilisé comme lien hypertexte. Il permet d'utiliser l'attribut href pour ouvrir le lien lorsqu'on clique dessus.

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

`<b>` et `<strong>`

Les éléments <b> et <strong> peuvent être utilisés pour marquer le texte en gras .

Styles par défaut : font-bold

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

`<i>` et `<em>`

Les éléments <i> et <em> peuvent être utilisés pour marquer le texte en italique .

Styles par défaut : italic

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

`<s>`

L'élément <s> peut être utilisé pour ajouter un ~~ligne à travers~~ le texte.

Styles par défaut : line-through

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

`<br>`

L'élément <br> peut être utilisé pour effectuer un saut de ligne.

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

`<ul>`

L'élément <ul> peut être utilisé pour une liste non ordonnée. Il ne peut accepter que les éléments <li> comme enfants, s'il existe un autre élément fourni, il lancera une exception InvalidChild .

Styles par défaut : block , list-disc

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

`<ol>`

L'élément <ol> peut être utilisé pour une liste ordonnée. Il ne peut accepter que les éléments <li> comme enfants, s'il existe un autre élément fourni, il lancera une exception InvalidChild .

Styles par défaut : block , list-decimal

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

`<li>`

L'élément <li> peut être utilisé comme élément de liste. Il ne doit être utilisé qu'en tant qu'enfant des éléments <ul> et <ol> .

Styles par défaut : block , list-decimal

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

`<dl>`

L'élément <dl> peut être utilisé pour une liste de descriptions. Il ne peut accepter que les éléments <dt> ou <dd> comme enfants, s'il existe un autre élément fourni, il lancera une exception InvalidChild .

Styles par défaut : block

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

`<dt>`

L'élément <dt> peut être utilisé comme titre de description. Il ne doit être utilisé qu'en tant qu'enfant d'éléments <dl> .

Styles par défaut : block , font-bold

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

`<dd>`

L'élément <dd> peut être utilisé comme titre de description. Il ne doit être utilisé qu'en tant qu'enfant d'éléments <dl> .

Styles par défaut : block , ml-4

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

`<hr>`

L'élément <hr> peut être utilisé comme ligne horizontale.

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

`<table>`

L'élément <table> peut avoir des colonnes et des lignes.

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

`<pre>`

L'élément <pre> peut être utilisé comme texte préformaté.

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

`<code>`

L'élément <code> peut être utilisé comme surligneur de code. Il accepte les attributs line et 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 est un logiciel open source sous licence MIT .

Développer

Informations supplémentaires

Version v2.3.0
Type Autres catégories
Date de mise à jour 2024-12-14
taille 50MB
Provenant de Github

Applications connexes

Recommandé pour vous

chat.petals.dev

Autre code source

1.0.0
GPT Prompt Templates

Autre code source

1.0.0
GPTyped

Autre code source

GPTyped 1.0.5
PHP deuxième dés ouverts devinant le code source du site Web version complète + compte public gratuit + paiement sans visa

Autres catégories
jsp1362 système de gestion de la maintenance informatique projet de fin d'études ssh

Autres catégories
La nouvelle version du code source d'émission de carte code source d'émission de carte personnelle avec sous-station, distribution, adhésion, points, système de mot de passe de carte d'exp

Autres catégories
Google Dorks

Autre code source

1.0
shepherd

Autre code source

v6.1.6-react-shepherd: Prepare Release (#3063)
mongo express

Autre code source

v1.1.0-rc-3

Actualités connexes Tout

termwind

Termwind

Installation

Usage

style()

ask()

terminal()

Cours pris en charge

Conception réactive

Éléments HTML pris en charge

<div>

<p>

<span>

<a>

<b> et <strong>

<i> et <em>

<s>

<br>

<ul>

<ol>

<li>

<dl>

<dt>

<dd>

<hr>

<table>

<pre>

<code>

`Termwind`

`style()`

`ask()`

`terminal()`

`<div>`

`<p>`

`<span>`

`<a>`

`<b>` et `<strong>`

`<i>` et `<em>`

`<s>`

`<br>`

`<ul>`

`<ol>`

`<li>`

`<dl>`

`<dt>`

`<dd>`

`<hr>`

`<table>`

`<pre>`

`<code>`