CSS: in-place-edit ​

.instui-in-place-edit — Ένα [contenteditable] που διαβάζεται ως κείμενο μέχρι να εστιάσει, και τότε εμφανίζει το chrome εισόδου.

Το chrome εισόδου εμφανίζεται μόνο ενώ υπάρχει εστίαση· το -readonly καταστέλλει τόσο τις δυνατότητες hover όσο και focus ώστε το στοιχείο να διαβάζεται πάντα ως απλό ενσωματωμένο κείμενο.

Source: in-place-edit.css

TIP

Ενίσχυση JS — Το CSS αυτού του στοιχείου αποδίδει και λειτουργεί από μόνο του· συνδυάστε το με @pantoken/interactions για να προσθέσετε τη διαδραστική συμπεριφορά. Δείτε τον πίνακα τροποποιητών παρακάτω.

Προσβασιμότητα ​

Δώστε στο επεξεργάσιμο στοιχείο role="textbox" και ένα προσβάσιμο όνομα (aria-label).

Χρήση ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/in-place-edit.css";

Παράδειγμα επίδειξης ​

Παραδείγματα ​

html
<span class="instui-in-place-edit" contenteditable="true" role="textbox" aria-label="Project name">Χωρίς τίτλο</span>

Τροποποιητές ​

ΤροποποιητήςΠεριγραφή
.-readonlyΕμφανίζεται εντός γραμμής αλλά δεν είναι επεξεργάσιμο (χωρίς δυνατότητα hover/focus).

Καταναλωμένα tokens ​

TokenΤύποςΤιμή
--instui-color-background-muted<color>LightDarklight-dark(#F2F4F5, #273540)
--instui-color-text-base<color>LightDarklight-dark(#273540, #F2F4F5)
--instui-component-text-input-background-color<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-text-input-border-color<color>LightDarklight-dark(#7E8792, #5F6E7A)
--instui-component-text-input-border-radius<length>0.75rem
--instui-component-text-input-border-width<length>0.0625rem
--instui-focus-outline-colorauto | <color>—
--instui-focus-outline-offset<length>—
--instui-focus-outline-styleauto | <outline-line-style>—
--instui-focus-outline-width<line-width>—
--instui-spacing-space-xs<length>0.25rem
--instui-spacing-space2xs<length>0.125rem

Σχετιζόμενα ​

  • text-input — Όταν έχει εστίαση εμφανίζει το ίδιο chrome εισόδου με ένα πεδίο κειμένου.