பயன்பாட்டு API
பயன்பாட்டு API என்பது பயன்பாட்டு வகுப்புகளை உருவாக்குவதற்கான சாஸ் அடிப்படையிலான கருவியாகும்.
பூட்ஸ்டார்ப் பயன்பாடுகள் எங்கள் பயன்பாட்டு API உடன் உருவாக்கப்படுகின்றன, மேலும் சாஸ் வழியாக எங்களின் இயல்புநிலை பயன்பாட்டு வகுப்புகளை மாற்ற அல்லது நீட்டிக்க பயன்படுத்தலாம். எங்கள் பயன்பாட்டு API ஆனது, பல்வேறு விருப்பங்களுடன் வகுப்புகளின் குடும்பங்களை உருவாக்குவதற்கான தொடர்ச்சியான Sass வரைபடங்கள் மற்றும் செயல்பாடுகளை அடிப்படையாகக் கொண்டது. Sass வரைபடங்கள் உங்களுக்குத் தெரியாவிட்டால், தொடங்குவதற்கு அதிகாரப்பூர்வ Sass ஆவணத்தைப் படிக்கவும்.
வரைபடத்தில் எங்களின் $utilities
அனைத்து பயன்பாடுகளும் உள்ளன, பின்னர் உங்கள் தனிப்பயன் $utilities
வரைபடத்துடன் இணைக்கப்படும். பயன்பாட்டு வரைபடத்தில் பின்வரும் விருப்பங்களை ஏற்றுக்கொள்ளும் பயன்பாட்டு குழுக்களின் முக்கிய பட்டியல் உள்ளது:
விருப்பம் | வகை | விளக்கம் |
---|---|---|
property |
தேவை | சொத்தின் பெயர், இது ஒரு சரம் அல்லது சரங்களின் வரிசையாக இருக்கலாம் (எ.கா., கிடைமட்ட திணிப்புகள் அல்லது விளிம்புகள்). |
values |
தேவை | மதிப்புகளின் பட்டியல் அல்லது வகுப்பின் பெயரும் மதிப்பும் ஒரே மாதிரியாக இருக்க விரும்பவில்லை எனில் வரைபடம். வரைபட விசையாகப் null பயன்படுத்தப்பட்டால், அது தொகுக்கப்படவில்லை. |
class |
விருப்பமானது | வகுப்பின் பெயருக்கு மாறக்கூடியது, அது சொத்தைப் போலவே இருக்க விரும்பவில்லை என்றால். நீங்கள் விசையை வழங்கவில்லை class மற்றும் property விசை சரங்களின் வரிசையாக இருந்தால், வகுப்பின் பெயர் property அணிவரிசையின் முதல் உறுப்பாக இருக்கும். |
state |
விருப்பமானது | பயன்பாட்டிற்காக உருவாக்க விரும்பும் :hover அல்லது உருவாக்கும் போலி-வகுப்பு வகைகளின் பட்டியல் . :focus இயல்புநிலை மதிப்பு இல்லை. |
responsive |
விருப்பமானது | பதிலளிக்கக்கூடிய வகுப்புகள் உருவாக்கப்பட வேண்டுமா என்பதைக் குறிக்கும் பூலியன். false முன்னிருப்பாக. |
rfs |
விருப்பமானது | திரவ மறுமதிப்பீட்டை செயல்படுத்த பூலியன். இது எவ்வாறு செயல்படுகிறது என்பதை அறிய RFS பக்கத்தைப் பார்க்கவும். false முன்னிருப்பாக. |
print |
விருப்பமானது | அச்சு வகுப்புகள் உருவாக்கப்பட வேண்டுமா என்பதைக் குறிக்கும் பூலியன். false முன்னிருப்பாக. |
rtl |
விருப்பமானது | பயன்பாடு RTL இல் வைக்கப்பட வேண்டுமா என்பதைக் குறிக்கும் பூலியன். true முன்னிருப்பாக. |
API விளக்கப்பட்டது
$utilities
அனைத்து பயன்பாட்டு மாறிகளும் எங்கள் _utilities.scss
ஸ்டைல்ஷீட்டில் உள்ள மாறியில் சேர்க்கப்படும் . பயன்பாடுகளின் ஒவ்வொரு குழுவும் இதுபோல் தெரிகிறது:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
பின்வருவனவற்றை வெளியிடுவது:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
தனிப்பயன் வகுப்பு முன்னொட்டு
class
தொகுக்கப்பட்ட CSS இல் பயன்படுத்தப்படும் வகுப்பு முன்னொட்டை மாற்ற விருப்பத்தைப் பயன்படுத்தவும் :
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
வெளியீடு:
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
மாநிலங்களில்
state
போலி-வகுப்பு மாறுபாடுகளை உருவாக்க விருப்பத்தைப் பயன்படுத்தவும் . உதாரணம் போலி வகுப்புகள் :hover
மற்றும் :focus
. மாநிலங்களின் பட்டியல் வழங்கப்படும் போது, அந்த போலி வகுப்பிற்கு வகுப்புப் பெயர்கள் உருவாக்கப்படுகின்றன. எடுத்துக்காட்டாக, மிதவையில் ஒளிபுகாநிலையை மாற்ற, சேர் மற்றும் நீங்கள் தொகுக்கப்பட்ட CSS இல் state: hover
பெறுவீர்கள் ..opacity-hover:hover
பல போலி வகுப்புகள் தேவையா? விண்வெளியால் பிரிக்கப்பட்ட மாநிலங்களின் பட்டியலைப் பயன்படுத்தவும் state: hover focus
:
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
வெளியீடு:
.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; }
பதிலளிக்கக்கூடிய பயன்பாடுகள்
responsive
அனைத்து பிரேக் பாயிண்டுகளிலும் பதிலளிக்கக்கூடிய பயன்பாடுகளை (எ.கா., .opacity-md-25
) உருவாக்க பூலியனைச் சேர்க்கவும் .
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
வெளியீடு:
.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; }
}
பயன்பாடுகளை மாற்றுதல்
அதே விசையைப் பயன்படுத்தி ஏற்கனவே உள்ள பயன்பாடுகளை மேலெழுதவும். எடுத்துக்காட்டாக, கூடுதல் பதிலளிக்கக்கூடிய ஓவர்ஃப்ளோ பயன்பாட்டு வகுப்புகளை நீங்கள் விரும்பினால், நீங்கள் இதைச் செய்யலாம்:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
அச்சுப் பயன்பாடுகள்
print
விருப்பத்தை இயக்குவது அச்சிடலுக்கான பயன்பாட்டு வகுப்புகளையும் உருவாக்கும், அவை @media print { ... }
ஊடக வினவலில் மட்டுமே பயன்படுத்தப்படும்.
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
வெளியீடு:
.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; }
}
முக்கியத்துவம்
API ஆல் உருவாக்கப்படும் அனைத்துப் பயன்பாடுகளும், !important
உதிரிபாகங்கள் மற்றும் மாற்றியமைக்கும் வகுப்புகளை அவை மேலெழுதுவதை உறுதி செய்வதை உள்ளடக்கியது. நீங்கள் இந்த அமைப்பை உலகளவில் $enable-important-utilities
மாறி (இயல்புநிலை க்கு true
) மாற்றலாம்.
API ஐப் பயன்படுத்துதல்
பயன்பாடுகள் API எவ்வாறு செயல்படுகிறது என்பதை இப்போது நீங்கள் நன்கு அறிந்திருக்கிறீர்கள், உங்கள் சொந்த தனிப்பயன் வகுப்புகளைச் சேர்ப்பது மற்றும் எங்களின் இயல்புநிலை பயன்பாடுகளை எவ்வாறு மாற்றுவது என்பதை அறிக.
பயன்பாடுகளைச் சேர்க்கவும்
$utilities
ஒரு உடன் இயல்புநிலை வரைபடத்தில் புதிய பயன்பாடுகளைச் சேர்க்கலாம் map-merge
. எங்களுக்குத் தேவையான Sass கோப்புகள் மற்றும் _utilities.scss
முதலில் இறக்குமதி செய்யப்பட்டுள்ளதா என்பதை உறுதிசெய்து, பின்னர் map-merge
உங்கள் கூடுதல் பயன்பாடுகளைச் சேர்க்க இதைப் பயன்படுத்தவும். எடுத்துக்காட்டாக, cursor
மூன்று மதிப்புகளுடன் பதிலளிக்கக்கூடிய பயன்பாட்டை எவ்வாறு சேர்ப்பது என்பது இங்கே.
@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,
)
)
);
பயன்பாடுகளை மாற்றவும்
இயல்புநிலை $utilities
வரைபடத்தில் இருக்கும் பயன்பாடுகள் map-get
மற்றும் map-merge
செயல்பாடுகளை மாற்றவும். width
கீழே உள்ள எடுத்துக்காட்டில், பயன்பாடுகளுக்கு கூடுதல் மதிப்பைச் சேர்க்கிறோம் . தொடக்கத்தில் தொடங்கி, map-merge
எந்தப் பயன்பாட்டை நீங்கள் மாற்ற விரும்புகிறீர்கள் என்பதைக் குறிப்பிடவும். அங்கிருந்து, பயன்பாட்டின் விருப்பங்கள் மற்றும் மதிப்புகளை அணுகவும் மாற்றவும் உள்ளமை "width"
வரைபடத்தைப் பெறவும்.map-get
@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%),
),
),
),
)
);
பதிலளிப்பதை இயக்கு
இயல்புநிலையாக தற்போது பதிலளிக்காத, ஏற்கனவே உள்ள பயன்பாடுகளின் தொகுப்பிற்கு நீங்கள் பதிலளிக்கக்கூடிய வகுப்புகளை இயக்கலாம். எடுத்துக்காட்டாக, border
வகுப்புகளை பதிலளிக்கக்கூடியதாக மாற்ற:
@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 ),
),
)
);
இது இப்போது ஒவ்வொரு பிரேக் பாயிண்டிற்கும் பதிலளிக்கக்கூடிய மாறுபாடுகளை .border
உருவாக்கும் . .border-0
நீங்கள் உருவாக்கிய CSS இப்படி இருக்கும்:
.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 { ... }
}
பயன்பாடுகளை மறுபெயரிடவும்
v4 பயன்பாடுகள் காணவில்லையா அல்லது வேறு பெயரிடும் மாநாட்டில் பயன்படுத்தப்பட்டுள்ளதா? class
கொடுக்கப்பட்ட பயன்பாட்டின் விளைவை மேலெழுதுவதற்கு ஏபிஐ பயன்பாடுகள் பயன்படுத்தப்படலாம் - எடுத்துக்காட்டாக, .ms-*
பயன்பாடுகளை பழையதாக மறுபெயரிட .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 ),
),
)
);
பயன்பாடுகளை அகற்று
குழு விசையை அமைப்பதன் மூலம் இயல்புநிலை பயன்பாடுகளில் ஏதேனும் ஒன்றை அகற்றவும் null
. எடுத்துக்காட்டாக, எங்களின் அனைத்துப் width
பயன்பாடுகளையும் அகற்ற, ஒரு ஐ உருவாக்கி உள்ளே $utilities
map-merge
சேர்க்கவும் "width": null
.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
RTL இல் உள்ள பயன்பாட்டை அகற்று
சில எட்ஜ் கேஸ்கள் RTL ஸ்டைலை கடினமாக்குகிறது , அரபு மொழியில் வரி முறிவுகள் போன்றவை. rtl
இவ்வாறு விருப்பத்தை அமைப்பதன் மூலம் RTL வெளியீட்டிலிருந்து பயன்பாடுகளை கைவிடலாம் false
:
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
வெளியீடு:
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
இது RTL இல் எதையும் வெளியிடாது, RTLCSS remove
கட்டுப்பாட்டு உத்தரவுக்கு நன்றி .