API Utilidad rehegua

API utilidad rehegua haꞌehína peteĩ tembipuru Sass rehegua oñemboheko hag̃ua umi clase utilidad rehegua.

Ko páhinape

Umi purupyrã Bootstrap rehegua oñemboheko ñande API purupyrã ndive ha ikatu ojepuru oñemoambue térã oñembotuichave hag̃ua ñande mboajepyréva mboajepyréva mboajepyréva Sass rupive. Ore API utilidad rehegua oñemopyenda peteĩ serie Sass mapa ha función rehegua omoheñói hag̃ua familia clase rehegua oguerekóva opáichagua opción. Ndereikuaáiramo Sass mapakuéra, emoñe’ẽ yvate umi Sass docs oficial -pe eñepyrũ hag̃ua.

Pe $utilitiesmapa oguereko opaite ore utilidad ha upéi oñembojoaju ne $utilitiesmapa personalizado ndive, oĩramo. Pe mapa utilidad rehegua oguereko peteĩ lista clave reheve umi utilidad aty omoneĩva ko’ã opción:

Ambue ojeporavokuaáva	Hesegua	Techaukaha
`property`	Apopeteĩrã	Mbaꞌekuaarã réra, kóva ikatu peteĩ vore térã peteĩ vore ñemohendaha (techapyrã, acolchado horizontal térã margen).
`values`	Apopeteĩrã	Lista de valores, térã peteĩ mapa ndereipotáiramo mboꞌepy réra peteĩchaite valor ndive. Ojeporúramo `null`clave mapa ramo, noñembyatýi.
`class`	Poravokuaa	Variable mboꞌepy rérape g̃uarã ndereipotáiramo peteĩchaite pe propiedad ndive. En caso de no eme'ẽi `class`clave ha `property`clave haꞌehína peteĩ matriz cadena rehegua, mboꞌepy réra haꞌeta peteĩha elemento `property`matriz rehegua.
`state`	Poravokuaa	Lista de variantes seudo-clase-pegua ojoguáva `:hover`térã `:focus`oñegenera hag̃ua utilidad-pe g̃uarã. Ndaipóri valor por defecto.
`responsive`	Poravokuaa	Booleano ohechaukáva tekotevẽpa ojejapo umi clase ombohováiva. `false`por defecto rehegua.
`rfs`	Poravokuaa	Booleano ikatu hag̃uáicha ojejapo reescala líquido rehegua. Ejesarekomína RFS página rehe reikuaa hag̃ua mba’éichapa omba’apo kóva. `false`por defecto rehegua.
`print`	Poravokuaa	Boolean ohechaukáva tekotevẽpa ojejapo umi clase impresión rehegua. `false`por defecto rehegua.
`rtl`	Poravokuaa	Boolean ohechaukáva oñeñongatuvaꞌerãpa utilidad RTL-pe. `true`por defecto rehegua.

API omyesakã

Opaite mbaꞌekuaarã utilidad rehegua oñembojoapy $utilitiesmbaꞌekuaarãme ñande _utilities.scsskuatiahaipyre ryepýpe. Káda grupo de servicios públicos ojehecha peteĩ mba’e kóicha:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Mba’épa osẽ ko’ã mba’e:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

Prefijo clase personalizada rehegua

Eipuru classopción emoambue hag̃ua mbo’esyry ñepyrũrã ojeporúva CSS oñembohekopyrévape:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Osẽ: .

.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }

Estado-kuéra rehegua

Eipuru stateopción emoheñói hag̃ua variación seudo-clase rehegua. Techapyrã seudo-clase haꞌehína :hoverha :focus. Oñemeꞌe jave peteĩ lista estado rehegua, ojejapo mboꞌepy réra upe seudo-clase-pe g̃uarã. Techapyrã, emoambue hag̃ua opacidad hover-pe, emoĩve state: hoverha rehupytýta .opacity-hover:hovernde CSS oñembohekopyrévape.

¿Reikotevẽ heta pseudo-clase? Eipuru peteĩ lista ojepeꞌavaꞌekue espacio-pe umi estado rehegua: state: hover focus.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Osẽ: .

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

