Memperkenalkan: Perpustakaan Komponen UI Semantik

Sebilangan besar kita mungkin sedar, bootstrap dan asas adalah pemimpin semasa di kalangan rangka kerja pembangunan front-end. Tetapi sejarah telah menunjukkan kepada kita bahawa akhirnya sesuatu yang lebih baik akan datang dan dalam kes ini yang mungkin tidak begitu jauh.

Artikel ini akan memperkenalkan anda kepada calon baru mengenai landskap rangka kerja yang dipanggil Semantik UI.

Semantik UI adalah rangka kerja pembangunan depan moden, yang dikuasakan oleh kurang dan jQuery. Ia mempunyai rupa reka bentuk yang anggun, halus, dan rata yang memberikan pengalaman pengguna yang ringan.

Menurut laman web UI semantik, matlamat rangka kerja adalah untuk memberi kuasa kepada pereka dan pemaju "dengan membuat bahasa untuk berkongsi UI". Mereka melakukan ini dengan memanfaatkan bahasa semantik, deskriptif untuk kelasnya dan menamakan konvensyen. Daripada menggunakan singkatan, seperti rangka kerja lain, ia menggunakan kata -kata sebenar dengan cara yang lebih dekat dengan bahasa Inggeris biasa.

Takeaways Key

Semantik UI adalah rangka kerja pembangunan depan moden yang menekankan HTML yang mesra manusia, menggunakan bahasa semulajadi untuk nama kelas yang meningkatkan kebolehbacaan dan kemudahan penggunaan berbanding dengan rangka kerja lain seperti bootstrap dan asas.
Rangka kerja disusun sekitar lima kategori deskriptif: unsur UI, koleksi UI, pandangan UI, modul UI, dan tingkah laku UI, yang membantu membina antara muka web yang pelbagai dan interaktif.
Semantik UI menawarkan ciri dan komponen yang unik yang tidak terdapat dalam rangka kerja lain, seperti output debug masa nyata dan komponen UI eksklusif seperti Feed and Comment, meningkatkan diagnostik pembangunan dan pilihan antara muka pengguna.
Ia menyokong penyesuaian yang luas dengan gaya lalai yang minimum dan neutral, menjadikannya boleh disesuaikan untuk pelbagai pilihan reka bentuk dan memastikan komponen mudah alih dan mandiri untuk kegunaan fleksibel di seluruh projek.
• UI semantik didokumentasikan dengan baik dan termasuk panduan gaya, menjadikannya mudah untuk pemula dan cekap untuk pemaju berpengalaman untuk belajar dan melaksanakan dengan berkesan.
Ciri -ciri

Semantik UI adalah unik dalam dua cara. Pertama adalah cara rangka kerja berstruktur. Ia menggunakan lima kategori deskriptif untuk menentukan komponen UI yang boleh digunakan semula.

• elemen UI adalah blok bangunan asas. Ia boleh muncul sendiri atau dalam kumpulan seragam. Sebagai contoh, butang boleh bebas atau dimasukkan ke dalam kumpulan butang.
• Koleksi UI adalah sekumpulan pelbagai unsur yang saling bergantung. Sebagai contoh, borang web boleh mempunyai butang, input, kotak semak, ikon, dan sebagainya.
• Pandangan UI mewakili sekeping kandungan laman web yang biasa. Sebagai contoh, bahagian suapan atau komen.
• Modul UI adalah komponen dengan fungsi berasaskan JavaScript interaktif. Contohnya termasuk akordion, dimmer, modal, dan sebagainya.
• Tingkah laku UI adalah komponen yang tidak boleh wujud secara bebas, tetapi sebaliknya digunakan untuk menyuntik fungsi ke dalam komponen lain. Sebagai contoh, tingkah laku pengesahan bentuk memberikan fungsi pengesahan untuk komponen borang.

Hampir setiap komponen mempunyai jenis, negeri dan variasi. Sebagai contoh, beberapa jenis komponen butang termasuk: butang standard, butang dengan ikon, butang animasi dan butang boleh berada dalam keadaan aktif, kurang upaya, atau memuatkan. Akhirnya, butang boleh bervariasi dalam saiz dan warna, dan boleh diformat sebagai asas, sosial, cecair, togol, dan banyak lagi. Skim ini memberi anda banyak fleksibiliti dalam penampilan komponen.

