पूरा पर्दाको मोडल
एउटै कार्डमा नअट्ने काम सुरु गर्दा, एपलाई पूरै ढाकेर त्यही काम मात्र सकाउन दिने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<div class="dc-fs" role="dialog" aria-modal="true" aria-labelledby="dc-fs-t">
<div class="dc-fs__bar">
<button class="dc-fs__bar-ico" type="button">
<span class="dc-sr">쓰던 내용 버리고 닫기</span>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
</button>
<h2 class="dc-fs__bar-title" id="dc-fs-t">후기 쓰기</h2>
<button class="dc-fs__bar-act" type="button">등록</button>
</div>
<div class="dc-fs__body">
<div class="dc-fs__field">
<label class="dc-fs__label" for="dc-fs-ttl">한 줄 요약</label>
<input class="dc-fs__input" id="dc-fs-ttl" type="text" value="배송이 하루 빨랐어요">
</div>
<div class="dc-fs__field">
<label class="dc-fs__label" for="dc-fs-txt">자세한 이야기</label>
<textarea class="dc-fs__textarea" id="dc-fs-txt" rows="6" aria-describedby="dc-fs-txt-help">포장이 단단해서 모서리 하나 안 눌렸습니다. 색은 화면보다 조금 어둡게 나왔고, 크기는 적어 둔 대로 맞았습니다.</textarea>
<p class="dc-fs__help" id="dc-fs-txt-help">10자 이상 쓰면 등록할 수 있습니다.</p>
</div>
</div>
</div>.dc-fs {
display: flex; flex-direction: column;
height: 560px; overflow: hidden;
background: var(--dc-bg);
border-radius: var(--dc-r-md);
font-family: var(--dc-font);
}
.dc-fs__bar {
position: sticky; top: 0; z-index: 2;
display: flex; align-items: center; gap: var(--dc-1);
padding: calc(var(--dc-safe-top) + var(--dc-1)) var(--dc-2) var(--dc-1);
background: var(--dc-surface);
border-bottom: 1px solid var(--dc-line);
}
.dc-fs__bar-ico {
flex: 0 0 auto;
display: grid; place-items: center;
width: 44px; height: 44px;
border: 0; border-radius: var(--dc-r-full);
background: transparent; color: var(--dc-text);
}
.dc-fs__bar-ico svg { width: 22px; height: 22px; }
.dc-fs__bar-ico:active { background: var(--dc-sunken); }
.dc-fs__bar-title {
flex: 1 1 auto; min-width: 0; margin: 0;
font-size: 16px; font-weight: 700; text-align: center;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--dc-text);
}
.dc-fs__bar-act {
flex: 0 0 auto;
min-width: 56px; min-height: 44px; padding: 0 var(--dc-3);
border: 0; border-radius: var(--dc-r-sm);
background: transparent; color: var(--dc-brand-text);
font-family: inherit; font-size: 15px; font-weight: 700;
}
.dc-fs__bar-act:active { background: var(--dc-brand-soft); }
.dc-fs__step {
flex: 0 0 auto; min-width: 44px; padding: 0 var(--dc-2);
font-size: 13px; font-weight: 700; text-align: right;
color: var(--dc-text-mute);
}
.dc-fs__prog { height: 3px; background: var(--dc-sunken); }
.dc-fs__prog-fill { display: block; width: 66%; height: 100%; background: var(--dc-brand); }
.dc-fs__body { flex: 1 1 auto; overflow-y: auto; padding: var(--dc-5); }
.dc-fs__field { margin-bottom: var(--dc-5); }
.dc-fs__label { display: block; margin-bottom: var(--dc-2); font-size: 13px; font-weight: 700; color: var(--dc-text); }
.dc-fs__input,
.dc-fs__textarea {
display: block; width: 100%;
padding: var(--dc-3) var(--dc-4);
border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
background: var(--dc-surface); color: var(--dc-text);
font-family: inherit; font-size: 15px; line-height: 1.6;
}
.dc-fs__input { min-height: 48px; }
.dc-fs__textarea { resize: vertical; }
.dc-fs__input:focus, .dc-fs__textarea:focus { border-color: var(--dc-brand); outline: 2px solid var(--dc-brand-soft); outline-offset: 0; }
.dc-fs__help { margin: var(--dc-2) 0 0; font-size: 12px; line-height: 1.6; color: var(--dc-text-mute); }
.dc-fs__h3 { margin: var(--dc-5) 0 var(--dc-2); font-size: 14px; font-weight: 700; color: var(--dc-text); }
.dc-fs__h3:first-child { margin-top: 0; }
.dc-fs__p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--dc-text-sub); }
.dc-fs__foot {
padding: var(--dc-3) var(--dc-5) calc(var(--dc-4) + var(--dc-safe-bottom));
border-top: 1px solid var(--dc-line);
background: var(--dc-surface);
}
.dc-fs__cta {
width: 100%; min-height: 50px;
border: 0; border-radius: var(--dc-r-md);
background: var(--dc-brand); color: var(--dc-text-on);
font-family: inherit; font-size: 15px; font-weight: 700;
}
.dc-fs__cta:active { background: var(--dc-brand-hi); }कसरी प्रयोग गर्ने
- माथि बायाँमा बन्द (वा पछाडि), दायाँमा सकाउने एउटै कार्य राख्नुहोस्
- शीर्षकमा गर्न लागेको काम लेख्नुहोस् — 'नयाँ पोस्ट' भन्दा 'समीक्षा लेख्ने'
- चरण भए कुन चरण र कति बाँकी छ सधैँ देखाउनुहोस्
- लेखिसकेको कुरा छँदा बन्द थिचिए फाल्ने हो कि सोध्नुहोस्
ध्यान दिनुपर्ने कुरा
- माथिल्लो बारमा --dc-safe-top, तलको स्थिर बटनमा --dc-safe-bottom राख्नुहोस्
- बन्द बटन आइकन मात्र छ — dc-sr मा के बन्द हुन्छ लेख्नुहोस्
- किबोर्ड आउँदा तलको बटन छोपिन्छ; भित्री भाग मात्र स्क्रोल गर्ने बनाउनुहोस्