Vuetify v-btn text behavior
P粉596191963
P粉596191963 2024-03-19 16:20:35
0
1
495

我有以下一组按钮:

<template>
    <v-card
        color="secondary"
        elevation="6"
    >
        <v-card-title>
            <v-spacer></v-spacer>
            Three buttons
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
            <v-row>
                <v-col cols="12" sm="4" v-for="button in buttons" :key="button.id">
                    <v-btn color="primary" x-large block>
                        <span style="word-break: normal !important;">{{button.text}}</span>
                    </v-btn>
                </v-col>
            </v-row>
        </v-card-text>
    </v-card>
</template>
<script>
export default {
    data () {
        return {
            //This is not a production code. The button texts are obtained via api and their length is variable
            buttons: [
                {id:1, text: "I'm a button"},
                {id:2, text: "I'm another button. Bla, bla, bla, bla"},
                {id:3, text: "I'm a button too"}
            ]
        }
    },
}
</script>

在此示例中,文本是硬编码的,但实际上我是从 API 获取文本的。它的长度是可变的,我无法事先知道。我需要:

  1. 文本永远不会像按钮 2 中那样溢出按钮的空间。
  2. 让按钮文本使用它需要的行。 1,2,10...取决于它的长度。 始终垂直增长并带有换行符,这将授予 css 属性“word-break:正常;”
  3. 按钮的宽度保持固定,占据列的整个宽度,正如“block”属性所导致的那样。

所有这些都必须在桌面、平板电脑和移动视图中实现。

您可以在这里进行测试。

P粉596191963
P粉596191963

reply all(1)
P粉510127741

Try this:

.v-btn__content {
  white-space: normal;
  flex: auto;
}

and:

.v-btn {
  min-height: 52px;
  height: 100% !important;
}
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!