2016-12-28 13 views
5

मेरे आयनिक वी 2 ऐप में एक बटन है, इससे कोई फर्क नहीं पड़ता कि मैं किस पाठ में टाइप करता हूं, यह हमेशा पूंजीकृत होता है। मैं सीएसएस-यूटिलिटीज नहीं जोड़ना चाहता, क्योंकि मैंने मिश्रित निचले और ऊपरी केस शब्द जोड़े हैं।कैप्स में आयनिक वी 2 बटन टेक्स्ट

<button ion-button large block color="danger" (click)="openPage($event, 0)"> 
    This is my test Text. 
</button> 

मैं बटन टैग से सभी गुण को दूर करने की कोशिश की है, लेकिन यह काम किया नहीं किया:

यहाँ मेरी कोड है। कोई सुझाव?

उत्तर

10

ऐसा लगता है बटन सीएसएस में पाठ बदलनेअपरकेस लिए सेट है। सीएसएस संपत्ति सेट को ओवरराइड करने के लिए सीएसएस अपने बटन पर text-transform: none; जोड़ें। पाठ बदलने संपत्ति CSS text-transform Property

+0

धन्यवाद, यह काम करता है, मैंने इसे सभी बटनों के लिए app.scss फ़ाइल में वैश्विक रूप से सेट किया है। –

+0

@tom_tom खुशी मैं मदद कर सकता हूं, कृपया इसे सही उत्तर के रूप में चिह्नित करें। – yogur

5

आप Platform Specific Styles उपयोग कर सकते हैं अपने आवेदन में बटन शैली पर

<button ion-button large block color="danger" style="text-transform: none;" (click)="openPage($event, 0)"> 
    This is my test Text. 
</button> 

अधिक जानकारी के लिए:

आपका कोड कुछ इस तरह हो जाता है।

  1. ios: एक iPhone या iPad पर देखना, मोड = 'ios'

    Ionic2 चार प्लेटफार्मों है।

  2. एंड्रॉइड: किसी भी एंड्रॉइड डिवाइस पर देखकर, मोड = 'md'।
  3. विंडोज़: किसी भी विंडोज डिवाइस पर देखकर, मोड = 'wp'।
  4. कोर: उपरोक्त प्लेटफार्मों में से कोई भी फिट नहीं है कोई भी प्लेटफॉर्म सामग्री डिज़ाइन शैलियों, मोड = 'md' का उपयोग करेगा।

मोड शैलियाँ ओवरराइड करना। आप उस वर्ग का उपयोग कर सकते हैं जो शरीर के लिए घटक घटकों में विशिष्ट गुणों को ओवरराइड करने के लिए लागू होता है। इस मामले में आप बटन शैली को ओवरराइड करना चाहते हैं ताकि कोई टेक्स्ट ट्रांसफॉर्म न हो।

यहां कोड को variables.scss फ़ाइल में रखें।नीचे स्क्रॉल तक आप देख अनुभाग "ऐप iOS चर" या "ऐप्लिकेशन सामग्री डिज़ाइन चर"

// Style Android buttons 
.md button { 
    text-transform: none; 
} 

// Style iOS buttons 
.ios button { 
    text-transform: none; 
} 

// Style Windows Phone buttons 
.wp button { 
    text-transform: none; 
} 

अपने अनुप्रयोग प्रसंगयुक्तप्रस्तुतिकरण के बारे में अधिक: Theming your Ionic App
सीएसएस पाठ बदलने संपत्ति के बारे में अधिक: Here

0
अपनेमें निम्न कोड

<button class="removeTextTransform" ion-button large block color="danger" (click)="openPage($event, 0)"> 
    This is my test Text. 
</button> 

जोड़ें:

नीचे के रूप में अपने टेम्पलेट परिवर्तित करें: जब भी आप को दूर करने के पाठ अपने आयनिक बटन से बदलना चाहते हैं

.removeTextTransform { 
    text-transform: none; 
} 

उपयोग removeTextTransform वर्ग।

3

variables.scss

$button-md-text-transform: none; 

डिफ़ॉल्ट रूप से में निम्नलिखित रखो, मूल्य एंड्रॉयड प्लेटफॉर्म के लिए अपरकेस है। इसे किसी भी में बदलें। यह आपके ऐप में प्रत्येक बटन पर लागू होगा।

+1

यह प्रश्न के लिए एक बेहतर उत्तर है, यदि संभव हो तो किसी भी परिदृश्य में इनलाइन शैली का उपयोग करने से बचें। – Chumillas

संबंधित मुद्दे