CSS: file-drop

.instui-file-drop — 호버, 허용, 거부 상태를 갖는 파일 드롭존.

-hover/-accepted/-rejected 클래스는 순수하게 시각적입니다 — 실제 드래그 앤 드롭 감지와 파일 검증은 래핑된 네이티브 입력 주위에 소비자가 JS로 연결해야 합니다.

Source: file-drop.css

접근성

네이티브 <input type="file">를 <label> 드롭존 안에 래핑하여 키보드와 보조 기술이 조작할 수 있는 실제 레이블된 파일 컨트롤로 유지하세요.

사용법

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

예제들

<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>

구조

.instui-file-drop
  [class*="-icon-"] (0..1)
  text (component)
    strong
  text (component)
  input

flowchart TD n0[".instui-file-drop"]:::cssdoc-root n1("[class*="-icon-"]"):::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

하위 컴포넌트

• text