Σημασιολογικά κουμπιά διεπαφής χρήστη

Τι είναι τα Σημασιολογικά κουμπιά διεπαφής χρήστη;

Ένα κουμπί υποδεικνύει μια πιθανή ενέργεια του χρήστη. Το Semantic UI παρέχει μια εύχρηστη σύνταξη που απλοποιεί όχι μόνο το στυλ ενός κουμπιού, αλλά και τη σημασιολογία της φυσικής γλώσσας.

Πώς να τα χρησιμοποιήσετε

Η Semantic UI τάξη προστίθεται απλά σε ένα στοιχείο κουμπιού. Διάφορα παραδείγματα δίνονται παρακάτω για να δείξουν πώς να το χρησιμοποιήσετε.

Τύποι

  • Τυπικό κουμπί

Τυπικό κουμπί σημασιολογικής διεπαφής χρήστη

Standard Button
  • Κουμπί έμφασης

Ένα κουμπί με διαφορετικό επίπεδο έμφασης

Άλλες κατηγορίες έμφαση είναι secondary, positiveκαιnegative

  • Κινούμενο κουμπί

Ένα κουμπί με κινούμενα σχέδια, που δείχνει κρυμμένα περιεχόμενα

 Sign-up for a Pro account $12.99 a month 

Η tabindex="0"παραπάνω ιδιότητα καθιστά το πληκτρολόγιο του κουμπιού εστιασμένο, καθώς η ετικέτα δεν χρησιμοποιήθηκε.

  • Κουμπί με ετικέτα

Ένα κουμπί δίπλα σε μια ετικέτα

 Like 2,048 

το στοιχείο χρησιμοποιείται για να καθορίσει ένα εικονίδιο, εδώ είναι ένα εικονίδιο καρδιάς δίπλα στη βασική ετικέτα2,048

  • Κουμπί εικονιδίου

Ένα κουμπί σημασιολογικής διεπαφής χρήστη μπορεί να είναι απλώς ένα εικονίδιο

Τα παραπάνω είναι απλώς ένα εικονίδιο κάμερας

Ομάδες

Τα σημασιολογικά κουμπιά διεπαφής χρήστη μπορούν να υπάρχουν σε μια ομάδα

 One Two Three 

Περιεχόμενο

Τα κουμπιά σημασιολογικού περιβάλλοντος χρήστη μπορούν να περιέχουν υπό όρους

 Yes No 

Κράτη

Σημασιολογικός κουμπιά UI μπορεί να υπάρχουν σε διαφορετικές καταστάσεις, active, disabled, loading. Απλώς προσθέστε ένα όνομα κατάστασης στο στοιχείο classχαρακτηριστικού of`.

Loading

Παραλλαγές

Υπάρχουν Σημασιολογικού κουμπιά UI σε διάφορα μεγέθη, mini, tiny, small, medium, large, big, huge, και massive.

Massive Button

Υπάρχουν πολλά περισσότερα για τα κουμπιά Σημασιολογικής διεπαφής χρήστη, επισκεφθείτε τον παρεχόμενο σύνδεσμο στην ενότητα Περισσότερες πληροφορίες για να μάθετε περισσότερα.

Περισσότερες πληροφορίες:

  • Έγγραφα Σημασιολογικών UI