Seperti yang anda lihat, UI semantik bukan sahaja bermakna dan berstruktur dengan baik dari segi menamakan kelasnya tetapi juga dalam menamakan, mendefinisikan, dan menggambarkan komponennya. Struktur ini lebih semantik berbanding dengan yang terdapat dalam bootstrap atau asas.

Perkara unik kedua mengenai UI semantik adalah bahawa ia menyediakan beberapa ciri dan komponen eksklusif yang tidak hadir dalam rangka kerja lain. Sebagai contoh, suapan dan komen dalam komponen pandangan UI atau bar sisi dan bentuk dari modul UI. Juga, apabila berinteraksi dengan komponen UI semantik anda mendapat output debug masa nyata. Hanya buka konsol web anda dan anda akan melihat komponen anda berkomunikasi dengan tepat apa yang mereka lakukan.

Satu lagi kekuatan UI semantik adalah bahawa ia menggunakan gaya minimum dan neutral, meninggalkan penyesuaian terbuka kepada anda. Ia termasuk perkara -perkara penting dan berguna semasa meninggalkan ciri -ciri tambahan yang mungkin tidak akan anda gunakan. Selain itu, komponen kerangka adalah mudah alih dan mandiri supaya anda boleh merebut dan menggunakan hanya yang anda perlukan.

Rangka kerja menggunakan unit EM dan REM untuk unsur -unsurnya, menjadikannya responsif dan menyesuaikan diri dengan saiz apa pun. Anda hanya perlu menukar font asas dan semua elemen lain akan menyesuaikan dengan sewajarnya.

Akhirnya, UI semantik didokumentasikan dengan baik dan laman web menyediakan banyak contoh untuk komponen yang berbeza. Di samping itu, ia mempunyai panduan gaya dengan teknik dan arahan mengenai cara menulis kod anda. Semua ini menjadikan pembelajaran rangka pengalaman tanpa rasa sakit.

untuk mencari bagaimana UI semantik disatukan dengan projek dan alat lain menyemak halaman integrasi.

untuk melihat bagaimana laman web yang dibina dengan UI semantik kelihatan anda boleh melawat Quirky.

OK. Setakat ini, begitu baik. Tetapi saya fikir gambaran keseluruhan UI semantik ini tidak akan lengkap tanpa mendapat tangan kita sedikit kotor. Oleh itu, mari kita rasa manis UI semantik sekarang. Saya akan menunjukkan kepada anda bagaimana untuk membuat borang tanda/pendaftaran yang hebat menggunakan pelbagai komponen UI semantik.

bagaimana membuat borang log masuk/mendaftar dengan UI semantik

Kami akan membuat borang yang menukar pandangan bergantung kepada sama ada pengguna mahu "masuk" atau "mendaftar". Inilah cara pandangan akan kelihatan:

Muat turun UI semantik pertama, buka fail zip dan ekstrak folder yang dipanggil "dibungkus". Namakan semula contoh bentuk UI semantik (atau sesuatu yang boleh anda gunakan untuk mengenalinya dengan mudah).

Untuk melihat demo kerja contoh borang kami, muat turun fail form.html lengkap dan masukkannya ke dalam folder Contoh Borang UI semantik. Buka fail form.html dalam penyemak imbas anda dan mainkan dengan borang untuk mendapatkannya. Sekarang saya akan menunjukkan kepada anda bagaimana untuk mencipta borang dengan memaparkan dan menerangkan kod yang terlibat.

untuk memulakan, menamakan semula fail ke lengkap_form.html dan buat fail kosong yang dipanggil form.html. Buka dan tambahkan HTML berikut:

Ini adalah templat permulaan kami. Ia menghubungkan ke fail semantik.css dan semantik.js, dan menambah rujukan kepada perpustakaan jQuery. Ia juga mempunyai skrip dan tag gaya untuk JavaScript dan CSS yang akan kami tambah. Saya termasuk JavaScript dan CSS secara dalaman hanya untuk tujuan pembelajaran, kerana lebih mudah dan anda tidak perlu melompat antara pelbagai fail. Tetapi dalam projek-projek dunia sebenar, lebih baik menggunakan fail luaran.

<span><span><!DOCTYPE HTML></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span> /></span>
</span>  <span><span><span><title</span>></span>Semantic UI Sign In/Sign Up Form<span><span></title</span>></span>
</span>
  <span><span><span><link</span> href<span>="css/semantic.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>
</span>
  <span><span><span><style</span> type<span>="text/css"</span>></span><span>
