หน้าแรก>ซอร์สโค้ด PHP>หมวดหมู่อื่นๆ
ดาวน์โหลด

โลโก้เทอมวินด์

Termwind

Termwind ช่วยให้คุณสร้างแอปพลิเคชันบรรทัดคำสั่ง PHP ที่สวยงามและมีเอกลักษณ์ได้โดยใช้ Tailwind CSS API กล่าวโดยสรุป มันเหมือนกับ Tailwind CSS แต่สำหรับแอปพลิเคชันบรรทัดคำสั่ง PHP

การติดตั้ง

ต้องใช้ PHP 8.0+

ต้องการ Termwind โดยใช้ Composer: 

composer require nunomaduro/termwind

การใช้งาน 

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

ฟังก์ชัน style() สามารถใช้เพื่อเพิ่มสไตล์ที่กำหนดเองและอัพเดตสีได้ 

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

อาจใช้ฟังก์ชัน ask() เพื่อถามคำถามแก่ผู้ใช้ 

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

return ที่ได้รับจากวิธีถามจะเป็นคำตอบที่ได้รับจากผู้ใช้

terminal()

ฟังก์ชัน terminal() ส่งคืนอินสแตนซ์ของคลาส Terminal โดยมีวิธีการดังต่อไปนี้:

  • ->width() : ส่งคืนความกว้างเต็มของเทอร์มินัล
  • ->height() : ส่งกลับความสูงเต็มของเทอร์มินัล
  • ->clear() : ล้างหน้าจอเทอร์มินัล

รองรับชั้นเรียน

คลาสทั้งหมดที่รองรับใช้ตรรกะเดียวกันกับที่มีอยู่ใน tailwindcss.com/docs ทุกประการ

  • สีพื้นหลัง: bg-{color}-{variant}
  • สีข้อความ: text-{color}-{variant}
  • น้ำหนักแบบอักษร: font-bold , font-normal
  • รูปแบบตัวอักษร: italic
  • การตกแต่งข้อความ: underline , line-through
  • การแปลงข้อความ: uppercase lowercase capitalize snakecase
  • ข้อความล้น: truncate
  • การจัดแนวข้อความ: text-left , text-center , text-right
  • ระยะขอบ: m-{margin} , ml-{leftMargin} , mr-{rightMargin} , mt-{topMargin} , mb-{bottomMargin} , mx-{horizontalMargin} , my-{verticalMargin}
  • การแพ็ดดิ้ง: p-{padding} , pl-{leftPadding} , pr-{rightPadding} , pt-{topPadding} , pb-{bottomPadding} , px-{horizontalPadding} , py-{verticalPadding}
  • ช่องว่าง: space-y-{space} , space-x-{space}
  • ความกว้าง: w-{width} , w-full , w-auto
  • ความกว้างขั้นต่ำ: min-w-{width}
  • ความกว้างสูงสุด: max-w-{width}
  • จัดชิดขอบเนื้อหา: justify-between , justify-around , justify-evenly , justify-center
  • การมองเห็น: invisible .
  • จอแสดงผล: block , flex , hidden .
  • ดิ้น: flex-1
  • รูปแบบรายการ: list-disc , list-decimal , list-square , list-none
  • เนื้อหา: content-repeat-['.']

การออกแบบที่ตอบสนอง

เช่นเดียวกับ TailwindCSS เรายังรองรับการสืบค้นสื่อการออกแบบที่ตอบสนองด้วย และนี่คือเบรกพอยท์ที่รองรับ:

  • sm : 64 ช่องว่าง (640px)
  • md : 76 ช่องว่าง (768px)
  • lg : 102 ช่องว่าง (1024px)
  • xl : 128 ช่องว่าง (1280px)
  • 2xl : 153 ช่องว่าง (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);

ขนาดทั้งหมดสำหรับ CLI จะขึ้นอยู่กับขนาดแบบอักษร 15

รองรับองค์ประกอบ HTML

องค์ประกอบทั้งหมดมีความสามารถในการใช้แอตทริบิวต์ class

