首頁猿問如何更改 vuetify...

如何更改 vuetify 復選框標簽樣式？

JavaScript

POPMUISE 2023-06-15 16:44:53

你可以添加狀態 const [selectedId, setSelectedId] = useState(null);然后制作一個函數來呈現在這種情況下的指南const renderGuide = ({ item, index }) => { console.log(item) const backgroundColor = item.id === selectedId ? "#FFFFFF" : "#FFFFFF"; return ( <Guide item={item} index={index} onPress={() => setSelectedId(item.id)} style={{ backgroundColor }} /> ); };這樣你就可以訪問由 id 選擇的項目

查看完整描述

3 回答

繁星淼淼

TA貢獻1775條經驗獲得超11個贊

我不確定這是否是正確的方法。但是通過 Vuetify，您還可以使用插槽。

通過這種方式，您可以使用添加標簽并根據需要設置樣式。

<v-checkbox>

<span id="checkboxLabel">Label Content</span>

</template>

</v-checkbox>

<style>

#checkboxLabel {

color: blue;

font-size: 16px;

}

</style>

讓我知道是否還有其他事情！

反對回復 2023-06-15

胡子哥哥

TA貢獻1825條經驗獲得超6個贊

要想用好vue，就得用好slot。它使您更有效率。

? <v-app id="inspire">

? ? <v-container fluid>

? ? ? <v-checkbox v-model="checkbox">

? ? ? ? <template v-slot:label>

? ? ? ? ? <div>

? ? ? ? ? ? I agree that

? ? ? ? ? ? <v-tooltip bottom>

? ? ? ? ? ? ? <template v-slot:activator="{ on }">

? ? ? ? ? ? ? ? <a

? ? ? ? ? ? ? ? ? target="_blank"

? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? @click.stop

? ? ? ? ? ? ? ? ? v-on="on"

? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? Vuetify

? ? ? ? ? ? ? ? </a>

? ? ? ? ? ? ? </template>

? ? ? ? ? ? ? Opens in new window

? ? ? ? ? ? </v-tooltip>

? ? ? ? ? ? is awesome

? ? ? ? ? </div>

? ? ? ? </template>

? ? ? </v-checkbox>

? ? </v-container>

? </v-app>

</div>

new Vue({

? el: '#app',

? vuetify: new Vuetify(),

? data () {

? ? return {

? ? ? checkbox: false,

? ? }

? },

})

</script>

反對回復 2023-06-15

Cats萌萌

TA貢獻1805條經驗獲得超9個贊

Vuetify 對 CSS 具有非常高的特異性，但使用::deep.

在這里，我將復選框和標簽文本的顏色和字體大小設置為相同。這種顏色樣式只會影響未選中的復選框。為了也為選中的復選框（包括狀態之間的動畫）獲得白色，您也應該color="white"添加。v-checkbox

在模板中添加復選框

在這里，color="white"控制選中的復選框的顏色，而不是未選中的。

<v-checkbox

v-model="theModel"

color="white"

label="This text will soon be white"

使用 SCSS，樣式看起來像這樣

使用:deep覆蓋 vuetify 樣式，允許你創建你想要的外觀

.v-input--checkbox::v-deep {

.v-label, .v-icon {

color: white;

font-size: 22px;

}

反對回復 2023-06-15

3 回答
0 關注
305 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何更改 vuetify 復選框標簽樣式？

如何更改 vuetify 復選框標簽樣式？

3 回答

添加回答