तैरिने कार्य बटन

सूची हेर्दै जाँदा कुनै पनि बेला 'नयाँ लेख्ने' काममा जानुपर्दा, सामग्रीमाथि तैरिएर स्क्रोलसँगै रहने बटन।

प्रत्यक्ष पूर्वावलोकन

स्रोत

HTML CSS

<div class="dc-fabstage">
  <ul class="dc-fabstage__list">
    <li class="dc-fabstage__row">현장 점검 일지</li>
    <li class="dc-fabstage__row">자재 입고 확인</li>
    <li class="dc-fabstage__row">안전 교육 기록</li>
  </ul>
  <button class="dc-fab" type="button">
    <svg class="dc-fab__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
    <span class="dc-sr">새 기록 쓰기</span>
  </button>
</div>

.dc-fabstage {
  position: relative;
  min-height: 360px;
  background: var(--dc-bg);
  font-family: var(--dc-font);
  overflow: hidden;
}
.dc-fabstage__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dc-fabstage__row {
  padding: var(--dc-4);
  border-bottom: 1px solid var(--dc-line);
  background: var(--dc-surface);
  font-size: 15px;
  color: var(--dc-text);
}
.dc-fab {
  position: absolute;
  right: var(--dc-4);
  bottom: calc(var(--dc-4) + var(--dc-safe-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: var(--dc-r-full);
  background: var(--dc-brand);
  color: var(--dc-text-on);
  box-shadow: var(--dc-sh-3);
  cursor: pointer;
  transition: background var(--dc-fast), transform var(--dc-fast);
}
.dc-fab:hover { background: var(--dc-brand-hi); }
.dc-fab:active { transform: scale(.96); }
.dc-fab__ico {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.dc-fab--wide {
  width: auto;
  min-width: 56px;
  padding: 0 var(--dc-5);
  gap: var(--dc-2);
  border-radius: var(--dc-r-full);
}
.dc-fab__label {
  font-family: var(--dc-font);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.dc-fab--above {
  bottom: calc(64px + var(--dc-4) + var(--dc-safe-bottom));
}
.dc-fabstage__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding-bottom: var(--dc-safe-bottom);
  background: var(--dc-surface);
  border-top: 1px solid var(--dc-line);
}
.dc-fabstage__tab {
  flex: 1;
  min-height: 56px;
  border: 0;
  background: none;
  color: var(--dc-text-sub);
  font-family: var(--dc-font);
  font-size: 12px;
  cursor: pointer;
}
.dc-fabstage__tab[aria-current="page"] {
  color: var(--dc-brand-text);
  font-weight: 600;
}

कसरी प्रयोग गर्ने

एक स्क्रिनमा एउटै राख्नु; दुई चाहिएमा तल्लो बारमा सार्नु
सबैभन्दा धेरै थिचिने काम, सामान्यतया नयाँ बनाउने कामका लागि मात्र
आइकनले मात्र अर्थ नबुझिने भए लेबलसहितको फराकिलो रूप प्रयोग गर्नु

ध्यान दिनुपर्ने कुरा

आइकनमात्र भएको बटनमा dc-sr नाम नराखे स्क्रिन रिडरले 'बटन' मात्र पढ्छ
तल्लो ट्याब बार भएमा बटनलाई बारको उचाइ जति माथि सार्नु

अर्को

तल्लो कार्य बार बटन र क्रिया एप

आइकन कार्य लहर बटन र क्रिया एप

सेगमेन्ट टगल बटन र क्रिया एप वेब

लाइक टगल बटन र क्रिया एप