<div>

<div> องค์ประกอบที่สามารถใช้เป็นองค์ประกอบประเภทบล็อก

สไตล์เริ่มต้น : block 

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

<p>

<p> องค์ประกอบสามารถใช้เป็นย่อหน้าได้

สไตล์เริ่มต้น : block 

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

<span>

The <span> element can be used as an inline text container. 

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

<a>

<a> องค์ประกอบสามารถใช้เป็นไฮเปอร์ลิงก์ได้ อนุญาตให้ใช้แอตทริบิวต์ href เพื่อเปิดลิงก์เมื่อคลิก 

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

<b> และ <strong>

องค์ประกอบ <b> และ <strong> สามารถใช้เพื่อทำเครื่องหมายข้อความเป็น ตัวหนา

รูปแบบเริ่มต้น : font-bold 

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

<i> และ <em>

<i> และ <em> องค์ประกอบสามารถใช้เพื่อทำเครื่องหมายข้อความเป็น ตัวเอียง

รูปแบบเริ่มต้น : italic 

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

<s>

องค์ประกอบ <s> สามารถใช้เพื่อเพิ่ม เส้นผ่าน ข้อความ

สไตล์เริ่มต้น : line-through 

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

<br>

<br> องค์ประกอบสามารถใช้เพื่อแบ่งบรรทัดได้ 

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

<ul>

องค์ประกอบ <ul> สามารถใช้สำหรับรายการที่ไม่เรียงลำดับ สามารถยอมรับองค์ประกอบ <li> เป็นลูกได้เท่านั้น หากมีองค์ประกอบอื่นให้ไว้ ก็จะส่งข้อยกเว้น InvalidChild

สไตล์เริ่มต้น : block , list-disc 

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

<ol>

<ol> องค์ประกอบสามารถนำมาใช้สำหรับรายการสั่งซื้อ สามารถยอมรับองค์ประกอบ <li> เป็นลูกได้เท่านั้น หากมีองค์ประกอบอื่นให้ไว้ ก็จะส่งข้อยกเว้น InvalidChild

รูปแบบเริ่มต้น : block , list-decimal 

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

<li>

องค์ประกอบ <li> สามารถใช้เป็นรายการได้ ควรใช้เป็นลูกขององค์ประกอบ <ul> และ <ol> เท่านั้น

รูปแบบเริ่มต้น : block , list-decimal 

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

<dl>

<dl> องค์ประกอบที่สามารถนำมาใช้สำหรับรายการคำอธิบาย สามารถยอมรับองค์ประกอบ <dt> หรือ <dd> เป็นลูกได้เท่านั้น หากมีองค์ประกอบอื่นให้ไว้ ก็จะส่งข้อยกเว้น InvalidChild

สไตล์เริ่มต้น : block 

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

<dt>

องค์ประกอบ <dt> สามารถใช้เป็นชื่อคำอธิบายได้ ควรใช้เป็นลูกขององค์ประกอบ <dl> เท่านั้น

รูปแบบเริ่มต้น : block , font-bold 

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

<dd>

<dd> องค์ประกอบสามารถใช้เป็นชื่อคำอธิบายได้ ควรใช้เป็นลูกขององค์ประกอบ <dl> เท่านั้น

รูปแบบเริ่มต้น : block , ml-4 

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

<hr>

องค์ประกอบ <hr> สามารถใช้เป็นเส้นแนวนอนได้ 

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

<table>

องค์ประกอบ <table> สามารถมีคอลัมน์และแถวได้ 

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

<pre>

องค์ประกอบ <pre> สามารถใช้เป็นข้อความที่จัดรูปแบบไว้ล่วงหน้าได้ 

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

<code>

องค์ประกอบ <code> สามารถใช้เป็นไฮไลต์โค้ดได้ ยอมรับแอตทริบิวต์ line และ 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 เป็นซอฟต์แวร์โอเพ่นซอร์สที่ได้รับอนุญาตภายใต้ ใบอนุญาต MIT

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด