termwind
v2.3.0
TermwindTermwind를 사용하면 Tailwind CSS API를 사용하여 독특하고 아름다운 PHP 명령줄 애플리케이션을 구축할 수 있습니다. 간단히 말해서 Tailwind CSS와 비슷하지만 PHP 명령줄 애플리케이션용입니다.
PHP 8.0 이상이 필요합니다
Composer를 사용하여 Termwind가 필요합니다.
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 ); Ask 메소드에서 제공되는 return 은 사용자가 제공하는 답변이 됩니다.
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를 기준으로 합니다.
모든 요소에는 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> <span> 요소는 인라인 텍스트 컨테이너로 사용될 수 있습니다.
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 라이센스 에 따라 라이센스가 부여된 오픈 소스 소프트웨어입니다.
