आइकन कार्य लहर
पोस्ट वा फोटोमुनि लाइक, कमेन्ट, सेयर जस्तै समान महत्त्वका थोरै काम सँगै राख्दा प्रयोग गर्ने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<div class="dc-iwrap">
<p class="dc-iwrap__body">현장 사진 3장을 올렸습니다. 확인 부탁드립니다.</p>
<div class="dc-irow" role="group" aria-label="게시물 동작">
<button class="dc-ibtn" type="button" aria-pressed="false">
<svg class="dc-ibtn__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20s-7-4.5-7-9.5A4 4 0 0 1 12 7a4 4 0 0 1 7 3.5C19 15.5 12 20 12 20z" /></svg>
<span class="dc-sr">좋아요</span>
</button>
<button class="dc-ibtn" type="button">
<svg class="dc-ibtn__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12a8 8 0 0 1-11.3 7.3L4 21l1.7-5.7A8 8 0 1 1 21 12z" /></svg>
<span class="dc-sr">댓글 쓰기</span>
</button>
<button class="dc-ibtn" type="button">
<svg class="dc-ibtn__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 16V4m0 0L8 8m4-4 4 4" /><path d="M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4" /></svg>
<span class="dc-sr">공유</span>
</button>
<span class="dc-irow__gap"></span>
<button class="dc-ibtn" type="button" aria-pressed="false">
<svg class="dc-ibtn__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4h10a1 1 0 0 1 1 1v15l-6-4-6 4V5a1 1 0 0 1 1-1z" /></svg>
<span class="dc-sr">저장</span>
</button>
</div>
</div>.dc-iwrap {
padding: var(--dc-4);
background: var(--dc-surface);
font-family: var(--dc-font);
}
.dc-iwrap__body {
margin: 0 0 var(--dc-2);
font-size: 15px;
line-height: 1.6;
color: var(--dc-text);
}
.dc-irow {
display: flex;
align-items: center;
gap: var(--dc-1);
margin-left: calc(var(--dc-2) * -1);
}
.dc-irow__gap { flex: 1; }
.dc-ibtn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
border: 0;
border-radius: var(--dc-r-sm);
background: none;
color: var(--dc-text-sub);
cursor: pointer;
transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-ibtn:hover {
background: var(--dc-sunken);
color: var(--dc-text);
}
.dc-ibtn__ico {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.dc-ibtn[aria-pressed="true"] {
color: var(--dc-brand-text);
}
.dc-ibtn--col {
flex-direction: column;
gap: 2px;
min-width: 56px;
min-height: 52px;
padding: var(--dc-1) var(--dc-2);
}
.dc-ibtn__label {
font-family: var(--dc-font);
font-size: 11px;
line-height: 1.2;
}
.dc-topbar {
display: flex;
align-items: center;
gap: var(--dc-1);
padding: var(--dc-2) var(--dc-2);
padding-top: calc(var(--dc-2) + var(--dc-safe-top));
background: var(--dc-surface);
border-bottom: 1px solid var(--dc-line);
}
.dc-topbar__title {
flex: 1;
margin: 0;
padding-left: var(--dc-1);
font-family: var(--dc-font);
font-size: 16px;
font-weight: 600;
color: var(--dc-text);
}कसरी प्रयोग गर्ने
- एक लहरमा बढीमा चार; बाँकी 'अरू' मेनुमा सार्नु
- समान महत्त्वका काम मात्र सँगै राख्नु; मेटाउने जस्तो फर्काउन गाह्रो काम यहाँ नराख्नु
- सेयर वा सेभ जस्ता गलत बुझिने आइकनमा अक्षर पनि जोड्नु
ध्यान दिनुपर्ने कुरा
- आइकनमात्र भएका हरेक बटनमा dc-sr नाम अनिवार्य
- थिच्ने क्षेत्र आइकन होइन, बटन हो: 44×44px भन्दा सानो नबनाउनु
- माथिल्लो स्थिर बारमा --dc-safe-top नजोडे नच क्षेत्रले शीर्षक छोप्छ