</span></span><span><span>
</span></span><span><span>  </span><span><span></style</span>></span>
</span>
<span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>

  <span><!-- content will go here -->
</span>

  <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-1.10.2.min.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span><script</span> src<span>="javascript/semantic.js"</span> type<span>="text/javascript"</span>></span><span><span></script</span>></span>
</span>
  <span><span><span><script</span> type<span>="text/javascript"</span>></span><span>
</span></span><span><span>
</span></span><span><span>  </span><span><span></script</span>></span>      
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

Sebelum kita memulakan, mari kita pertimbangkan bagaimana UI semantik berfungsi. Semua definisi komponen bermula dengan kelas UI diikuti dengan nama komponen. Sebagai contoh, untuk menambah elemen butang, anda hanya memberikannya kelas UI butang. Untuk menambah keadaan dan/atau variasi hanya masukkan kelas yang diperlukan. Sebagai contoh, untuk membuat butang yang mengubah warna menjadi biru pada hover, tambahkan kelas hove state dan kelas variasi biru: UI Hover Blue Button.

mari kita kembali ke bentuk kami. Saya tidak akan menerangkan apa yang dilakukan oleh setiap kelas, kerana kelas lebih kurang deskriptif diri dan anda dapat melihat lebih banyak makna mereka dalam dokumentasi.

Perkara pertama yang perlu kita lakukan ialah menambah elemen segmen yang akan mengandungi borang kami. Kami melakukan ini dengan menambahkan tag Div dengan kelas UI yang dibangkitkan segmen. Untuk tajuk borang, kami menggunakan tag H3 dengan kelas Header Blok Biru yang terbalik UI. Seterusnya kami membuat grid dua lajur dengan pembahagi menegak antara lajur. Dalam lajur pertama, kami menambah div dengan kelas segmen UI Blue Stacked, yang akan memegang elemen bentuk kami. Di bahagian bawah kita meletakkan elemen pembahagi lain, dan div dengan kelas footer.

<span><span><!DOCTYPE HTML></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span> /></span>
</span>  <span><span><span><title</span>></span>Semantic UI Sign In/Sign Up Form<span><span></title</span>></span>
</span>
  <span><span><span><link</span> href<span>="css/semantic.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>
</span>
  <span><span><span><style</span> type<span>="text/css"</span>></span><span>
</span></span><span><span>
</span></span><span><span>  </span><span><span></style</span>></span>
</span>
<span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>

  <span><!-- content will go here -->
</span>

  <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-1.10.2.min.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span><script</span> src<span>="javascript/semantic.js"</span> type<span>="text/javascript"</span>></span><span><span></script</span>></span>
</span>
  <span><span><span><script</span> type<span>="text/javascript"</span>></span><span>
</span></span><span><span>
</span></span><span><span>  </span><span><span></script</span>></span>      
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

Sekarang kita perlu menambah gaya. Letakkan kod di bawah di dalam tag gaya kosong anda sekarang.

<span><span><span><div</span> class<span>="ui raised segment signin"</span>></span>
</span>  <span><span><span><h3</span> class<span>="ui inverted blue block header"</span>></span> SIGN IN <span><span></h3</span>></span>
</span>  <span><span><span><div</span> class<span>="ui two column grid basic segment"</span>></span>
</span>    <span><span><span><div</span> class<span>="column"</span>></span>
</span>      <span><span><span><div</span> class<span>="ui blue stacked segment"</span>></span>
</span>           <span><!-- form here -->
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="ui vertical divider"</span>></span> OR <span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="center aligned column"</span>></span>
</span>      <span><!-- Facebook button here -->
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="ui divider"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="footer"</span>></span>
</span>    <span><!-- text plus button here -->
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Seterusnya, dalam lajur pertama (di mana komen HTML mengatakan "borang di sini") kami menambah kod untuk borang tersebut. Untuk membuat borang, kami menambah tag div dengan kelas borang UI. Kemudian kami meletakkan dua lagi tag div masing -masing dengan kelas medan, satu lagi dengan kelas medan inline, dan akhirnya satu dengan kelas butang hantar merah UI. Dua bidang pertama adalah untuk nama pengguna dan kata laluan . Di Div Ketiga, yang diformat untuk menjadi sebaris, kami meletakkan kotak semak.

