కోణీయంలోని UI / UX భాగాలు అంటారు కోణీయ పదార్థాలు. వాళ్ళుకోణీయ అనువర్తనాల పనితీరుకు సహాయపడండి సమర్థవంతంగా . అయినప్పటికీ, మీకు వాటి గురించి ఇంకా తెలియకపోతే, కోణీయ పదార్థాలను వివరంగా తెలుసుకోవడానికి మీకు సహాయపడే ఒక కథనం ఇక్కడ ఉంది. అలాగే, టికోణీయ గురించి లోతైన జ్ఞానం పొందండి, నమోదు చేయడాన్ని పరిశీలించండి ' ఎడురేకా నుండి.
ఈ వ్యాసంలో, నేను ఈ క్రింది అంశాలపై వెళ్తాను:
కోణీయ పదార్థాల పరిచయం
పదార్థాలు గూగుల్ 2014 లో అభివృద్ధి చేసిన డిజైన్ భాషగా పరిచయం చేయబడింది. మెటీరియల్ డిజైన్ ఒక సాధనంఫ్రంట్ ఎండ్ ఫ్రేమ్‌వర్క్‌ల కోసం, ఇది మీకు సహాయపడుతుంది దృశ్య , కదలిక , మరియు పరస్పర చర్య రూపకల్పన. ఇది వేర్వేరు పరికరాలు మరియు విభిన్న స్క్రీన్ పరిమాణాలలో స్వీకరించడానికి మీకు సహాయపడుతుంది. మొదట, ఈ అనువర్తనాలను మరింత చేయడానికి AngularJS కు ట్యాగ్ చేయబడింది ఆకర్షణీయమైన మరియు ప్రదర్శించండి వేగంగా . అప్పుడు, గూగుల్ మొదటి నుండి కోడ్‌ను పూర్తిగా తిరిగి వ్రాసి, JS ను తొలగించింది. , మరియు దీనికి పేరు పెట్టారు సెప్టెంబర్ 2016 లో. తరువాత, గూగుల్ మెటీరియల్ డిజైన్‌ను కోణీయానికి ట్యాగ్ చేసింది, ఇది ఉపయోగిస్తుంది , మరియు దీనికి కోణీయ పదార్థాలు అని పేరు పెట్టారు.
కోణీయ పదార్థాలు లేదా యూజర్-ఇంటర్ఫేస్ (UI) భాగాలు మీ అప్లికేషన్‌ను డిజైన్ చేయడానికి మీకు సహాయపడతాయి నిర్మాణాత్మక పద్ధతిలో. వారు వినియోగదారులను ఆకర్షిస్తారు మరియు దానిని తయారు చేస్తారు యాక్సెస్ చేయడం సులభం మీ అనువర్తనంలో ఉన్న అంశాలు లేదా భాగాలు. ప్రత్యేకమైన వాటితో ఆకర్షణీయమైన పద్ధతిలో మీ అనువర్తనాలను రూపొందించడంలో కూడా ఇవి సహాయపడతాయి శైలులు మరియు ఆకారాలు . ఈ భాగాలు మీ అనువర్తనాన్ని మరింతగా చేయడంలో సహాయపడతాయి స్థిరమైన , వేగంగా , బహుముఖ మరియు డిజైన్ కూడా ప్రతిస్పందించే వెబ్‌సైట్లు.
కోణీయ మెటీరియల్ సంస్థాపన
ఇప్పుడు, కోణీయ పదార్థాలను ఎలా ఇన్‌స్టాల్ చేయాలో శీఘ్ర ట్యుటోరియల్‌తో ప్రారంభిద్దాం. మొదట మొదటి విషయాలు, మీరు మీ సిస్టమ్‌లో కోణీయ ఇన్‌స్టాల్ చేశారని నిర్ధారించుకోండి. మీకు కోణీయత తెలియకపోతే, ఆన్ లింక్‌ను చూడండి . మీరు ప్రతిదీ సెటప్ చేసిన తర్వాత, మీరు ఈ క్రింది ఆదేశాన్ని ఉపయోగించి మీ ప్రాజెక్ట్‌కు కోణీయ పదార్థాలను జోడించవచ్చు:
యాడ్ @ కోణీయ / పదార్థం
మొదట, ముందుగా నిర్మించిన థీమ్ పేరు లేదా అనుకూల థీమ్‌ను ఎంచుకోమని ఇది మిమ్మల్ని అడుగుతుంది.
మీరు మీ అప్లికేషన్‌ను స్టైల్ చేయడానికి డిఫాల్ట్ థీమ్ అయిన “ఇండిగో / పింక్” ప్రీబిల్ట్ థీమ్‌ను ఎంచుకోవాలి. మీరు “అనుకూల” థీమ్‌ను కూడా ఎంచుకోవచ్చు, తద్వారా మీరు అన్ని సాధారణ శైలులను కలిగి ఉన్న మీ థీమ్ ఫైల్‌లను అనుకూలీకరించవచ్చు.
తరువాత, ఇది మిమ్మల్ని సెటప్ చేయమని అడుగుతుంది హామర్ జెఎస్ . హామర్జెఎస్ ఒక ప్రసిద్ధ లైబ్రరీ, ఇది ప్రధానంగా కోణీయ అనువర్తనంలో ఉపయోగించబడుతుంది. ఇది స్వైప్, పాన్, చిటికెడు, రొటేట్ వంటి టచ్ హావభావాలకు మద్దతునిస్తుంది, ముఖ్యంగా మొబైల్ అనువర్తనాల్లో.
మీరు “అవును” లేదా “లేదు” ఎంచుకోవచ్చు. మీరు మీ అప్లికేషన్‌ను మొబైల్‌లలో ఉపయోగించినప్పుడు హామర్జెఎస్ ఉపయోగపడుతుంది. మొబైల్స్ టచ్ డిస్ప్లేలను అందిస్తున్నందున, ఈ హావభావాలు మరింత ఉపయోగకరంగా ఉంటాయి మరియు మీ మొబైల్ అనువర్తనంలో అధునాతనంగా కనిపిస్తాయి.
మీరు మీ ఎంపికను ఎంచుకున్న తర్వాత, తరువాత అది సెటప్ చేయమని అడుగుతుంది బ్రౌజర్ యానిమేషన్లు కోణీయ పదార్థం కోసం.
మీరు “అవును” ఎంచుకోవాలి, తద్వారా మీరు మీ అనువర్తనంలో యానిమేషన్లను ఉపయోగించవచ్చు. కోణీయ యానిమేషన్లు మీ అనువర్తనాన్ని మరింత ఆహ్లాదకరంగా మరియు ఉపయోగించడానికి సులభతరం చేస్తాయి. ఇది మీ అనువర్తనం మరియు వినియోగదారు అనుభవాన్ని మెరుగుపరుస్తుంది, ఇది వినియోగదారుల దృష్టిని ఆకర్షిస్తుంది.
తదనంతరం, ఇది మీ అప్లికేషన్‌లో కోణీయ పదార్థాలను ఇన్‌స్టాల్ చేస్తుంది.
కోణీయ పదార్థ భాగాలు
ఇంతకు ముందు చెప్పినట్లుగా, కోణీయ మెటీరియల్ భాగాలు తప్ప మరొకటి కాదు UI / UX డిజైన్ భాగాలు. అవి ఫారం నియంత్రణలు, నావిగేషన్, బటన్లు & సూచికలు, పాపప్‌లు మరియు మరెన్నో వంటి విభిన్న శ్రేణి భాగాలను కలిగి ఉంటాయి. మెటీరియల్ డిజైన్ స్పెసిఫికేషన్ ప్రకారం నమూనాలను అమలు చేయడానికి ఈ భాగాలు మీకు సహాయపడతాయి.
ముందుకు వెళుతున్నప్పుడు, మీ కోణీయ అనువర్తనంలో ఈ భాగాలను ఎలా అమలు చేయాలో కొన్ని ఉదాహరణలు చూద్దాం.
నావిగేషన్
మొదట, నేను నావిగేషన్‌లోని భాగాలను చర్చిస్తాను.
- ఉపకరణపట్టీ
మీరు ఈ క్రింది కోడ్‌ను టైప్ చేయాలి app.component.html మీ అప్లికేషన్‌లో టూల్‌బార్ భాగాన్ని ఉపయోగించడానికి ఫైల్.
కోణీయ మెటీరియల్ ట్యుటోరియల్ కోణీయ పదార్థం నుండి కంటైనర్, ఇది శీర్షికలు మరియు శీర్షికల కోసం ఉపయోగించబడుతుంది. యొక్క రంగు ఉపయోగించి కంటైనర్ మార్చవచ్చు రంగు ఆస్తి.అప్రమేయంగా, టూల్‌బార్లు ప్రస్తుత థీమ్ ఆధారంగా తటస్థ నేపథ్య రంగును ఉపయోగిస్తాయి, అనగా కాంతి లేదా చీకటి.మీరు మూడు డిఫాల్ట్ థీమ్లను ఎంచుకోవచ్చు: 'ప్రాథమిక' , ‘యాస’ , లేదా ‘హెచ్చరించు’ .ఈ ఉపకరణపట్టీని ఉపయోగించడానికి, మీరు దీన్ని మొదట దిగుమతి చేసుకోవాలి app.module.ts కింది ఆదేశాన్ని ఉపయోగించి కోణీయ పదార్థాల నుండి ఫైల్:
'@ కోణీయ / పదార్థం' నుండి {MatToolbarModule import దిగుమతి చేయండితరువాత, మీరు ఈ మాడ్యూల్‌ను కూడా జోడించాలి దిగుమతులు: [] లో ఉన్న విభాగం app.module.ts ఫైల్.
దిగుమతులు: [బ్రౌజర్ మాడ్యూల్, యాప్‌రౌటింగ్ మాడ్యూల్, బ్రౌజర్అనిమేషన్స్ మాడ్యూల్, మాట్‌టూల్‌బార్ మాడ్యూల్],
మాట్-టూల్ బార్ కోసం, మీరు “ మాట్‌టూల్‌బార్ మాడ్యూల్ ”.
ఇప్పుడు, కింది ఆదేశాన్ని ఉపయోగించి మీ ప్రాజెక్ట్‌కు సేవ చేద్దాం:
సర్వ్ -o
ఇది క్రింద చూపిన విధంగా మీ సిస్టమ్ యొక్క డిఫాల్ట్ బ్రౌజర్‌లో మీ ప్రాజెక్ట్ను తెరుస్తుంది:
మీకు నచ్చిన విధంగా టూల్ బార్ యొక్క రంగును మార్చాలనుకుంటే, మీరు దీన్ని CSS స్టైల్షీట్ సహాయంతో చేయవచ్చు. నేను మీకు ఒక ఉదాహరణ చూపిస్తాను.
మొదట, మీరు చెరిపివేయాలి రంగు నుండి ఆస్తి కంటైనర్ ఆపై, కింది వాటిని టైప్ చేయండి CSS లో కోడ్ app.component.css ఫైల్.
mat-toolbar {background-color: / * color-of-your-choice * / color: / * text-color * /}ఇప్పుడు, ఫలితాన్ని చూడటానికి మీ ప్రాజెక్ట్‌కు సేవ చేయండి.
- మెను
తరువాత, నేను మెనూ కాంపోనెంట్ గురించి చర్చిస్తాను. మీరు ఈ క్రింది కోడ్‌ను మీలో టైప్ చేయాలి app.component.html ఫైల్.
కోణీయ మెటీరియల్ ట్యుటోరియల్ మెనూ సెట్టింగుల సహాయందీనిపై కొన్ని స్టైలింగ్‌ను చేర్చుదాం మెను బటన్. మీరు ఈ క్రింది కోడ్‌ను మీలో టైప్ చేయాలి app.component.css ఫైల్.
.స్పేస్ {ఫ్లెక్స్: 1 1 ఆటో} .బిటిఎన్ {వెడల్పు: 100 పిక్స్ ఎత్తు: 40 పిక్స్ ఫాంట్-సైజు: పెద్ద బోర్డర్-వ్యాసార్థం: 10 పిక్స్ బోర్డర్: 3 పిక్స్ ఘన # 113 సి 89 నేపథ్య-రంగు: లైట్‌కోరల్}తరగతి = ”స్థలం” “ఉపకరణపట్టీ పేరు” మరియు “మెనూ ఎంపిక” మధ్య అంతరాన్ని జోడించడానికి ఉపయోగిస్తారు.
ఒకవేళ, మీకు CSS స్టైల్షీట్ గురించి తెలియదు, మీరు మా బ్లాగును చూడవచ్చు లోతుగా పొందడానికి.
ఉపకరణపట్టీ వలె, ఉపయోగించడానికి మరియు కంటైనర్లు, దిగుమతి చేయడానికి మీరు పైన చెప్పిన విధానాన్ని అనుసరించాలి మాట్మెను మాడ్యూల్ మరియు మాట్‌బటన్ మాడ్యూల్ నుండి కోణీయ పదార్థం మరియు వాటిని జోడించండి దిగుమతులు: [] విభాగం ఉంది app.module.ts ఫైల్.
అవుట్పుట్ను ప్రదర్శించడానికి మీ ప్రాజెక్ట్ను ఇప్పుడు సర్వ్ చేయండి.
ఫారమ్ నియంత్రణలు
ఇప్పుడు, ఫారం కంట్రోల్‌లోని భాగాలను చర్చిస్తాను.
- ఫారం ఫీల్డ్
పేరు సూచించినట్లుగా, వినియోగదారు ఇచ్చిన ఇన్‌పుట్‌ల కోసం ఫారం-ఫీల్డ్ ఉపయోగించబడుతుంది. ఇది సాధారణంగా ఒక అప్లికేషన్ లేదా వెబ్‌సైట్‌లో వినియోగదారు నమోదు కోసం ఉపయోగించబడుతుంది.
మీరు ఈ క్రింది కోడ్‌ను టైప్ చేయాలి app.component.html మీ అప్లికేషన్‌లో ఫారం-ఫీల్డ్ భాగాన్ని ఉపయోగించడానికి ఫైల్.
ఫారమ్ నియంత్రణలు
పేరు
ఎప్పటిలాగే, మీరు దిగుమతి చేసుకోవాలి MatFormFieldModule మరియు MatInputModule మరియు వాటిని జోడించండి దిగుమతులు: [] లో ఉన్న విభాగం app.module.ts ఫైల్. పై కోడ్ సాధారణంగా “మొదటి పేరు”, “చివరి పేరు” వంటి పేర్లను ఇన్పుట్ చేయడానికి ఉపయోగిస్తారు. మీరు వాలిడేటర్లను కూడా ఉపయోగించవచ్చు మరియు ఫీల్డ్‌ను తప్పనిసరి చేయవచ్చు. ఉదాహరణకు, మీరు దీన్ని ఇ-మెయిల్ ఫీల్డ్ కోసం ఉపయోగించవచ్చు. మీరు పాస్‌వర్డ్‌ల కోసం వచనాన్ని దాచవచ్చు లేదా దాచవచ్చు. మీ సూచన కోసం, దిగువ కోడ్‌ను చూడండి:
మీ ఇమెయిల్‌ను నమోదు చేయండి {{getErrorMessage ()} your మీ పాస్‌వర్డ్‌ను నమోదు చేయండి {{దాచాలా? 'visibility_off': 'దృశ్యమానత'}}మీలో app.component.css ఫైల్, మీరు ఈ క్రింది కోడ్‌ను జోడించాలి:
.ఉదాహరణ-కంటైనర్ {పాడింగ్-ఎడమ: 50 పిక్స్}ఇప్పుడు, మీలో app.component.ts ఫైల్, మీరు దిగుమతి చేయాలి ఫారం కంట్రోల్ మరియు వాలిడేటర్లు నుండి @ కోణీయ / రూపాలు డైరెక్టరీ.
'@ కోణీయ / రూపాల' నుండి {FormControl, Validators import దిగుమతి చేయండికింది తరగతి లోపల లోపాన్ని ప్రదర్శించడానికి మీరు వచనాన్ని కూడా జోడించాలి.
ఎగుమతి తరగతి AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? 'మీరు తప్పక విలువను నమోదు చేయాలి': this.email.hasError ('email')? 'చెల్లుబాటు అయ్యే ఇమెయిల్ కాదు': ''} hide = true}పై విధానాన్ని సూచిస్తూ, మీరు ఈ క్రింది కోడ్‌ను మీలో టైప్ చేయాలి app.module.ts అవసరమైన మాడ్యూళ్ళను దిగుమతి చేయడానికి ఫైల్.
'@ కోణీయ / రూపాల' నుండి {FormsModule, ReactiveFormsModule import దిగుమతి {Matular / material 'నుండి దిగుమతి {MatIconModule importతరువాత, మీరు ఈ మాడ్యూళ్ళను జోడించాలి దిగుమతులు: [] విభాగం.
- రేడియో బటన్
రేడియో బటన్లు సాధారణంగా వేర్వేరు ఎంపికలలో ఎంపికను ఎంచుకోవడానికి ఉపయోగిస్తారు. సూచన కోసం మీరు ఈ క్రింది కోడ్‌ను చూడవచ్చు.
కోసం app.component.html ఫైల్,
లింగం
మగ ఆడ
కోసం app.component.css ఫైల్,
mat-radio-button {పాడింగ్-ఎడమ: 50px}ఇప్పుడు, మీరు దిగుమతి చేసుకోవాలి MatRadioModule మరియు దాన్ని జోడించండి దిగుమతులు: [] లో ఉన్న విభాగం app.module.ts ఫైల్.
తరువాత, అవుట్పుట్ను ప్రదర్శించడానికి మీరు మీ ప్రాజెక్ట్ను అందించాలి.
ముందుకు వెళుతున్నప్పుడు, నేను కోణీయ మెటీరియల్ సిడికె గురించి చర్చిస్తాను.
కోణీయ పదార్థం CDK
CDK, అని కూడా పిలుస్తారు భాగం దేవ్ కిట్ , యొక్క లైబ్రరీ ముందే నిర్వచించిన ప్రవర్తనలు కోణీయ పదార్థంలో, ఇది సాధారణమైన సాధనాల సమితి పరస్పర నమూనాలు మరియు అప్లికేషన్ లక్షణాలు . దీనికి మెటీరియల్ డిజైన్‌కు ప్రత్యేకమైన స్టైలింగ్ లేదు. CDK యొక్క ఉదాహరణ చూద్దాం.
- టెక్స్ట్ ఫీల్డ్
టెక్స్ట్ ఫీల్డ్ భాగం టెక్స్ట్ ఇన్పుట్ ఫీల్డ్లతో పనిచేయడానికి యుటిలిటీలను అందిస్తుంది. ఇన్‌పుట్‌ల పరిమాణాన్ని మార్చడానికి మీరు టెక్స్ట్ ఫీల్డ్‌లో CDK భాగాలను ఉపయోగించవచ్చు. దీన్ని ఎలా అమలు చేయాలో ఉదాహరణ చూద్దాం.
కోసం app.component.html ఫైల్,
కోణీయ పదార్థం CDK
ఫాంట్ పరిమాణం 10px 12px 14px 16px 18px 20px టెక్స్ట్ఏరియాను ఆటోసైజ్ చేయండి
కొరకు app.component.ts ఫైల్, మీరు మొదట అవసరమైన భాగాలను దిగుమతి చేసుకోవాలి.
'@ angular / cdk / text-field' దిగుమతి {NgZone, ViewChild from నుండి '@ కోణీయ / కోర్' దిగుమతి {తీసుకోండి r 'rxjs / ఆపరేటర్ల' నుండి {CdkTextareaAutosize importఇప్పుడు, మీరు క్లాస్ లోపల ఈ క్రింది కోడ్‌ను టైప్ చేయాలి.
ప్రారంభకులకు మైక్రోసాఫ్ట్ SQL ట్యుటోరియల్స్
ఎగుమతి తరగతి AppComponent {కన్స్ట్రక్టర్ (ప్రైవేట్ _ngZone: NgZone) {} iew వ్యూచైల్డ్ ('ఆటోసైజ్', {స్టాటిక్: తప్పుడు}) ఆటోసైజ్: CdkTextareaAutosize ట్రిగ్గర్ రీసైజ్ () {this._ngZone.onStable.pipe (తీసుకోండి (1)) .సబ్‌స్క్రయిబ్ (. ) = & ampampampgt this.autosize.resizeToFitContent (true))}}తరువాత, మీరు దిగుమతి చేయాలి MatSelectModule మరియు దాన్ని జోడించండి దిగుమతులు: [] లో ఉన్న విభాగం app.module.ts ఫైల్.
చివరగా, అవుట్పుట్ను ప్రదర్శించడానికి మీరు మీ ప్రాజెక్ట్ను అందించాలి.
ఇది తీర్మానం కాదు మరియు కోణీయ పదార్థాలలో అనేక ఇతర భాగాలు ఉన్నాయి. మీరు వాటిని నుండి సూచించవచ్చు అధికారిక వెబ్‌సైట్ కోణీయ పదార్థం.
దీనితో, నేను నా బ్లాగును ముగించాలనుకుంటున్నాను. కోణీయ పదార్థం యొక్క ప్రాథమిక విషయాల గురించి మీరు స్పష్టంగా ఉన్నారని నేను ఆశిస్తున్నాను.ఈ వ్యాసానికి సంబంధించి మీకు ఏవైనా సందేహాలు లేదా ప్రశ్నలు ఉంటే, వాటిని క్రింది వ్యాఖ్యల విభాగంలో పోస్ట్ చేయడానికి వెనుకాడరు.
మీరు ఈ బ్లాగ్ నుండి నేర్చుకున్నదంతా నేర్చుకోవాలనుకుంటే మరియు దాని గురించి మరింత తెలుసుకోండి కోణీయ , మరియు మీ కెరీర్‌ను నైపుణ్యం కలిగిన కోణీయ డెవలపర్ వైపు చూసుకోండి, ఆపై మా కోసం నమోదు చేసుకోండి ' .
మాకు ప్రశ్న ఉందా? దయచేసి ఈ “కోణీయ పదార్థం” బ్లాగ్ యొక్క వ్యాఖ్యల విభాగంలో పేర్కొనండి మరియు మేము వీలైనంత త్వరగా మిమ్మల్ని సంప్రదిస్తాము.