Umi servicios públicos ombohováiva

Emoĩ responsiveboolean emoheñói hag̃ua tembipururã ombohováiva (techapyrã, .opacity-md-25) opaite punto de ruptura rupi .

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Osẽ: .

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

Omoambuévo umi utilidad

Embogue umi utilidad oĩmava eipurúvo peteĩchagua clave. Techapyrã, reipotáramo ambue clase utilidad desbordamiento ombohováiva, ikatu rejapo kóva:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

Umi utilidad impresión rehegua

Ombohapévo printopción omoheñóita avei clase utilidad impresión-pe g̃uarã, ojeporúva @media print { ... }consulta medio ryepýpe añoite.

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Osẽ: .

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

Importancia rehegua

Opaite utilidad omoheñóiva API oike !importantoasegura hag̃ua omboyke componente ha clase modificador oñehaꞌarõháicha. Ikatu emoambue ko ñemboheko globalmente pe $enable-important-utilitiesmba’e’oka ndive (oñemoĩva’ekue ñepyrũrãme true).

Oipurúvo API

Ko’áĝa reikuaa porãma mba’éichapa omba’apo API purupyrã rehegua, eikuaa mba’éichapa ikatu emoĩ ne mbo’esyry jeporupyre ha emoambue ore purupyrã tee.

Oñemoĩve umi utilidad

Umi purupyrã pyahu ikatu oñembojoapy $utilitiesmapa por defecto-pe peteĩ map-merge. Ejesareko ore Sass rembiapokue oñeikotevẽva ha _utilities.scssojegueru raẽ, upéi eipuru pe map-mergeemoĩ hag̃ua ne purupyrã ambuéva. Techapyrã, ko’ápe ojehechauka mba’éichapa ikatu ñamoĩ peteĩ cursorutilidad ombohováiva mbohapy valor reheve.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

Omoambue umi utilidad

Omoambue umi utilidad oĩmava $utilitiesmapa por defecto-pe map-getha umi map-mergefunción ndive. Pe techapyrã iguýpe, ñamoĩ hína peteĩ valor adicional umi widthutilidad-pe. Eñepyrũ peteĩ ñepyrũrã reheve map-mergeha upéi emombe’u mba’e utilidad-pa remoambuese. Upégui, egueru "width"mapa anidado ndive map-geteike ha emoambue hag̃ua utilidad opción ha valor-kuéra.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

Omboguata ombohováiva

Ikatu emboguata mbo’esyry ombohováiva peteĩ tembipuru’i aty oĩmavape g̃uarã nombohováiva ko’áĝaite ñepyrũrãme. Techapyrã, ikatu haguãicha umi borderclase ombohovái:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

Kóva ko ága omoheñóita variación ombohováiva .borderha .border-0petettet punto de ruptura rehegua. Nde CSS remoheñóiva ojehecháta péicha:

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

Embohéra jey umi utilidad

Ofalta umi utilidad v4, térã ojepokuaa ambue convención de nombramiento rehe? Pe API purupyrã rehegua ikatu ojepuru oñemboyke hag̃ua classpeteĩ mbaꞌeporã oñemeꞌevaꞌekue osẽva—techapyrã, oñembohéra jey .ms-*hag̃ua tembipururã tujaitépe .ml-*:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

Ojepe’a umi utilidad

Eipe’a oimeraẽva umi tembipuru’i ñepyrũrã emohenda rupi pe aty clave null. Techapyrã, eipeꞌa hag̃ua opaite ñane widthutilidad, ejapo peteĩ $utilities map-mergeha emoĩve "width": nullhyepýpe.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

Ojepe’a utilidad RTL-pe

Oĩ káso borde rehegua hasýva RTL estilo , haꞌeháicha línea ruptura árabe-pe. Péicha umi utilidad ikatu ojeity RTL osëvagui omohendávo rtlopción false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

Osẽ: .

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

Kóva ndosẽi mba’eve RTL-pe, aguyje directiva control RTLCSSremove -pe .