<span>body<span>, .ui.vertical.divider</span> {
</span>  <span>color: #696969;
</span><span>}
</span>
<span><span>.ui.vertical.divider</span> {
</span>  <span>margin: 0 4px;
</span><span>}
</span>
<span><span>.ui.raised.segment</span> {
</span>  <span>background-color: #fffacd;
</span>  <span>width: 600px;
</span>  <span>margin-top: 0;
</span>  <span>position: fixed;
</span>  <span>left: 10px;
</span>  <span>top: 10px;
</span><span>}</span>

Di lajur kedua dengan lajur sejajar Pusat Kelas (di mana komen HTML mengatakan "Butang Facebook di sini") Kami menggunakan tajuk H4 dan menambah butang sosial Facebook UI semantik:

<span><span><span><div</span> class<span>="ui form"</span>></span>
</span>  <span><span><span><div</span> class<span>="field"</span>></span>
</span>    <span><span><span><label</span>></span> Username <span><span></label</span>></span>
</span>    <span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span>
</span>      <span><span><span><input</span> type<span>="text"</span>></span>
</span>      <span><span><span><i</span> class<span>="user icon"</span>></span><span><span></i</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="field"</span>></span>
</span>    <span><span><span><label</span>></span> Password <span><span></label</span>></span>
</span>    <span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span>
</span>      <span><span><span><input</span> type<span>="password"</span>></span>
</span>      <span><span><span><i</span> class<span>="lock icon"</span>></span><span><span></i</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="inline field"</span>></span>
</span>    <span><span><span><div</span> class<span>="ui checkbox"</span>></span>
</span>      <span><span><span><input</span> id<span>="remember"</span> type<span>="checkbox"</span>></span>
</span>      <span><span><span><label</span> for<span>="remember"</span>></span> Remember me <span><span></label</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="ui red submit button"</span>></span> Sign In <span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Kami melengkapkan footer dengan menambah beberapa teks dan butang animasi yang akan menukar borang kami dari log masuk untuk mendaftar. HTML berikut akan ditambah di mana komen HTML mengatakan "Teks Plus Button di sini":

<span><span><span><h4</span> class<span>="ui header"</span>></span> Sign in with: <span><span></h4</span>></span>
</span><span><span><span><div</span> class<span>="ui facebook button"</span>></span>
</span>  <span><span><span><i</span> class<span>="facebook icon"</span>></span><span><span></i</span>></span>
</span>  Facebook
<span><span><span></div</span>></span></span>

Kami juga perlu menambah beberapa gaya untuk menjadikan footer kami dengan betul. Tambahkan CSS berikut di bawah CSS yang ada di dalam tag gaya kami:

<span><span><span><div</span> class<span>="text"</span>></span> Not a member? <span><span></div</span>></span>
</span><span><span><span><div</span> class<span>="ui vertical animated blue mini button signup"</span>></span>
</span>  <span><span><span><div</span> class<span>="visible content"</span>></span> Join Us <span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="hidden content"</span>></span>
</span>    <span><span><span><i</span> class<span>="users icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Sekarang bahagian pertama ("Daftar") sudah siap. Mari buat yang kedua. Kami bermula dengan kod berikut yang sama dengan yang telah kami tutupi. HTML ini akan ditambah di bawah semua HTML kami yang sedia ada:

<span><span>.footer</span> {
</span>  <span>text-align: right;
</span><span>}
</span>
<span><span>.text</span> {
</span>  <span>display: inline;
</span><span>}</span>

Seterusnya kami menambah kod untuk borang di dalam elemen segmen, dalam HTML yang kami tambah (di mana komen HTML mengatakan "borang di sini"). Div dengan mesej ralat UI kelas diletakkan pada akhir borang kerana tingkah laku pengesahan bentuk yang akan kami tambahkan kemudian memerlukannya untuk menunjukkan kesilapan kepada pengguna.

<span><span><span><div</span> class<span>="ui raised segment signup inactive"</span>></span>
</span>  <span><span><span><h3</span> class<span>="ui inverted blue block header"</span>></span> SIGN UP <span><span></h3</span>></span>
</span>  <span><span><span><div</span> class<span>="ui blue stacked segment"</span>></span>
</span>       <span><!-- form here -->
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="ui divider"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="footer"</span>></span>
</span>    <span><span><span><div</span> class<span>="text"</span>></span> Already a member? <span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="ui vertical animated blue mini button signin"</span>></span>
</span>      <span><span><span><div</span> class<span>="visible content"</span>></span> Log In <span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="hidden content"</span>></span>
</span>        <span><span><span><i</span> class<span>="sign in icon"</span>></span><span><span></i</span>></span>
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Perhatikan setiap elemen medan dalam HTML di atas mempunyai komen yang menunjukkan bahagian mana yang akan kita tambahkan dalam setiap satu. Mari kita buat sekarang.

