Mihlovo

Mihlovo

Endla mihlovo ya tsalwa hi switirhisiwa swa mihlovo. Loko u lava ku colorize swihlanganisi, u nga tirhisa .link-*titlilasi ta mupfuni leti nga na :hoverna ti :focusstates.

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Ku nga voni kahle

Ku sukela eka v5.1.0, switirhisiwa swa mihlovo ya matsalwa swi endliwa hi Sass hi ku tirhisa swilo leswi cinca-cincaka swa CSS. Leswi swi pfumelela ku cinca ka mihlovo ya nkarhi wa xiviri handle ka nhlengeleto na ku cinca ka ku vonakala ka alpha loku cinca-cincaka.

Ndlela leyi swi tirhaka ha yona

Anakanya hi .text-primaryxitirhisiwa xa hina xa ntolovelo.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

Hi tirhisa RGB version ya hina --bs-primary(leyi nga na nkoka wa 13, 110, 253) CSS variable naswona hi namarhetile CSS variable ya vumbirhi, --bs-text-opacity, ya alpha transparency (leyi nga na default value 1hi khensa CSS variable ya laha kaya). Sweswo swi vula leswaku nkarhi wun’wana ni wun’wana lowu u wu tirhisaka .text-primarysweswi, ntikelo wa wena lowu hlayiweke colori rgba(13, 110, 253, 1). Xihlawulekisi xa CSS xa laha kaya endzeni ka .text-*tlilasi yin’wana na yin’wana xi papalata timhaka ta ndzhaka leswaku swikombiso leswi pfanganisiweke swa switirhisiwa a swi vi na ku vonakala ka alpha loku cinciweke hi ku tisungulela.

Xikombiso

Ku cinca opacity yoleyo, tlula --bs-text-opacityhi ku tirhisa switayele swa ntolovelo kumbe switayele swa le ndzeni ka layini.

<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

Kumbe, hlawula eka yin’wana ni yin’wana ya .text-opacityswitirhisiwa:

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

Ku kongoma

Minkarhi yin’wana titlilasi ta xiyimo a ti nge tirhisiwi hikwalaho ka ku kongoma ka muhlawuri un’wana. Eka swiyimo swin’wana, ndlela leyi eneleke yo tshungula i ku phutsela nhundzu ya elemente ya wena eka elemente <div>kumbe ku tlula ya semantiki hi tlilasi leyi lavekaka.

Sass

Ku engetela eka ntirho wa Sass lowu landzelaka, anakanya hi ku hlaya hi swihlawulekisi swa hina swa ntolovelo swa CSS leswi katsiweke (aka swilo leswi cinca-cincaka swa CSS) swa mihlovo na swin’wana.

Swilo leswi cinca-cincaka

Switirhisiwa swo tala colorswi endliwa hi mihlovo ya hina ya nhlokomhaka, leyi averiweke nakambe ku suka eka swilo swa hina leswi cinca-cincaka swa phalete ya mihlovo ya xivumbeko xa le henhla.

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

Mihlovo ya greyscale na yona ya kumeka, kambe ku tirhisiwa ntsena ntlawa lowutsongo ku humesa switirhisiwa swihi na swihi.

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

Mepe

Mihlovo ya theme yi tlhela yi vekiwa eka mepe wa Sass leswaku hi ta kota ku loop ehenhla ka yona ku humesa switirhisiwa swa hina, swicinci swa swiphemu, na swin’wana.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Mihlovo ya greyscale yitlhela yi kumeka tani hi mepe wa Sass. Mepe lowu a wu tirhisiwi ku endla switirhisiwa swihi na swihi.

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

Mihlovo ya RGB yi endliwa ku suka eka mepe wa Sass lowu hambaneke:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Naswona ti-opacities ta mihlovo ti aka eka sweswo hi mepe wa tona lowu dyiwaka hi API ya switirhisiwa:

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

API ya switirhisiwa

Switirhisiwa swa mihlovo swi tivisiwile eka switirhisiwa swa hina API hi scss/_utilities.scss. Dyondza ndlela yo tirhisa API ya switirhisiwa.

    "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),