प्रोफाइल सम्पादन
पहिले भरिएको मान सच्याउने स्क्रिन — बाकस खाली नभई अहिलेको मान देखियोस्, र के फेर्न मिल्दैन त्यो पनि देखियोस्।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<form class="dc-pfe" action="#">
<header class="dc-pfe__bar">
<button class="dc-pfe__back" type="button">
<span aria-hidden="true">‹</span><span class="dc-sr">취소하고 뒤로</span>
</button>
<h1 class="dc-pfe__bartitle">프로필 편집</h1>
</header>
<div class="dc-pfe__body">
<div class="dc-pfe__avatar">
<span class="dc-pfe__face" aria-hidden="true">민</span>
<button class="dc-pfe__cam" type="button">
<span aria-hidden="true">＋</span><span class="dc-sr">사진 바꾸기</span>
</button>
</div>
<p class="dc-pfe__avatarhint">얼굴이 보이는 사진이면 사장님이 더 빨리 연락합니다.</p>
<div class="dc-pfe__field">
<label class="dc-pfe__label" for="dc-pfe-name">이름</label>
<input class="dc-pfe__input" id="dc-pfe-name" type="text" autocomplete="name" value="김민수" />
</div>
<div class="dc-pfe__field">
<label class="dc-pfe__label" for="dc-pfe-nick">닉네임</label>
<input class="dc-pfe__input" id="dc-pfe-nick" type="text" value="민수" aria-describedby="dc-pfe-nickhint" />
<p class="dc-pfe__hint" id="dc-pfe-nickhint">다른 사람에게 보이는 이름입니다.</p>
</div>
<div class="dc-pfe__field">
<label class="dc-pfe__label" for="dc-pfe-bio">소개</label>
<textarea class="dc-pfe__area" id="dc-pfe-bio" rows="3" maxlength="80" aria-describedby="dc-pfe-cnt">용접 3년, 평택에서 일합니다. 주말도 가능합니다.</textarea>
<p class="dc-pfe__count" id="dc-pfe-cnt">28 / 80자</p>
</div>
<div class="dc-pfe__locked">
<span class="dc-pfe__lockk">휴대폰 번호</span>
<span class="dc-pfe__lockv">010-1234-5678</span>
<button class="dc-pfe__change" type="button">변경<span class="dc-sr"> — 휴대폰 번호</span></button>
</div>
</div>
<div class="dc-pfe__bottom">
<button class="dc-pfe__go" type="submit">저장</button>
</div>
</form>.dc-pfe { display:flex; flex-direction:column; height:660px; overflow:hidden; background:var(--dc-bg); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); font-family:var(--dc-font); }
.dc-pfe__bar { flex:0 0 auto; display:flex; align-items:center; gap:var(--dc-1); padding:calc(var(--dc-safe-top) + var(--dc-2)) var(--dc-2) var(--dc-2); background:var(--dc-surface); border-bottom:1px solid var(--dc-line); }
.dc-pfe__back { 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); font-size:22px; line-height:1; }
.dc-pfe__back:active { background:var(--dc-sunken); }
.dc-pfe__bartitle { margin:0; font-size:16px; font-weight:700; color:var(--dc-text); }
.dc-pfe__body { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:var(--dc-4); padding:var(--dc-5) var(--dc-4); }
.dc-pfe__avatar { position:relative; align-self:center; width:88px; height:88px; }
.dc-pfe__face { display:grid; place-items:center; width:88px; height:88px; border-radius:var(--dc-r-full); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-size:30px; font-weight:800; }
.dc-pfe__cam { position:absolute; right:-6px; bottom:-6px; display:grid; place-items:center; width:44px; height:44px; border:2px solid var(--dc-surface); border-radius:var(--dc-r-full); background:var(--dc-brand); color:var(--dc-text-on); font-size:18px; line-height:1; }
.dc-pfe__cam:active { background:var(--dc-brand-hi); }
.dc-pfe__avatarhint { margin:0; font-size:12px; color:var(--dc-text-mute); text-align:center; }
.dc-pfe__field { display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-pfe__label { font-size:13px; font-weight:700; color:var(--dc-text-sub); }
.dc-pfe__input { width:100%; min-height:48px; padding:0 var(--dc-3); 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:16px; }
.dc-pfe__input:focus, .dc-pfe__area:focus { outline:none; border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-pfe__input.is-error { border-color:var(--dc-danger); background:var(--dc-danger-soft); }
.dc-pfe__area { width:100%; min-height:88px; padding:var(--dc-3); 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:16px; line-height:1.6; resize:vertical; }
.dc-pfe__hint { margin:0; font-size:12px; color:var(--dc-text-mute); }
.dc-pfe__err { margin:0; font-size:13px; font-weight:700; line-height:1.5; color:var(--dc-danger); }
.dc-pfe__count { margin:0; font-family:var(--dc-mono); font-size:12px; color:var(--dc-text-mute); text-align:right; }
.dc-pfe__locked { display:flex; align-items:center; gap:var(--dc-3); padding:var(--dc-2) var(--dc-3); border:1px solid var(--dc-line); border-radius:var(--dc-r-sm); background:var(--dc-sunken); }
.dc-pfe__lockk { flex:0 0 auto; font-size:13px; color:var(--dc-text-sub); }
.dc-pfe__lockv { flex:1 1 auto; min-width:0; font-size:14px; font-weight:700; color:var(--dc-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-pfe__change { flex:0 0 auto; min-width:56px; min-height:44px; padding:0 var(--dc-2); 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:13px; font-weight:700; }
.dc-pfe__change:active { background:var(--dc-sunken); }
.dc-pfe__bottom { flex:0 0 auto; padding:var(--dc-3) var(--dc-4) calc(var(--dc-safe-bottom) + var(--dc-3)); background:var(--dc-surface); border-top:1px solid var(--dc-line); }
.dc-pfe__go { width:100%; min-height:52px; border:0; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-family:inherit; font-size:16px; font-weight:700; }
.dc-pfe__go:active { background:var(--dc-brand-hi); }
.dc-pfe__go[disabled] { background:var(--dc-sunken); color:var(--dc-text-mute); }कसरी प्रयोग गर्ने
- बाकस खाली राख्नु हुँदैन; अहिलेको मान भरेर देखाउनु — सम्पादन नयाँ लेख्नु होइन
- फोन नम्बर जस्तो छुट्टै पुष्टि चाहिने चीज खैरो लाइनमा देखाउनु र छेउमै 'परिवर्तन' बटन राख्नु
- अक्षर सीमा छ भने लेखेको सङ्ख्या र सीमा बाकसमुनि सधैँ सँगै देखाउनु
- 'सुरक्षित' बटन तल अडाउनु, लामो स्क्रिनमा पनि औँला पुग्छ
ध्यान दिनुपर्ने कुरा
- फोटो फेर्ने जस्ता आइकन बटनमा dc-sr ले नाम राख्नु — ＋ मात्र पढिँदैन
- अक्षर गणना aria-describedby ले बाकससँग जोड्नु; छेउमा राख्दैमा सम्बन्ध बन्दैन
- फेर्न नमिल्ने लाइन खाली disabled राख्दा किन मिल्दैन थाहा हुँदैन — बटन वा व्याख्या सँगै राख्नु