Tufte-css: dukungan elemen tombol

Saya tertarik dengan idenya. Saya tertarik untuk mendengar lebih banyak tentang kasus penggunaan—khususnya, bagaimana jangkar tidak cukup—serta ide dan kontribusi.

Tombol merah "Unduh Selimut" ImageQuilt (http://imagequilts.com, di dekat bagian bawah) mungkin merupakan titik awal yang layak.

Tautan mewakili koneksi dan titik lompat ke konten lain (baik di dalam halaman, melalui jangkar, atau tidak aktif, melalui properti href). Tombol adalah pemicu untuk tindakan yang memengaruhi konten saat ini . IMO yang berpegang pada konvensi semacam itu membuat semuanya tetap jelas. IOW Saya pikir tombol diperlukan.

Katakanlah saya ingin menyajikan bagan bersama dengan opsi untuk memfilter datanya dengan cara tertentu. Mengklik tombol akan mengaktifkan filter dan konten yang ada, bagan interaktif, akan diperbarui sesuai dengan data yang baru diubah (dan terikat).

Saya pikir itu masalah waktu sebelum pertanyaan ini diselesaikan. Tidak perlu dibiarkan terbuka. Saya telah menggunakan tufte-css untuk situs saya untuk sementara waktu sekarang dan saya sangat puas dengan hasilnya. Saya akan segera membahas gaya tombol untuk proyek yang sedang saya kerjakan dan akan memilih menggunakan tautan atau mengusulkan (permintaan tarik) sesuatu yang lain.

👍
Tertarik untuk mendengar jenis tombol apa yang Anda buat. Saya pikir bagian dari masalah dengan mengembangkan solusi umum adalah bahwa setiap visualisasi/tabel/bagan akan memiliki gaya kustomnya sendiri yang sulit untuk ditetapkan _a priori_.

Saya datang dengan gaya berikut untuk radio dan tombol biasa untuk aplikasi yang saya tulis, berjuang untuk kejelasan maksud dan harmonisasi dengan gaya kerangka kerja yang ada.

Mengacu pada tangkapan layar di bawah ini:

• Tombol biasa, misalnya tombol PLAY, memiliki batas gelap pekat (#111).
• Tombol radio (opsi) diuraikan dengan tanda hubung saat tidak dipilih (tombol 9x9) dan terbalik (latar belakang #111 dan teks warna #FFFFF8) saat dipilih (tombol 5x5).

@gamecubate Saya kebetulan melakukan hal yang sama dengan tombol dalam implementasi saya. Ini berfungsi untuk saya tetapi sebagai implementasi umum gaya mungkin bertentangan dengan grafik yang menunjuk peserta dengan variasi garis (putus-putus, putus-putus, padat, dll). Jika seseorang memiliki tombol yang terlibat dengan peserta tertentu, mungkin ada baiknya untuk menatanya agar sesuai.

@frostbitten Benar. Seseorang mungkin juga mulai menggunakan warna untuk peserta. Saya mengerti keraguan @daveliepmann untuk membuat kode keras gaya standar untuk tombol. Ada begitu banyak kasus penggunaan.

Maaf telah menghidupkan kembali masalah ini, tetapi saya juga ingin tahu tentang ini.

Saya memiliki proyek yang menggunakan yang ini dan tombol-tombolnya sepenuhnya tidak ditata pada awalnya dengan sebagian besar CSS standar. Gaya yang diterapkan tampaknya berasal dari "lembar gaya agen pengguna". (Ini mungkin kekhasan versi Google Chrome yang saya jalankan.)

Saya menemukan menambahkan CSS ini berfungsi dengan baik:

button {
  font-family: inherit;
  font-size:   inherit;
  padding:     0.5em;
}

Contoh:

Tombol terlihat seperti tombol, tetapi memiliki font yang lebih menyenangkan (daripada Arial) dan sekarang cocok dengan konten gaya lainnya.

Saya tidak dapat menemukan tombol "Unduh Selimut" di halaman ImageQuilts yang disebutkan . Sepertinya itu bagian dari ekstensi Google Chrome. Tapi saya suka tampilan umumnya. Saya tidak bisa mendapatkan font miring tebal untuk bekerja dengan font standar CSS dari proyek ini.

Saya juga menyukai contoh @gamecubate . @gamecubate – maukah Anda membagikan CSS?

@kenny-evitt Tentu saja. Ini dia, dengan segala kemegahannya. :)

.btn {
  border: 2.5px solid #111;
  color: #111;
  display: inline-block;
  font-size: 1.1rem;
  text-transform: uppercase;
  padding: 15px 10px;
  margin: 5px;
  min-width: 60px;
  text-align: center;
  cursor: pointer;
}

.btn.large {
  border: 3px solid #111;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 10px 5px;
  padding: 15px;
}

.btn.mini {
  border: 1px solid #111;
  color: #111;
  min-width: 40px;
  line-height: 40px;
  padding: 0 10px;
}

.btn.radio {
  border-style: dashed;
}

.btn.selected {
  background: #111;
  color: #FFFFF8;
}

.btn.white {
  background: #FFFFF8;
  color: #111;
}

.btn.flash {
  background: #EEE!important;
}

.btns {
  margin: 3px 0;
}

.btns .btn:first-child {
  margin-left: 0;
}

.btns .btn:last-child {
  margin-right: 0;
}

.btns.stack {
  margin: 15px 0 20px 0;
}

.btns.stack > .btn {
  display: block;
  margin: 5px 0;
}

a {
  font-size: 1.5rem;
  color: #111;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 2px solid #111;
}