inilah kod untuk nama pengguna medan:

<span><span><span><div</span> class<span>="ui form"</span>></span>
</span>  <span><span><span><div</span> class<span>="two fields"</span>></span>
</span>    <span><span><span><div</span> class<span>="field"</span>></span>
</span>      <span><!-- Username here -->              
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="field"</span>></span>
</span>      <span><!-- Email here -->
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="two fields"</span>></span>
</span>    <span><span><span><div</span> class<span>="field"</span>></span>
</span>      <span><!-- Password here -->        
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="field"</span>></span>
</span>      <span><!-- Confirm Password here -->
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="inline field"</span>></span>
</span>    <span><!-- checkbox here -->
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="ui red submit button"</span>></span> Sign Up <span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="ui error message"</span>></span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

inilah kod untuk e -mel medan:

<span><span><span><label</span>></span> Username <span><span></label</span>></span>
</span><span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span>
</span>  <span><span><span><input</span> id<span>="username"</span> placeholder<span>="e.g., Tarzan"</span> type<span>="text"</span>></span>
</span>  <span><span><span><i</span> class<span>="user icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span><div</span> class<span>="ui corner label"</span>></span>
</span>    <span><span><span><i</span> class<span>="asterisk icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

inilah kod untuk kata laluan medan:

<span><span><span><label</span>></span> Email <span><span></label</span>></span>
</span><span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span>
</span>  <span><span><span><input</span> id<span>="email"</span> placeholder<span>="e.g., tarzan@jungle.org"</span> type<span>="text"</span>></span>
</span>  <span><span><span><i</span> class<span>="mail icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span><div</span> class<span>="ui corner label"</span>></span>
</span>    <span><span><span><i</span> class<span>="asterisk icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

di sini adalah kod untuk Sahkan Kata Laluan medan:

<span><span><span><label</span>></span> Password <span><span></label</span>></span>
</span><span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span>
</span>  <span><span><span><input</span> id<span>="password"</span> placeholder<span>="e.g., !@#$%^&amp;*()_+:)"</span> type<span>="password"</span>></span>
</span>  <span><span><span><i</span> class<span>="lock icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span><div</span> class<span>="ui corner label"</span>></span>
</span>    <span><span><span><i</span> class<span>="asterisk icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

dan kod untuk kotak semak:

<span><span><span><label</span>></span> Confirm Password <span><span></label</span>></span>
</span><span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span>
</span>  <span><span><span><input</span> id<span>="confirm-password"</span> placeholder<span>="e.g., !@#$%^&amp;*()_+:)"</span> type<span>="password"</span>></span>
</span>  <span><span><span><i</span> class<span>="lock icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span><div</span> class<span>="ui corner label"</span>></span>
</span>    <span><span><span><i</span> class<span>="asterisk icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

kami juga menambah gaya untuk pautan:

<span><span><span><div</span> class<span>="ui checkbox"</span>></span>
</span>  <span><span><span><input</span> id<span>="terms"</span> type<span>="checkbox"</span>></span>
</span>  <span><span><span><label</span> for<span>="terms"</span>></span> I agree to the <span><span><a</span> href<span>="#"</span>></span> Terms and Conditions <span><span></a</span>></span><span><span></label</span>></span>
</span><span><span><span></div</span>></span></span>

Sekarang bahawa kedua -dua bahagian borang kami sudah siap, kita perlu menambah kod untuk beralih dari satu sisi borang ke yang lain. Masukkan kod berikut ke dalam tag skrip kosong.

<span>a {
</span>  <span>text-decoration: none;
</span>  <span>color: #1E90FF;
</span><span>}</span>

Borang kami kelihatan bagus - tetapi bagaimana jika nilai pengguna tidak sah? Kita perlu menambah pengesahan. Kami melakukan ini dengan menambahkan kod berikut di dalam tag skrip kami, selepas kod yang kami tambahkan di atas:

