CSS: in-place-edit

.instui-in-place-edit — एक [contenteditable] जो फोकस होने तक टेक्स्ट की तरह पढ़ता है, फिर इनपुट क्रोम दिखाता है।

इनपुट क्रोम केवल फोकस के दौरान ही दिखाई देता है; -readonly hover और focus दोनों सुविधाओं को दबा देता है इसलिए तत्व हमेशा साधारण इनलाइन टेक्स्ट के रूप में पढ़ा जाता है।

Source: in-place-edit.css

TIP

JS संवर्धन — यह कंपोनेंट का CSS स्वयं रेंडर और कार्य करता है; इंटरैक्टिव व्यवहार जोड़ने के लिए इसे @pantoken/interactions के साथ जोड़ें। विवरण के लिए modifier table below देखें।

एक्सेसिबिलिटी

संपादन योग्य तत्व को role="textbox" और एक पहुँच-योग्य नाम (aria-label) दें।

उपयोग

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

डेमो

उदाहरण

<span class="instui-in-place-edit" contenteditable="true" role="textbox" aria-label="Project name">Untitled</span>

मॉडिफायर

मॉडिफायर	विवरण
.-readonly	इनलाइन दिखता है पर संपादन योग्य नहीं (कोई hover/focus सुविधा नहीं)।

उपयोग किये गए टोकन

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-color	auto | <color>	—
--instui-focus-outline-offset	<length>	—
--instui-focus-outline-style	auto | <outline-line-style>	—
--instui-focus-outline-width	<line-width>	—
--instui-spacing-space-xs	<length>	0.25rem
--instui-spacing-space2xs	<length>	0.125rem

संबंधित

• text-input — फोकस होने पर यह एक टेक्स्ट इनपुट जैसा समान इनपुट क्रोम दिखाता है।