Butang

Komponen butang patuh MYDS untuk titik permulaan peralihan lancar dari HTML/CSS ke React

Gambaran Keseluruhan

Butang MYDS HTML/CSS menyediakan variasi yang fleksibel dan gaya yang konsisten untuk aplikasi yang tidak menggunakan React. Ia memastikan pengendalian keadaan yang betul (hover, fokus, dilumpuhkan), serta keharmonian reka bentuk merentasi antara muka sektor awam.

1. Persediaan

Ikuti langkah-langkah ini untuk menyediakan gaya butang dalam projek HTML anda.

Susunan Import yang Disyorkan Pastikan anda memuatkan fail stylesheet mengikut urutan ini bagi memastikan gaya dipaparkan dengan betul:

<link rel="stylesheet" href="reset.css" /> <!-- rujuk kepada ResetCSS -->
<link rel="stylesheet" href="button.css" /> <!-- rujuk kepada ButtonCSS -->
<link rel="stylesheet" href="button-dark.css" /> <!-- rujuk kepada ButtonDarkCSS -->

Ini memastikan bahawa:

CSS reset digunakan terlebih dahulu.
Gaya asas butang mengatasi reset di mana perlu.
Gaya tema gelap dimuatkan terakhir, supaya ia boleh mengatasi kedua-dua reset dan gaya asas butang apabila diperlukan.

Langkah 2 – Sertakan fon yang diperlukan

Fon Inter adalah sebahagian daripada garis panduan reka bentuk MYDS. Tambahkan ia di dalam tag <head>:

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

Bahagian <head> anda sepatutnya kelihatan seperti ini:

<head>
  <!-- Fon Inter -->
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
    rel="stylesheet"
  />
 
  <!-- Stylesheet Sistem Reka Bentuk -->
  <link rel="stylesheet" href="reset.css" />
  <link rel="stylesheet" href="button.css" />
  <link rel="stylesheet" href="button-dark.css" />
</head>

2. Penggunaan

Semua butang menggunakan kelas asas:

<button class="button-myds">...</button>

Untuk menggunakan gaya, tambahkan salah satu kelas pengubah varian berikut:

button-myds-primary
button-myds-secondary
button-myds-secondary-color
button-myds-tertiary
button-myds-tertiary-color
button-myds-danger-primary
button-myds-danger-secondary
button-myds-danger-tertiary

Asal
Arahkan Tetikus (Hover)
Fokus
Dilumpuhkan

5. Anatomi

Pemilih	Tujuan
`.button-myds`	Susun atur asas dan tetapan semula
`.button-myds-[variant]`	Menentukan penampilan visual
`:hover`	Interaksi apabila tetikus diarahkan
`:focus`	Cincin fokus untuk kebolehcapaian
`:disabled`	Penampilan dilumpuhkan dan gaya kursor

6. Penyesuaian

Anda boleh mengatasi gaya lalai dalam fail stylesheet anda Contoh:

.button-myds.button-myds-primary {
  background-color: #1e40af; /* Warna utama tersuai */
}

7. Kebolehcapaian

Dibina menggunakan elemen <button> asli
Navigasi papan kekunci disokong dengan cincin fokus yang kelihatan
Keadaan dilumpuhkan menggunakan atribut disabled asli

MYDS

Butang

Gambaran Keseluruhan

1. Persediaan

Langkah 2 – Sertakan fon yang diperlukan

2. Penggunaan

3. Variasi

Utama (Primary)

Sekunder (Secondary)

Warna Sekunder (Secondary Color)

Tertier (Tertiary)

Warna Tertier (Tertiary Color)

Danger - Primary

Danger - Secondary

Danger - Tertiary

4. Keadaan (State)

5. Anatomi

6. Penyesuaian

7. Kebolehcapaian

Di halaman ini