CSS: file-drop ​

.instui-file-drop — होवर, स्वीकार और अस्वीकृत अवस्थाओं के साथ एक फ़ाइल ड्रॉपज़ोन।

-hover/-accepted/-rejected क्लास केवल दृश्य हैं — वास्तविक ड्रैग-एंड-ड्रॉप का पता लगाना और फ़ाइल सत्यापन उपभोक्ता के JS द्वारा, रैप किए गए नेटिव इनपुट के चारों ओर जोड़ा जाना होता है।

Source: file-drop.css

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

नेटिव <input type="file"> को <label> ड्रॉप ज़ोन में रैप करें ताकि यह एक वास्तविक, लेबल वाला फ़ाइल नियंत्रण बना रहे जिसे कीबोर्ड और सहायक तकनीक संचालित कर सकें।

उपयोग ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/file-drop.css";

उदाहरण ​

html
<label class="instui-file-drop" id="fd">
  <span class="instui-icon -icon-cloud-upload"></span>
  <div class="instui-text"><strong>Drag an image here</strong>, or click to browse.</div>
  <div class="instui-text -size-sm instui-fg-muted" id="fd-msg">PNG or JPG up to 5&nbsp;MB.</div>
  <input type="file" id="fd-input">
</label>

संरचना ​

text
.instui-file-drop
  [class*="-icon-"] (0..1)
  text (component)
    strong
  text (component)
  input
flowchart TD n0[".instui-file-drop"]:::cssdoc-root n1("[class*=&quot;-icon-&quot;]"):::cssdoc-part n2(["text"]):::cssdoc-component n3("strong"):::cssdoc-part n4(["text"]):::cssdoc-component n5("input"):::cssdoc-part n0 -.->|0..1| n1 n2 --> n3 n0 --> n2 n0 --> n4 n0 --> n5 click n2 "/api/css/text.md" click n4 "/api/css/text.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

मॉडिफायर ​

मॉडिफायरविवरण
.-acceptedएक स्वीकार्य फ़ाइल के लिए ड्रैग स्थिति।
.-hoverहोवर या ड्रैग-ओवर स्थिति।
.-icon-*प्रमुख ड्रॉपज़ोन ग्लिफ़ आइकन रेंडर करें।
.-rejectedएक अस्वीकृत फ़ाइल के लिए ड्रैग स्थिति।

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

Tokenप्रकारमान
--instui-color-text-base<color>LightDarklight-dark(#273540, #F2F4F5)
--instui-component-file-drop-accepted-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-file-drop-background-color<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-file-drop-border-color<color>LightDarklight-dark(#7E8792, #5F6E7A)
--instui-component-file-drop-border-radius<length>1rem
--instui-component-file-drop-border-style—dashed
--instui-component-file-drop-border-width<length>0.0625rem
--instui-component-file-drop-hover-border-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-file-drop-rejected-color<color>LightDarklight-dark(#CF1F24, #F56050)
--instui-spacing-space-lg<length>1rem

सबकम्पोनेन्ट्स ​