ፍርስራስ እንጀራ

ኣብ ውሽጢ ሓደ ብመንገዲ CSS ብኣውቶማቲክ መፍለዪታት ዝውስኽ ናይ ምድህሳስ ስርዓተ-መሰረት ናይቲ ናይ ሕጂ ገጽ ኣቀማምጣ ኣመልክት።

ኣብነት

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

ነቲ መፍለዪ ምቕያር

መፍለዪታት ብኣውቶማቲክ ኣብ CSS ::beforeብመንገዲን content. ብምቕያር ክቕየሩ ይኽእሉ ’ ዮም $breadcrumb-divider። እቲ ናይ ጥቕሲ ተግባር ኣብ ዙርያ ሓደ ሕብረ ቃላት ዝርከቡ ጥቕስታት ንምፍጣር የድሊ፣ ስለዚ >ከም መፍለዪ እንተደሊኻ ነዚ ክትጥቀመሉ ትኽእል ኢኻ፤

$breadcrumb-divider: quote(">");

ብተወሳኺ base64 ዝተሰረተ SVG ምልክት ምጥቃም ይከኣል እዩ :

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

እቲ መፍለዪ $breadcrumb-dividerናብ none:

$breadcrumb-divider: none;

ተበጻሕነት

ፍርቂ እንጀራ ምድህሳስ ስለ ዝህብ፡ ትርጉም ዘለዎ ስያመ ምውሳኽ ከም aria-label="breadcrumb"ኣብቲ ባእታ ዝቐረበ ዓይነት ምድህሳስ ንምግላጽ <nav>፡ ከምኡ’ውን ንሓደ aria-current="page"ኣብቲ ናይ መወዳእታ ኣቕሓ ናይቲ ስብስብ ምትግባር ነቲ ናይ ሕጂ ገጽ ከም ዝውክል ንምምልካት ጽቡቕ ሓሳብ እዩ።

ንዝያዳ ሓበሬታ፡ ኣብ መምርሒ ልምድታት ምጽሓፍ ARIA breadcrumb pattern ርአ ።