கோணத்தில் உள்ள UI / UX கூறுகள் என அழைக்கப்படுகின்றன கோண பொருட்கள். அவர்கள்கோண பயன்பாடுகள் செய்ய உதவுங்கள் திறமையாக . இருப்பினும், நீங்கள் இன்னும் அவற்றைப் பற்றி அறிந்திருக்கவில்லை என்றால், கோணப் பொருள்களை விரிவாகக் கற்றுக்கொள்ள உதவும் ஒரு கட்டுரை இங்கே. மேலும், டிகோணத்தைப் பற்றிய ஆழமான அறிவைப் பெறுங்கள், பதிவுசெய்வதைக் கவனியுங்கள் ' எடுரேகாவிலிருந்து.
இந்த கட்டுரையில், நான் பின்வரும் தலைப்புகளில் செல்கிறேன்:
கோணப் பொருட்களின் அறிமுகம்
பொருட்கள் 2014 ஆம் ஆண்டில் கூகிள் உருவாக்கிய வடிவமைப்பு மொழியாக அறிமுகப்படுத்தப்பட்டது. பொருள் வடிவமைப்பு ஒரு கருவிமுன்-இறுதி கட்டமைப்பிற்கு, இது உங்களுக்கு உதவுகிறது காட்சி , இயக்கம் , மற்றும் தொடர்பு வடிவமைப்பு. வெவ்வேறு சாதனங்கள் மற்றும் வெவ்வேறு திரை அளவுகளில் மாற்றியமைக்க இது உதவுகிறது. முதலில், இந்த பயன்பாடுகளை மேலும் அதிகரிக்க AngularJS இல் குறிக்கப்பட்டது கவர்ச்சிகரமான மற்றும் செய்ய வேகமாக . பின்னர், கூகிள் புதிதாக குறியீட்டை மீண்டும் எழுதி JS ஐ அகற்றியது. , மற்றும் அதற்கு பெயரிட்டார் செப்டம்பர் 2016 இல். பின்னர், கூகிள் பொருள் வடிவமைப்பை கோணத்திற்கு குறியிட்டது, இது பயன்படுத்துகிறது , மற்றும் அதற்கு கோண பொருட்கள் என்று பெயரிட்டார்.
கோண பொருட்கள் அல்லது பயனர் இடைமுகம் (UI) கூறுகள் உங்கள் பயன்பாட்டை வடிவமைக்க உதவுகின்றன கட்டமைக்கப்பட்ட முறை. அவை பயனர்களை ஈர்க்கின்றன, அதை உருவாக்குகின்றன அணுக எளிதானது உங்கள் பயன்பாட்டில் உள்ள கூறுகள் அல்லது கூறுகள். உங்கள் பயன்பாடுகளை தனித்துவமான முறையில் கவர்ச்சிகரமான முறையில் வடிவமைக்கவும் அவை உதவுகின்றன பாணிகள் மற்றும் வடிவங்கள் . இந்த கூறுகள் உங்கள் பயன்பாட்டை மேலும் அதிகரிக்க உதவுகின்றன சீரானது , வேகமாக , பல்துறை மற்றும் வடிவமைப்பு கூட பதிலளிக்கக்கூடியது வலைத்தளங்கள்.
கோண பொருள் நிறுவல்
இப்போது, கோணப் பொருள்களை எவ்வாறு நிறுவுவது என்பது குறித்த விரைவான டுடோரியலுடன் ஆரம்பிக்கலாம். முதலில் முதல் விஷயங்கள், உங்கள் கணினியில் கோண நிறுவப்பட்டிருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். உங்களுக்கு கோணல் தெரிந்திருக்கவில்லை என்றால், இணைப்பைப் பார்க்கவும் . நீங்கள் எல்லாவற்றையும் அமைத்தவுடன், பின்வரும் கட்டளையைப் பயன்படுத்தி உங்கள் திட்டத்தில் கோணப் பொருள்களைச் சேர்க்கலாம்:
சேர்க்க @ கோண / பொருள்
முதலில், முன்பே கட்டப்பட்ட தீம் பெயர் அல்லது தனிப்பயன் தீம் ஒன்றைத் தேர்வுசெய்ய இது கேட்கும்.
உங்கள் பயன்பாட்டை வடிவமைக்க இயல்புநிலை தீம் ஆகும் “இண்டிகோ / பிங்க்” முன்பே கட்டப்பட்ட தீம் ஒன்றை நீங்கள் தேர்வு செய்ய வேண்டும். நீங்கள் 'தனிப்பயன்' கருப்பொருளையும் தேர்வு செய்யலாம், இதன்மூலம் அனைத்து பொதுவான பாணிகளையும் உள்ளடக்கிய உங்கள் தீம் கோப்புகளைத் தனிப்பயனாக்கலாம்.
அடுத்து, அதை அமைக்கும்படி கேட்கும் சுத்தியல் ஜே.எஸ் . HammerJS ஒரு பிரபலமான நூலகமாகும், இது முக்கியமாக கோண பயன்பாட்டில் பயன்படுத்தப்படுகிறது. இது ஸ்வைப், பான், பிஞ்ச், ரோட்டேட் போன்ற தொடு சைகைகளுக்கான ஆதரவை சேர்க்கிறது, குறிப்பாக மொபைல் பயன்பாடுகளில்.
நீங்கள் “ஆம்” அல்லது “இல்லை” என்பதை தேர்வு செய்யலாம். மொபைல்களில் உங்கள் பயன்பாட்டைப் பயன்படுத்தும்போது சுத்தியல்ஜேஎஸ் பயனுள்ளதாக இருக்கும். மொபைல்கள் தொடு காட்சிகளை வழங்குவதால், இந்த சைகைகள் மிகவும் பயனுள்ளதாக இருக்கும், மேலும் அவை உங்கள் மொபைல் பயன்பாட்டில் நவநாகரீகமாகத் தோன்றலாம்.
உங்கள் விருப்பத்தை நீங்கள் தேர்வுசெய்த பிறகு, அடுத்தது அதை அமைக்கும்படி கேட்கும் உலாவி அனிமேஷன்கள் கோண பொருள்.
உங்கள் பயன்பாட்டில் அனிமேஷன்களைப் பயன்படுத்த நீங்கள் “ஆம்” என்பதைத் தேர்வு செய்ய வேண்டும். கோண அனிமேஷன்கள் உங்கள் பயன்பாட்டை மிகவும் வேடிக்கையாகவும் பயன்படுத்த எளிதாகவும் ஆக்குகின்றன. இது பயனர்களின் கவனத்தை ஈர்க்கும் உங்கள் பயன்பாடு மற்றும் பயனர் அனுபவத்தை மேம்படுத்தலாம்.
பின்னர், இது உங்கள் பயன்பாட்டில் கோணப் பொருள்களை நிறுவும்.
கோண பொருள் கூறுகள்
முன்பு குறிப்பிட்டபடி, கோண பொருள் கூறுகள் தவிர வேறில்லை UI / UX வடிவமைப்பு கூறுகள். படிவக் கட்டுப்பாடுகள், ஊடுருவல், பொத்தான்கள் மற்றும் குறிகாட்டிகள், பாப்அப்கள் மற்றும் பல போன்ற பல்வேறு வகையான கூறுகள் அவற்றில் உள்ளன. பொருள் வடிவமைப்பு விவரக்குறிப்பின் படி வடிவங்களை செயல்படுத்த இந்த கூறுகள் உங்களுக்கு உதவுகின்றன.
உங்கள் கோண பயன்பாட்டில் இந்த கூறுகளை எவ்வாறு செயல்படுத்தலாம் என்பதற்கான சில எடுத்துக்காட்டுகளைப் பார்ப்போம்.
வழிசெலுத்தல்
முதலில், வழிசெலுத்தலில் உள்ள கூறுகளைப் பற்றி விவாதிப்பேன்.
- கருவிப்பட்டி
பின்வரும் குறியீட்டை நீங்கள் தட்டச்சு செய்ய வேண்டும் app.component.html உங்கள் பயன்பாட்டில் கருவிப்பட்டி கூறுகளைப் பயன்படுத்த கோப்பு.
கோண பொருள் பயிற்சி என்பது தலைப்புகள் மற்றும் தலைப்புகளுக்குப் பயன்படுத்தப்படும் கோணப் பொருளிலிருந்து ஒரு கொள்கலன். இன் நிறம் பயன்படுத்துவதன் மூலம் கொள்கலன் மாற்றப்படலாம் நிறம் சொத்து.இயல்பாக, கருவிப்பட்டிகள் தற்போதைய கருப்பொருளின் அடிப்படையில் நடுநிலை பின்னணி வண்ணத்தைப் பயன்படுத்துகின்றன, அதாவது ஒளி அல்லது இருண்டவை.மூன்று இயல்புநிலை கருப்பொருள்களை நீங்கள் தேர்வு செய்யலாம்: ‘முதன்மை’ , ‘உச்சரிப்பு’ , அல்லது ‘எச்சரிக்கை’ .இந்த கருவிப்பட்டியைப் பயன்படுத்த, நீங்கள் முதலில் அதை இறக்குமதி செய்ய வேண்டும் app.module.ts பின்வரும் கட்டளையைப் பயன்படுத்தி கோணப் பொருட்களிலிருந்து கோப்பு:
'@ கோண / பொருள்' இலிருந்து {MatToolbarModule import ஐ இறக்குமதி செய்கபின்னர், இந்த தொகுதியையும் நீங்கள் சேர்க்க வேண்டும் இறக்குமதி: [] பிரிவு அமைந்துள்ளது app.module.ts கோப்பு.
இறக்குமதிகள்: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
மேட்-கருவிப்பட்டிக்கு, நீங்கள் சேர்க்க வேண்டும் “ MatToolbarModule ”.
இப்போது, பின்வரும் கட்டளையைப் பயன்படுத்தி உங்கள் திட்டத்திற்கு சேவை செய்வோம்:
of serv -o
இது கீழே காட்டப்பட்டுள்ளபடி உங்கள் கணினியின் இயல்புநிலை உலாவியில் உங்கள் திட்டத்தைத் திறக்கும்:
உங்கள் விருப்பப்படி கருவிப்பட்டியின் நிறத்தை மாற்ற விரும்பினால், நீங்கள் அதை CSS நடைதாளின் உதவியுடன் செய்யலாம். ஒரு உதாரணம் காட்டுகிறேன்.
முதலில், நீங்கள் அழிக்க வேண்டும் நிறம் இருந்து சொத்து கொள்கலன் பின்னர், பின்வருவதைத் தட்டச்சு செய்க CSS குறியீடு app.component.css கோப்பு.
பாய்-கருவிப்பட்டி {பின்னணி-வண்ணம்: / * உங்கள் விருப்பத்தின் வண்ணம் * / நிறம்: / * உரை-வண்ணம் * /}இப்போது, முடிவைக் காண உங்கள் திட்டத்திற்கு சேவை செய்யுங்கள்.
- பட்டியல்
அடுத்து, மெனு உபகரணத்தைப் பற்றி விவாதிப்பேன். பின்வரும் குறியீட்டை உங்கள் தட்டச்சு செய்ய வேண்டும் app.component.html கோப்பு.
கோண பொருள் பயிற்சி பட்டி அமைப்புகள் உதவிஇல் சில ஸ்டைலிங் சேர்க்கலாம் பட்டியல் பொத்தானை. பின்வரும் குறியீட்டை உங்கள் தட்டச்சு செய்ய வேண்டும் app.component.css கோப்பு.
.space {flex: 1 1 auto} .btns {width: 100px height: 40px font-size: large border-radius: 10px border: 3px solid # 113c89 background-color: lightcoral}class = ”space” “கருவிப்பட்டி பெயர்” மற்றும் “பட்டி விருப்பம்” இடையே இடைவெளியைச் சேர்க்கப் பயன்படுகிறது.
நீங்கள் CSS நடைதாள் பற்றி அறிந்திருக்கவில்லை என்றால், எங்கள் வலைப்பதிவை நீங்கள் குறிப்பிடலாம் ஆழமாகப் பெற.
கருவிப்பட்டியைப் போலவே, பயன்படுத்தவும் மற்றும் கொள்கலன்கள், இறக்குமதி செய்ய மேலே உள்ள அதே நடைமுறையை நீங்கள் பின்பற்ற வேண்டும் MatMenuModule மற்றும் MatButtonModule இருந்து கோண பொருள் அவற்றைச் சேர்க்கவும் இறக்குமதி: [] பிரிவு அமைந்துள்ளது app.module.ts கோப்பு.
வெளியீட்டைக் காண்பிக்க உங்கள் திட்டத்தை இப்போது பரிமாறவும்.
படிவக் கட்டுப்பாடுகள்
இப்போது, படிவக் கட்டுப்பாட்டில் உள்ள கூறுகளைப் பற்றி விவாதிப்பேன்.
- படிவம் புலம்
பெயர் குறிப்பிடுவது போல, பயனர் கொடுத்த உள்ளீடுகளுக்கு படிவம்-புலம் பயன்படுத்தப்படுகிறது. ஒரு பயன்பாடு அல்லது வலைத்தளத்தில் பயனரைப் பதிவு செய்வதற்கு இது பொதுவாகப் பயன்படுத்தப்படுகிறது.
பின்வரும் குறியீட்டை நீங்கள் தட்டச்சு செய்ய வேண்டும் app.component.html உங்கள் பயன்பாட்டில் படிவம்-புலம் கூறுகளைப் பயன்படுத்த கோப்பு.
படிவக் கட்டுப்பாடுகள்
பெயர்
வழக்கம் போல், நீங்கள் இறக்குமதி செய்ய வேண்டும் MatFormFieldModule மற்றும் MatInputModule அவற்றைச் சேர்க்கவும் இறக்குமதி: [] பிரிவு அமைந்துள்ளது app.module.ts கோப்பு. மேலே உள்ள குறியீடு பொதுவாக “முதல் பெயர்”, “கடைசி பெயர்” போன்ற பெயர்களை உள்ளிட பயன்படுகிறது. நீங்கள் வேலிடேட்டர்களைப் பயன்படுத்தலாம் மற்றும் ஒரு புலத்தை கட்டாயமாக்கலாம். எடுத்துக்காட்டாக, நீங்கள் அதை மின்னஞ்சல் புலத்திற்கு பயன்படுத்தலாம். கடவுச்சொற்களுக்கான உரையை நீங்கள் மறைக்கலாம் அல்லது மறைக்கலாம். உங்கள் குறிப்புக்கு, கீழே உள்ள குறியீட்டைப் பாருங்கள்:
உங்கள் மின்னஞ்சலை உள்ளிடுக {{getErrorMessage ()} your உங்கள் கடவுச்சொல்லை உள்ளிடுக {{மறைக்கவா? 'visibility_off': 'தெரிவுநிலை'}}உங்கள் app.component.css கோப்பு, நீங்கள் பின்வரும் குறியீட்டைச் சேர்க்க வேண்டும்:
. எடுத்துக்காட்டு-கொள்கலன் {திணிப்பு-இடது: 50px}இப்போது, உங்கள் app.component.ts கோப்பு, நீங்கள் இறக்குமதி செய்ய வேண்டும் படிவம் கட்டுப்பாடு மற்றும் சரிபார்ப்பவர்கள் இருந்து @ கோண / வடிவங்கள் அடைவு.
'@ கோண / படிவங்களிலிருந்து' {FormControl, Validators import ஐ இறக்குமதி செய்கபின்வரும் வகுப்பினுள் பிழையைக் காட்ட நீங்கள் உரையைச் சேர்க்க வேண்டும்.
ஏற்றுமதி வகுப்பு AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {இதைத் தரவும். Email.hasError ('required') 'நீங்கள் ஒரு மதிப்பை உள்ளிட வேண்டும்': this.email.hasError ('மின்னஞ்சல்')? 'செல்லுபடியாகும் மின்னஞ்சல் அல்ல': ''} hide = true}மேலே உள்ள நடைமுறையைப் பற்றி குறிப்பிடுகையில், பின்வரும் குறியீட்டை உங்கள் தட்டச்சு செய்ய வேண்டும் app.module.ts தேவையான தொகுதிகள் இறக்குமதி செய்ய கோப்பு.
'@ கோண / படிவங்களிலிருந்து' {FormsModule, ReactiveFormsModule import இறக்குமதி செய்க {Matular / பொருள் 'பின்னர், இந்த தொகுதிகளை நீங்கள் சேர்க்க வேண்டும் இறக்குமதி: [] பிரிவு.
- ரேடியோ பட்டன்
ரேடியோ பொத்தான்கள் பொதுவாக வெவ்வேறு விருப்பங்களில் ஒரு தேர்வைத் தேர்ந்தெடுக்கப் பயன்படுகின்றன. குறிப்புக்காக பின்வரும் குறியீட்டை நீங்கள் பார்க்கலாம்.
க்கு app.component.html கோப்பு,
பாலினம்
ஆண் பெண்
க்கு app.component.css கோப்பு,
mat-radio-button {திணிப்பு-இடது: 50px}இப்போது, நீங்கள் இறக்குமதி செய்ய வேண்டும் MatRadioModule அதை சேர்க்கவும் இறக்குமதி: [] பிரிவு அமைந்துள்ளது app.module.ts கோப்பு.
பின்னர், வெளியீட்டைக் காண்பிக்க உங்கள் திட்டத்திற்கு சேவை செய்ய வேண்டும்.
முன்னோக்கி நகரும்போது, கோண பொருள் சி.டி.கே பற்றி விவாதிப்பேன்.
கோண பொருள் சி.டி.கே.
சி.டி.கே, என்றும் அழைக்கப்படுகிறது உபகரண தேவ் கிட் , ஒரு நூலகம் முன் நடத்தைகள் கோணப் பொருளில், இது பொதுவானவற்றைச் செயல்படுத்தும் கருவிகளின் தொகுப்பாகும் தொடர்பு முறைகள் மற்றும் பயன்பாட்டு அம்சங்கள் . இது பொருள் வடிவமைப்பிற்கு குறிப்பிட்ட எந்த ஸ்டைலிங் இல்லை. சிடிகேவின் உதாரணத்தைப் பார்ப்போம்.
- உரை புலம்
உரை புலம் கூறு உரை உள்ளீட்டு புலங்களுடன் பணியாற்றுவதற்கான பயன்பாடுகளை வழங்குகிறது. உள்ளீடுகளின் அளவை மாற்ற உரை புலத்தில் சி.டி.கே கூறுகளைப் பயன்படுத்தலாம். அதை எவ்வாறு செயல்படுத்தலாம் என்பதற்கான எடுத்துக்காட்டைப் பார்ப்போம்.
க்கு app.component.html கோப்பு,
கோண பொருள் சி.டி.கே.
எழுத்துரு அளவு 10px 12px 14px 16px 18px 20px உரைநடையை தானியக்கமாக்கு
அதற்காக app.component.ts கோப்பு, நீங்கள் முதலில் தேவையான கூறுகளை இறக்குமதி செய்ய வேண்டும்.
'@ கோண / சி.டி.கே / உரை-புலம்' இறக்குமதி {NgZone, ViewChild from இலிருந்து '@ கோண / கோர்' இறக்குமதியிலிருந்து {CdkTextareaAutosize import 'rxjs / ஆபரேட்டர்களிடமிருந்துஇப்போது, நீங்கள் பின்வரும் குறியீட்டை வகுப்பிற்குள் தட்டச்சு செய்ய வேண்டும்.
HTML இல் ஒரு வரி முறிவு என்ன
ஏற்றுமதி வகுப்பு AppComponent {கட்டமைப்பாளர் (தனியார் _ngZone: NgZone) {} viewViewChild ('தானியங்குபடுத்து', {நிலையான: தவறான}) தானியங்குபடுத்து: CdkTextareaAutosize தூண்டுதல் மறுஅளவிடல் () {this._ngZone.onStable.pipe (எடுத்துக்கொள்ள (1)). ) = & ampampampgt this.autosize.resizeToFitContent (உண்மை))}}அடுத்து, நீங்கள் இறக்குமதி செய்ய வேண்டும் MatSelectModule அதை சேர்க்கவும் இறக்குமதி: [] பிரிவு அமைந்துள்ளது app.module.ts கோப்பு.
இறுதியாக, வெளியீட்டைக் காண்பிக்க உங்கள் திட்டத்திற்கு சேவை செய்ய வேண்டும்.
இது முடிவு அல்ல, மேலும் கோணப் பொருட்களில் இன்னும் பல கூறுகள் உள்ளன. நீங்கள் அவற்றிலிருந்து குறிப்பிடலாம் அதிகாரப்பூர்வ வலைத்தளம் கோண பொருள்.
இதன் மூலம், எனது வலைப்பதிவை முடிக்க விரும்புகிறேன். கோணப் பொருளின் அடிப்படைகளைப் பற்றி நீங்கள் தெளிவாக இருக்கிறீர்கள் என்று நம்புகிறேன்.இந்த கட்டுரை தொடர்பாக உங்களுக்கு ஏதேனும் சந்தேகங்கள் அல்லது கேள்விகள் இருந்தால், அவற்றை கீழே உள்ள கருத்துகள் பிரிவில் இடுகையிட தயங்க வேண்டாம்.
இந்த வலைப்பதிவிலிருந்து நீங்கள் கற்றுக்கொண்ட அனைத்தையும் நீங்கள் அறிய விரும்பினால், மேலும் பல கோண , மற்றும் உங்கள் வாழ்க்கையை ஒரு திறமையான கோண டெவலப்பரை நோக்கிச் செல்லுங்கள், பின்னர் எங்களுக்காக சேருவதைக் கவனியுங்கள் ' .
எங்களுக்கு ஒரு கேள்வி கிடைத்ததா? இந்த “கோண பொருள்” வலைப்பதிவின் கருத்துகள் பிரிவில் இதைக் குறிப்பிடவும், விரைவில் நாங்கள் உங்களைத் தொடர்புகொள்வோம்.