最も一般的なユースケースに役立つ UI スニペット
39629 ワード
UI スニペットを組み合わせて Web デザインを作成したり、ユーザー インターフェイスと呼んだりできます.さまざまなスニペットが Web ページにインタラクティブ性を追加します.ただし、無数の異なる方法で Web ページを作成するために使用できる無数の UI スニペットがあり、一部のスニペットは非常に一般的に使用されており、UI デザインに不可欠になっています.多くの開発者は、異なる UI デザインに同じ UI スニペットを再利用する必要があります.最も一般的なユース ケースの一般的な UI スニペットをいくつかリストアップしました.
入力コントロールに使用されるボタンは、おそらく UI デザインにとって最も重要な要素です. Web サイトに情報を掲載するために使用されるため、ボタンの UI スニペットをいつでも自由に使用できるようにしておくとよいでしょう.
入力コントロールについて言えば、ボタンと同じくらい重要なもう 1 つの UI スニペットは入力グループです.ユーザー側からさまざまな情報を書き込むために使用される入力グループは、すべての開発者にとって必須の UI スニペットです.
検索フィールドは、ユーザーが Web サイトを簡単にナビゲートするのに役立ちます.最近では、検索フィールドのない Web サイトを目にすることはめったにありません.これは、設計にとってどれだけ重要かを示しています.
メッセージ ボックスは、情報コンポーネントのカテゴリに分類されます.ユーザーと情報を共有します.多くの新しい Web サイトには、デザインにメッセージ ボックスがあり、人々に新しい更新について知らせたり、役立つ情報を共有したりしています.定期的に UI に取り組んでいる場合は、メッセージ ボックスの UI スニペットを持たないことはお勧めできません.
グリッドは通常、レスポンシブ デザイン用に設計されています.グリッドは Web ページに構造を与えます.ただし、グリッドをいつ使用するかを知っておくことが重要です.グリッド用の UI スニペットを持つことは、現在、開発者の間ではごく普通のことです.
おそらく、最近のカードで最も人気のある UI 要素です.それらは、さまざまな情報を保持する小さな長方形または正方形のボックスです.ほとんどすべてのプロジェクトでカード UI スニペットを使用します.
Web サイトを閲覧中に、希望するオプションを選択するためのドロップダウンに出くわしたことがあります.通常、E コマース Web サイトで有名ですが、ドロップダウンは現在、さまざまな異なるドメインでそのアプリケーションを持っています.
ラジオ ボタンは、ユーザーが複数のオプションから 1 つのオプションを選択するために使用されます.チェックボックスと混同されることがよくあります.唯一の違いは、チェックボックスは 1 つ以上のオプションを選択するために使用され、ラジオ ボタンは 1 つのオプションのみを選択するために使用されることです.
私たちのような開発者が使用できるように、事前に作成された UI スニペットを備えた複数のプラットフォームがあります.開発者は、これらのプラットフォームからコード スニペットを取得し、必要に応じてカスタマイズできます.これらは、UI スニペットに最適なプラットフォームの一部です
CodeMyUI
JUSTINMIND
blox
Bootsnip
TUK
何度も使用するコンポーネントに UI スニペットを使用するのは簡単です.コーディングは面倒な作業なので、外部ソースから便利なものを両手でつかむ必要があります.個人的には、これらの情報源に頼りすぎるのは賢明ではないと思いますが、完全に無視するのも意味がありません.
ボタン
入力コントロールに使用されるボタンは、おそらく UI デザインにとって最も重要な要素です. Web サイトに情報を掲載するために使用されるため、ボタンの UI スニペットをいつでも自由に使用できるようにしておくとよいでしょう.
`<div class="py-6 flex justify-center">
<dh-component>
<div class="mx-2 my-2 px-6 flex flex-wrap">
<button class="mx-2 my-2 bg-gray-300 transition duration-150 ease-in-out hover:bg-gray-400 rounded text-indigo-700 px-8 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700">Button</button>
<button class="mx-2 my-2 bg-indigo-700 transition duration-150 ease-in-out hover:bg-indigo-600 rounded text-white px-8 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600">Button</button>
<a href="javascript: void(0)" class="mx-2 my-2 flex items-center bg-white transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-600 rounded border border-gray-600 text-gray-500 pl-3 pr-6 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<span class="h-4 w-4 mr-2">
<svg xmlns="www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<rect x="3" y="5" width="18" height="14" rx="2" />
<polyline points="3 7 12 13 21 7" />
</svg>
</span>
Button
</a>
</div>
</dh-component>
</div>`
入力グループ
入力コントロールについて言えば、ボタンと同じくらい重要なもう 1 つの UI スニペットは入力グループです.ユーザー側からさまざまな情報を書き込むために使用される入力グループは、すべての開発者にとって必須の UI スニペットです.
<div class="flex lg:flex-row flex-col items-center py-8 px-4">
<div class="flex flex-col lg:mr-16">
<label for="email1" class="text-gray-800 dark:text-gray-100 text-sm font-bold leading-tight tracking-normal mb-2">Email</label>
<div class="relative">
<div class="absolute text-gray-600 dark:text-gray-400 flex items-center pl-4 h-full cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<rect x="3" y="5" width="18" height="14" rx="2" />
<polyline points="3 7 12 13 21 7" />
</svg>
</div>
<input id="email1" class="text-gray-600 dark:text-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 dark:focus:border-indigo-700 dark:border-gray-700 dark:bg-gray-800 bg-white font-normal w-64 h-10 flex items-center pl-12 text-sm border-gray-300 rounded border shadow" placeholder="Placeholder" />
</div>
</div>
<div class="flex flex-col lg:mr-16 lg:py-0 py-4">
<label for="email2" class="text-gray-800 dark:text-gray-100 text-sm font-bold leading-tight tracking-normal mb-2">Email</label>
<div class="relative">
<div class="absolute text-gray-600 dark:text-gray-400 flex items-center px-4 border-r dark:border-gray-700 h-full cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<rect x="3" y="5" width="18" height="14" rx="2" />
<polyline points="3 7 12 13 21 7" />
</svg>
</div>
<input id="email2" class="text-gray-600 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 dark:text-gray-400 focus:outline-none dark:focus:border-indigo-700 dark:border-gray-700 dark:bg-gray-800 bg-white font-normal w-64 h-10 flex items-center pl-16 text-sm border-gray-300 rounded border shadow" placeholder="Placeholder" />
</div>
</div>
<div class="flex flex-col lg:py-0 py-4">
<label for="email3" class="text-gray-800 dark:text-gray-100 text-sm font-bold leading-tight tracking-normal mb-2">Email</label>
<div class="relative">
<div class="absolute text-white flex items-center px-4 border-r dark:border-gray-700 h-full bg-indigo-700 dark:bg-indigo-600 rounded-l cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<rect x="3" y="5" width="18" height="14" rx="2" />
<polyline points="3 7 12 13 21 7" />
</svg>
</div>
<input id="email3" class="text-gray-600 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 dark:text-gray-400 focus:outline-none dark:focus:border-indigo-700 dark:border-gray-700 dark:bg-gray-800 bg-white font-normal w-64 h-10 flex items-center pl-16 text-sm border-gray-300 rounded border shadow" placeholder="Placeholder" />
</div>
</div>
</div>
検索フィールド
検索フィールドは、ユーザーが Web サイトを簡単にナビゲートするのに役立ちます.最近では、検索フィールドのない Web サイトを目にすることはめったにありません.これは、設計にとってどれだけ重要かを示しています.
<div class="flex justify-center">
<div class="mb-3 xl:w-96">
<div class="input-group relative flex flex-wrap items-stretch w-full mb-4">
<input type="search" class="form-control relative flex-auto min-w-0 block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" placeholder="Search" aria-label="Search" aria-describedby="button-addon2">
<button class="btn inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out flex items-center" type="button" id="button-addon2">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="w-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
</svg>
</button>
</div>
</div>
</div>
メッセージボックス
メッセージ ボックスは、情報コンポーネントのカテゴリに分類されます.ユーザーと情報を共有します.多くの新しい Web サイトには、デザインにメッセージ ボックスがあり、人々に新しい更新について知らせたり、役立つ情報を共有したりしています.定期的に UI に取り組んでいる場合は、メッセージ ボックスの UI スニペットを持たないことはお勧めできません.
<div class="flex items-center justify-center px-4">
<div id="alert" tabindex="0" class="focus:outline-none transition duration-150 ease-in-out w-full lg:w-11/12 mx-auto bg-white dark:bg-gray-800 shadow rounded flex flex-col py-4 md:py-0 items-center md:flex-row justify-between">
<div class="flex flex-col items-center md:flex-row">
<div class="mr-3 p-4 bg-green-400 rounded md:rounded-tr-none md:rounded-br-none text-white">
<img class="focus:outline-none" src="https://tuk-cdn.s3.amazonaws.com/can-uploader/simple-with-action-links-success-svg1.svg" alt="success" />
</div>
<p class="mr-2 text-base font-bold text-gray-800 dark:text-gray-100 mt-2 md:my-0">Success</p>
<div class="h-1 w-1 bg-gray-300 dark:bg-gray-700 rounded-full mr-2 hidden xl:block"></div>
<p class="text-sm lg:text-base dark:text-gray-400 text-gray-600 lg:pt-1 xl:pt-0 sm:mb-0 mb-2 text-center sm:text-left">Your Payment was successful. You can now use our services.</p>
</div>
<div class="flex xl:items-center lg:items-center sm:justify-end justify-center pr-4">
<button class="focus:outline-none focus:text-indigo-500 hover:text-indigo-500 text-sm mr-4 font-bold cursor-pointer text-indigo-700 dark:text-indigo-600">Details</button>
<button class="focus:outline-none focus:text-gray-400 hover:text-gray-400 text-sm cursor-pointer text-gray-600 dark:text-gray-400" onclick="closeAlert()">Dismiss</button>
</div>
</div>
</div>
グリッド
グリッドは通常、レスポンシブ デザイン用に設計されています.グリッドは Web ページに構造を与えます.ただし、グリッドをいつ使用するかを知っておくことが重要です.グリッド用の UI スニペットを持つことは、現在、開発者の間ではごく普通のことです.
<div class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 pt-6 gap-8">
<div class="rounded border-gray-300 dark:border-gray-700 border-dashed border-2 h-24"></div>
<div class="rounded border-gray-300 dark:border-gray-700 border-dashed border-2 h-24"></div>
</div>
カード
おそらく、最近のカードで最も人気のある UI 要素です.それらは、さまざまな情報を保持する小さな長方形または正方形のボックスです.ほとんどすべてのプロジェクトでカード UI スニペットを使用します.
<div class="flex items-center justify-between w-full">
<div class="flex flex-col lg:flex-row w-full items-start lg:items-center rounded bg-white shadow">
<div class="w-full lg:w-2/3 h-64 dark:bg-gray-800"></div>
<div class="w-full lg:w-1/3 h-24 dark:border-gray-700 lg:h-64 border-t lg:border-t-0 lg:border-r lg:border-l lg:rounded-r dark:bg-gray-700 bg-gray-100"></div>
</div>
</div>
落ちる
Web サイトを閲覧中に、希望するオプションを選択するためのドロップダウンに出くわしたことがあります.通常、E コマース Web サイトで有名ですが、ドロップダウンは現在、さまざまな異なるドメインでそのアプリケーションを持っています.
<div class="flex justify-center">
<div>
<div class="dropdown relative">
<a
class="
dropdown-toggle
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
href="#"
type="button"
id="dropdownMenuButton2"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown link
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</a>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton2"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
</div>
</div>
ラジオボタン
ラジオ ボタンは、ユーザーが複数のオプションから 1 つのオプションを選択するために使用されます.チェックボックスと混同されることがよくあります.唯一の違いは、チェックボックスは 1 つ以上のオプションを選択するために使用され、ラジオ ボタンは 1 つのオプションのみを選択するために使用されることです.
<div>
<div onclick="onClickOne(1)" id="borderOne" class="hover:shadow-md duration-100 cursor-pointer w-full bg-white flex flex-col justify-start items-start md:p-6 p-4 border border-gray-300 rounded mb-6">
<div class="flex flex-row justify-start items-start">
<div class="bg-white dark:bg-gray-100 rounded-full w-4 h-4 flex flex-shrink-0 justify-center items-center relative mt-0.5">
<input id="checkboxOne" aria-label="label1" type="radio" name="radio" class="checkbox appearance-none focus:outline-none border rounded-full border-gray-200 absolute cursor-pointer w-full h-full checked:border-none" />
<div id="check-icon1" class="check-icon hidden border border-blue-700 rounded-full w-full h-full z-1 flex items-center justify-center">
<div class="w-2 h-2 bg-white rounded-full bg-blue-700"></div>
</div>
</div>
<div class="w-full flex flex-col justify-start items-start ml-4">
<p id="headingOne" class="text-gray-800 text-base text-left leading-4 mb-3 font-semibold">Small</p>
<p class="text-gray-600 text-sm font-regular text-left leading-3.5">If that’s the size you wear please select this one or choose any other.</p>
</div>
</div>
</div>
<div onclick="onClickOne(2)" id="borderTwo" class="hover:shadow-md duration-100 cursor-pointer w-full bg-white flex flex-col justify-start items-start md:p-6 p-4 border border-gray-300 rounded mb-6">
<div class="flex flex-row justify-start items-start">
<div class="bg-white dark:bg-gray-100 rounded-full w-4 h-4 flex flex-shrink-0 justify-center items-center relative mt-0.5">
<input id="checkboxTwo" aria-label="label1" type="radio" name="radio" class="checkbox appearance-none focus:outline-none border rounded-full border-gray-200 absolute cursor-pointer w-full h-full checked:border-none" />
<div id="check-icon2" class="check-icon hidden border border-blue-700 rounded-full w-full h-full z-1 flex items-center justify-center">
<div class="w-2 h-2 bg-white rounded-full bg-blue-700"></div>
</div>
</div>
<div class="w-full flex flex-col justify-start items-start ml-4">
<p id="headingTwo" class="text-gray-800 text-base text-left leading-4 mb-3 font-semibold">Medium</p>
<p class="text-gray-600 text-sm font-regular text-left leading-3.5">If that’s the size you wear please select this one or choose any other.</p>
</div>
</div>
</div>
<div onclick="onClickOne(3)" id="borderThree" class="hover:shadow-md duration-100 cursor-pointer w-full bg-white flex flex-col justify-start items-start md:p-6 p-4 border border-gray-300 rounded mb-6">
<div class="flex flex-row justify-start items-start">
<div class="bg-white dark:bg-gray-100 rounded-full w-4 h-4 flex flex-shrink-0 justify-center items-center relative mt-0.5">
<input id="checkboxThree" aria-label="label1" type="radio" name="radio" class="checkbox appearance-none focus:outline-none border rounded-full border-gray-200 absolute cursor-pointer w-full h-full checked:border-none" />
<div id="check-icon3" class="check-icon hidden border border-blue-700 rounded-full w-full h-full z-1 flex items-center justify-center">
<div class="w-2 h-2 bg-white rounded-full bg-blue-700"></div>
</div>
</div>
<div class="w-full flex flex-col justify-start items-start ml-4">
<p id="headingThree" class="text-gray-800 text-base text-left leading-4 mb-3 font-semibold">Large</p>
<p class="text-gray-600 text-sm font-regular text-left leading-3.5">If that’s the size you wear please select this one or choose any other.</p>
</div>
</div>
</div>
<div onclick="onClickOne(4)" id="borderFour" class="hover:shadow-md duration-100 cursor-pointer w-full bg-white flex flex-col justify-start items-start md:p-6 p-4 border border-gray-300 rounded mb-6">
<div class="flex flex-row justify-start items-start">
<div class="bg-white dark:bg-gray-100 rounded-full w-4 h-4 flex flex-shrink-0 justify-center items-center relative mt-0.5">
<input id="checkboxFour" aria-label="label1" type="radio" name="radio" class="checkbox appearance-none focus:outline-none border rounded-full border-gray-200 absolute cursor-pointer w-full h-full checked:border-none" />
<div id="check-icon4" class="check-icon hidden border border-blue-700 rounded-full w-full h-full z-1 flex items-center justify-center">
<div class="w-2 h-2 bg-white rounded-full bg-blue-700"></div>
</div>
</div>
<div class="w-full flex flex-col justify-start items-start ml-4">
<p id="headingFour" class="text-gray-800 text-base text-left leading-4 mb-3 font-semibold">Extra Large</p>
<p class="text-gray-600 text-sm font-regular text-left leading-3.5">If that’s the size you wear please select this one or choose any other.</p>
</div>
</div>
</div>
</div>
<script>
const onClickOne = (flag) => {
switch (flag) {
case 1:
// Active
document.getElementById("headingOne").classList.remove("text-gray-800");
document.getElementById("borderOne").classList.remove("border-gray-300");
document.getElementById("headingOne").classList.add("text-blue-700");
document.getElementById("borderOne").classList.add("border-blue-700");
document.getElementById("check-icon1").classList.remove("hidden");
document.getElementById("checkboxOne").classList.remove("border-gray-200");
document.getElementById("checkboxOne").classList.add("border-blue-700");
// Active
document.getElementById("headingTwo").classList.add("text-gray-800");
document.getElementById("headingTwo").classList.remove("text-blue-700");
document.getElementById("borderTwo").classList.remove("border-blue-700");
document.getElementById("borderTwo").classList.add("border-gray-300");
document.getElementById("check-icon2").classList.add("hidden");
document.getElementById("checkboxTwo").classList.add("border-gray-200");
document.getElementById("checkboxTwo").classList.remove("border-blue-700");
document.getElementById("headingThree").classList.add("text-gray-800");
document.getElementById("headingThree").classList.remove("text-blue-700");
document.getElementById("borderThree").classList.remove("border-blue-700");
document.getElementById("borderThree").classList.add("border-gray-300");
document.getElementById("check-icon3").classList.add("hidden");
document.getElementById("checkboxThree").classList.add("border-gray-200");
document.getElementById("checkboxThree").classList.remove("border-blue-700");
document.getElementById("headingFour").classList.add("text-gray-800");
document.getElementById("headingFour").classList.remove("text-blue-700");
document.getElementById("borderFour").classList.remove("border-blue-700");
document.getElementById("borderFour").classList.add("border-gray-300");
document.getElementById("check-icon4").classList.add("hidden");
document.getElementById("checkboxFour").classList.add("border-gray-200");
document.getElementById("checkboxFour").classList.remove("border-blue-700");
break;
case 2:
// Active
document.getElementById("headingTwo").classList.remove("text-gray-800");
document.getElementById("headingTwo").classList.add("text-blue-700");
document.getElementById("borderTwo").classList.add("border-blue-700");
document.getElementById("borderTwo").classList.remove("border-gray-300");
document.getElementById("check-icon2").classList.remove("hidden");
document.getElementById("checkboxTwo").classList.remove("border-gray-200");
document.getElementById("checkboxTwo").classList.add("border-blue-700");
// Active
document.getElementById("headingOne").classList.add("text-gray-800");
document.getElementById("headingOne").classList.remove("text-blue-700");
document.getElementById("borderOne").classList.remove("border-blue-700");
document.getElementById("borderOne").classList.add("border-gray-300");
document.getElementById("check-icon1").classList.add("hidden");
document.getElementById("checkboxOne").classList.add("border-gray-200");
document.getElementById("checkboxOne").classList.remove("border-blue-700");
document.getElementById("headingThree").classList.add("text-gray-800");
document.getElementById("headingThree").classList.remove("text-blue-700");
document.getElementById("borderThree").classList.remove("border-blue-700");
document.getElementById("borderThree").classList.add("border-gray-300");
document.getElementById("check-icon3").classList.add("hidden");
document.getElementById("checkboxThree").classList.add("border-gray-200");
document.getElementById("checkboxThree").classList.remove("border-blue-700");
document.getElementById("headingFour").classList.add("text-gray-800");
document.getElementById("headingFour").classList.remove("text-blue-700");
document.getElementById("borderFour").classList.remove("border-blue-700");
document.getElementById("borderFour").classList.add("border-gray-300");
document.getElementById("check-icon4").classList.add("hidden");
document.getElementById("checkboxFour").classList.add("border-gray-200");
document.getElementById("checkboxFour").classList.remove("border-blue-700");
break;
case 3:
// Active
document.getElementById("headingThree").classList.remove("text-gray-800");
document.getElementById("headingThree").classList.add("text-blue-700");
document.getElementById("borderThree").classList.add("border-blue-700");
document.getElementById("borderThree").classList.remove("border-gray-300");
document.getElementById("check-icon3").classList.remove("hidden");
document.getElementById("checkboxThree").classList.remove("border-gray-200");
document.getElementById("checkboxThree").classList.add("border-blue-700");
// Active
document.getElementById("headingTwo").classList.add("text-gray-800");
document.getElementById("headingTwo").classList.remove("text-blue-700");
document.getElementById("borderTwo").classList.remove("border-blue-700");
document.getElementById("borderTwo").classList.add("border-gray-300");
document.getElementById("check-icon2").classList.add("hidden");
document.getElementById("checkboxTwo").classList.add("border-gray-200");
document.getElementById("checkboxTwo").classList.remove("border-blue-700");
document.getElementById("headingOne").classList.add("text-gray-800");
document.getElementById("headingOne").classList.remove("text-blue-700");
document.getElementById("borderOne").classList.remove("border-blue-700");
document.getElementById("borderOne").classList.add("border-gray-300");
document.getElementById("check-icon1").classList.add("hidden");
document.getElementById("checkboxOne").classList.add("border-gray-200");
document.getElementById("checkboxOne").classList.remove("border-blue-700");
document.getElementById("headingFour").classList.add("text-gray-800");
document.getElementById("headingFour").classList.remove("text-blue-700");
document.getElementById("borderFour").classList.remove("border-blue-700");
document.getElementById("borderFour").classList.add("border-gray-300");
document.getElementById("check-icon4").classList.add("hidden");
document.getElementById("checkboxFour").classList.add("border-gray-200");
document.getElementById("checkboxFour").classList.remove("border-blue-700");
break;
case 4:
// Active
document.getElementById("headingFour").classList.remove("text-gray-800");
document.getElementById("headingFour").classList.add("text-blue-700");
document.getElementById("borderFour").classList.add("border-blue-700");
document.getElementById("borderFour").classList.remove("border-gray-300");
document.getElementById("check-icon4").classList.remove("hidden");
document.getElementById("checkboxFour").classList.remove("border-gray-200");
document.getElementById("checkboxFour").classList.add("border-blue-700");
// Active
document.getElementById("headingThree").classList.add("text-gray-800");
document.getElementById("headingThree").classList.remove("text-blue-700");
document.getElementById("borderThree").classList.remove("border-blue-700");
document.getElementById("borderThree").classList.add("border-gray-300");
document.getElementById("check-icon3").classList.add("hidden");
document.getElementById("checkboxThree").classList.add("border-gray-200");
document.getElementById("checkboxThree").classList.remove("border-blue-700");
document.getElementById("headingTwo").classList.add("text-gray-800");
document.getElementById("headingTwo").classList.remove("text-blue-700");
document.getElementById("borderTwo").classList.remove("border-blue-700");
document.getElementById("borderTwo").classList.add("border-gray-300");
document.getElementById("check-icon2").classList.add("hidden");
document.getElementById("checkboxTwo").classList.add("border-gray-200");
document.getElementById("checkboxTwo").classList.remove("border-blue-700");
document.getElementById("headingOne").classList.add("text-gray-800");
document.getElementById("headingOne").classList.remove("text-blue-700");
document.getElementById("borderOne").classList.remove("border-blue-700");
document.getElementById("borderOne").classList.add("border-gray-300");
document.getElementById("check-icon1").classList.add("hidden");
document.getElementById("checkboxOne").classList.add("border-gray-200");
document.getElementById("checkboxOne").classList.remove("border-blue-700");
break;
default:
break;
}
};
</script>
事前に作成された UI スニペットを備えた一部のプラットフォーム
私たちのような開発者が使用できるように、事前に作成された UI スニペットを備えた複数のプラットフォームがあります.開発者は、これらのプラットフォームからコード スニペットを取得し、必要に応じてカスタマイズできます.これらは、UI スニペットに最適なプラットフォームの一部です
CodeMyUI
JUSTINMIND
blox
Bootsnip
TUK
私の考え
何度も使用するコンポーネントに UI スニペットを使用するのは簡単です.コーディングは面倒な作業なので、外部ソースから便利なものを両手でつかむ必要があります.個人的には、これらの情報源に頼りすぎるのは賢明ではないと思いますが、完全に無視するのも意味がありません.
Reference
この問題について(最も一般的なユースケースに役立つ UI スニペット), 我々は、より多くの情報をここで見つけました https://dev.to/pythonbutsnake/useful-ui-snippets-for-the-most-common-use-cases-dpテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol