Tufte-css: دعم عنصر الزر

أنا مفتون بالفكرة. سأكون مهتمًا بسماع المزيد حول حالات الاستخدام - على وجه التحديد ، كيف لا تكفي المراسي - بالإضافة إلى الأفكار والمساهمات.

قد يكون زر "Download Quilt" الأحمر الخاص بـ ImageQuilt (http://imagequilts.com ، بالقرب من الجزء السفلي) نقطة انطلاق مناسبة.

تمثل الروابط اتصالًا ونقطة قفزة إلى محتوى آخر (سواء في الصفحة أو عبر رابط أو إيقاف تشغيلها عبر خصائص href). الأزرار هي مشغلات للإجراءات التي تؤثر على المحتوى الحالي . إن تمسك المنظمة البحرية الدولية بمثل هذه الاتفاقيات يجعل الأمور واضحة. أعتقد أن هناك حاجة إلى زر.

لنفترض أنني أريد تقديم مخطط مع خيار تصفية بياناته بطريقة معينة. سيؤدي النقر فوق الزر إلى تبديل عامل التصفية وسيتم تحديث المحتوى الموجود ، المخطط التفاعلي ، وفقًا لبياناته التي تم تغييرها مؤخرًا (والملزمة).

أعتقد أنها مسألة وقت قبل أن تتم تسوية هذا السؤال. لا حاجة لتركه مفتوحا. لقد كنت أستخدم tufte-css لموقعي منذ فترة وأنا راضٍ جدًا عن النتائج. سأتناول قريبًا تصميم الأزرار لمشروع أعمل عليه وسأقرر إما استخدام الروابط أو اقتراح (طلب السحب) شيئًا آخر.

👍
مهتم بسماع أنواع الأزرار التي تصنعها. أعتقد أن جزءًا من مشكلة تطوير حل عام هو أن كل تصور / جدول / مخطط سيكون له تصميمه المخصص الذي يصعب تعيينه _ مسبقًا_.

لقد توصلت إلى الأنماط التالية للراديو والأزرار العادية لتطبيق أقوم بكتابته ، وأسعى جاهدًا من أجل وضوح النوايا والمواءمة مع نمط الإطار الحالي.

بالإشارة إلى لقطة الشاشة أدناه:

• الأزرار العادية ، على سبيل المثال ، زر PLAY ، لها حد داكن ثابت (# 111).
• يتم تحديد أزرار الراديو (الخيار) بشرطة عند عدم تحديدها (زر 9 × 9) وعكسها (# 111 الخلفية ونص اللون # FFFFF8) عند تحديدها (الزر 5 × 5).

gamecubate لقد فعلت نفس الشيء مع الأزرار في تطبيقي. إنه يعمل بالنسبة لي ولكن كتطبيق عام ، قد تتعارض الأنماط مع الرسوم البيانية التي تحدد المشاركين من خلال الاختلافات في الخط (متقطع ، منقط ، صلب ، إلخ). إذا كان لدى أحدهم زر يتفاعل مع مشارك معين ، فقد يكون من المفيد تصميمه ليتناسب.

تضمين التغريدة قد يبدأ المرء أيضًا في استخدام الألوان للمشاركين. أتفهم تردد daveliepmann في ترميز نمط قياسي للأزرار. هناك الكثير من حالات الاستخدام.

آسف لإحياء هذه المشكلة ، لكنني كنت أشعر بالفضول أيضًا.

لدي مشروع يستخدم هذا الزر وكانت الأزرار غير منظمة تمامًا في البداية مع CSS القياسي في الغالب. يبدو أن الأنماط المطبقة كانت من "ورقة أنماط وكيل المستخدم". (قد تكون هذه مشكلة في إصدار Google Chrome الذي أعمل عليه.)

لقد وجدت إضافة CSS هذا للعمل بشكل جيد:

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

مثال:

يبدو الزر وكأنه زر ، ولكنه يحتوي على خط أكثر إمتاعًا (من Arial) وهو الآن يناسب بشكل جيد بقية المحتوى المصمم.

لم أتمكن من العثور على زر "Download Quilt" في صفحة ImageQuilts المذكورة . يبدو أنه جزء من امتداد Google Chrome. لكني أحب المظهر بشكل عام. لم أتمكن من الحصول على خط مائل غامق للعمل مع الخط القياسي CSS من هذا المشروع.

أحب أيضًا مثال gamecubate . gamecubate - هل تمانع في مشاركة CSS؟

@ كيني إيفيت شيء أكيد. ها هو ذا بكل روعته. :)

.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;
}