<span>$( document ).ready(function() {
</span>
  <span>// Hide Sign Up side on initialization
</span>  <span>$( '.inactive' ).hide();
</span>

  <span>$( '.mini.button.signup' ).click(function() {
</span>
    <span>// Hide Sign In and show Sign Up side with slide down effect
</span>    <span>$( '.ui.segment.signin' )
</span>      <span>.hide()
</span>      <span>.end()
</span>    <span>.find( '.ui.segment.signup' )
</span>      <span>.slideDown();
</span>
  <span>});
</span>

  <span>$( '.mini.button.signin' ).click(function() {
</span>
    <span>// Hide Sign Up and show Sign In side with slide down effect
</span>    <span>$( '.ui.segment.signup' )
</span>      <span>.hide()
</span>      <span>.end()
</span>    <span>.find( '.ui.segment.signin' )
</span>      <span>.slideDown();
</span>
  <span>});
</span><span>});</span>

anda boleh membaca lebih lanjut mengenai bagaimana kod di atas berfungsi dalam dokumentasi.

dilakukan dengan baik! Ini adalah contoh yang agak mudah dan dengan itu kami hanya menggaru permukaan keupayaan UI semantik.

Kesimpulan

Seperti yang anda lihat, UI semantik adalah baru, segar dan, dalam beberapa aspek, tambahan unik kepada landskap kerangka pembangunan front-end. Dari apa yang telah kami anggap di sini, walaupun ia, seperti penulisan ini, hanya beberapa bulan, anda dapat melihat bahawa ia cukup menjanjikan dan layak untuk berada di banyak senarai jam tangan pemaju untuk tahun ini.

Sekali lagi, anda boleh memuat turun fail tutorial lengkap di sini dan ingat untuk menambahkannya di dalam folder "dibungkus" apabila anda unzip perpustakaan UI semantik penuh.

Soalan Lazim (Soalan Lazim) Mengenai Perpustakaan Komponen UI Semantik

Apa yang menjadikan UI semantik berbeza dari perpustakaan UI yang lain? Ia membolehkan pembangunan yang lebih cepat dan lebih intuitif. Kelas -kelas dalam semantik UI menggunakan sintaks dari bahasa semulajadi seperti hubungan kata nama/pengubahsuaian, perintah perkataan, dan pluralitas untuk menghubungkan konsep secara intuitif. Ini menjadikan kod lebih mudah dibaca dan lebih mudah difahami, walaupun untuk pemula.

Bagaimana saya boleh memulakan dengan UI semantik?

Untuk memulakan dengan UI semantik, anda perlu terlebih dahulu memasangnya. Anda boleh melakukan ini dengan menggunakan arahan NPM: NPM Pasang Semantik-UI. Selepas pemasangan, anda boleh mengimport CSS UI semantik dan JavaScript ke dalam projek anda. Kemudian, anda boleh mula menggunakan komponen UI semantik di HTML anda. Terdapat perpustakaan khusus yang dipanggil Semantik UI React yang merupakan integrasi React rasmi untuk UI semantik. Ia membolehkan anda menggunakan komponen dan tema UI semantik secara langsung dalam aplikasi React anda. fail. Fail ini bertindak sebagai tetapan pusat untuk semua pembolehubah tema anda. Anda boleh menukar nilai pembolehubah untuk menyesuaikan penampilan tema anda.

Apakah beberapa komponen biasa dalam UI semantik?

Semantik UI menawarkan pelbagai komponen. Beberapa yang biasa termasuk butang, ikon, tajuk, pembahagi, label, senarai, dan kad. Setiap komponen dilengkapi dengan set variasi dan pilihannya sendiri untuk penyesuaian.

Bagaimana saya boleh menggunakan UI semantik untuk reka bentuk responsif? Sistem grid membolehkan anda menentukan lebar lajur yang berbeza untuk saiz skrin yang berbeza, memastikan reka bentuk anda kelihatan baik pada semua peranti.

Bagaimana saya boleh menyumbang kepada UI semantik? dengan mengemukakan permintaan tarik pada repositori githubnya. Sebelum mengemukakan permintaan tarik, pastikan anda membaca garis panduan penyumbang yang disediakan oleh pasukan UI semantik.

Bagaimana saya boleh menggunakan UI semantik dengan sudut?

Bagaimana saya boleh mengemas kini UI semantik?

Anda boleh mengemas kini UI semantik dengan menjalankan perintah NPM Update Semantic-UI. Ini akan mengemas kini UI semantik ke versi terkini.

Apakah beberapa alternatif untuk UI semantik? Setiap perpustakaan ini mempunyai kekuatan dan kelemahannya sendiri, jadi pilihan terbaik bergantung pada keperluan dan keutamaan khusus anda.

Atas ialah kandungan terperinci Memperkenalkan: Perpustakaan Komponen UI Semantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!