Glif belgining rangini o'zgartiring

Standart glif simvollari juda zerikarli

https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

The following code works, but instead of a filled in star with black, is there a way to make it some other color, e.g., orange?

Bundan tashqari, tugmalarda ishlatish uchun yuklab olish uchun yanada qiziqarli piktogramma to'plami bormi?

const glyphStarEmpty = 'glyphicon glyphicon-star-empty';
const glyphStarFull = 'glyphicon glyphicon-star';

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false,
      currentGlyph: glyphStarEmpty 
    };
    this.toggleChecked = this.toggleChecked.bind(this);
  }

  toggleChecked() {
    if(this.state.currentGlyph == glyphStarEmpty){
        this.setState({
        currentGlyph : glyphStarFull
        })
    }
    else{
        this.setState({
            currentGlyph : glyphStarEmpty
        })
    }

    this.setState({    
      checked: !this.state.checked
    });
  }

  render() {

    return (      
        <button className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
      );
  }
}
0
nega uni CSS bilan bezovta qila olmaysiz?
qo'shib qo'ydi muallif vsync, manba

6 javoblar

Atrofdagi javoblar yordamida, yechim aniq bo'ldi. Bu eng mukammal kontrast uchun tekshirilmagan holat uchun toza oq ichki (yoki hatto yuqoriga/pastga uchburchak uchun kul yordamida stackoverflow rang sxemasi kabi) bilan qora chegara istayman, chunki u mukammal emas, lekin buni o'zingiz tuzatish:

render() {
    if(!this.state.checked)
    {
    return (      
        <button className={glyphStarFull} onClick={this.toggleChecked}></button>
      );
    }
    else
    {
       return (      
        <button style={{ color: 'orange', textShadow: '0 0 1px black' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
0
qo'shib qo'ydi

Buni oddiy CSS yordamida qilishingiz mumkin



.icon-some {
 color: orange;
}
0
qo'shib qo'ydi
.CSS yo'llari yaxshi ishlaydi. Rahmat.
qo'shib qo'ydi muallif Ivan, manba
belgining chegarasini qora ushlab turish va ichki qismini to'q sariq rang bilan to'ldirish uchun bir usul bormi? Men kontrastni ko'proq xohlayman.
qo'shib qo'ydi muallif Ivan, manba
Yo'q, gliflarda yo'q, ular odatiy shriftlarga o'xshash. Chegara olish uchun matn shadow yoki matnni zarba kabi biror narsa qilmaguningizcha.
qo'shib qo'ydi muallif Dejan.S, manba
Agar kimdir sizga yordam bergan bo'lsa, Ivon javob beradi.
qo'shib qo'ydi muallif Dejan.S, manba

Wow, why so complicated? Just add some CSS inside the <head> tag:



0
qo'shib qo'ydi
.CSS yo'llari yaxshi ishlaydi. Rahmat.
qo'shib qo'ydi muallif Ivan, manba
belgining chegarasini qora ushlab turish va ichki qismini to'q sariq rang bilan to'ldirish uchun bir usul bormi? Men kontrastni ko'proq xohlayman.
qo'shib qo'ydi muallif Ivan, manba
belgilarni o'zlari uchun emas, balki ularni display: inline-block; dan foydalaning va (masalan, border: 1px solid red ) bilan chegarani qo'shing. u chegara rangini belgilang (ortiqcha fon rangi qo'shishingiz mumkin, masalan, background: # fc9; )
qo'shib qo'ydi muallif Johannes, manba

Quyidagi kabi CSS rangini kiritishingiz mumkin:

HTML


CSS

.orange {color: orange;}
0
qo'shib qo'ydi
.CSS yo'llari yaxshi ishlaydi. Rahmat.
qo'shib qo'ydi muallif Ivan, manba
belgining chegarasini qora ushlab turish va ichki qismini to'q sariq rang bilan to'ldirish uchun bir usul bormi? Men kontrastni ko'proq xohlayman.
qo'shib qo'ydi muallif Ivan, manba

Inline uslubini ishlatishingiz mumkin:

<button style={{ color: 'orange' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>

Qora tasavvurga qo'shimcha ravishda, quyidagilarni bajaring:

<button style={{ color: 'orange', textShadow: '0 0 1px black' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
0
qo'shib qo'ydi
Rahmat, bu tabiiy ko'rinadi. Bir savol, qora belgining chegarasini ushlab turish va ichini to'q sariq bilan to'ldirishning bir usuli bormi? Men kontrastni ko'proq xohlayman. To'liq qora yulduz "tekshirilmagan" va to'liq to'q sariq yulduz tekshiriladi.
qo'shib qo'ydi muallif Ivan, manba
Deyarli. tekshirilgan yulduzlarda qoldiq to'q sariq rang mavjud. Men faqat qora chegara bilan tekshirilmagan tekis oq yulduzni istayman va porlab turgan apelsin tekshirilgandir.
qo'shib qo'ydi muallif Ivan, manba
siz biron bir eski CSS uslubini bajarishingiz mumkin, men javobni yangiladim
qo'shib qo'ydi muallif Patrick Hund, manba

Siz foydalanishingiz mumkin bo'lgan boshqa piktogramma shriftni ajoyib . " Men, ko'pgina veb-saytlar uchun ushbu piktogramlardan foydalandim, ranglarni o'zgartirib, boshqa a'zolar sizdan oldin aytganidek, ba'zi CSS-larga o'zgartirish kiritmoqchiman

0
qo'shib qo'ydi
Qiziqarli. Ularga qaraymiz. Rahmat.
qo'shib qo'ydi muallif Ivan, manba
Hech qanday muammo mening olov
qo'shib qo'ydi muallif Radu, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb

ReactJS & ReactNative Uzbekistan
ReactJS & ReactNative Uzbekistan
81 ishtirokchilar

Guruh ReactJS va ReactNative bo'yicha muloqot qilish uchun ochilgan. Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @ngTashkent @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs