言語のデザインを画像のデザインみたいにしたいです。
現在、for文で回して、その単語を一個一個表示しているのと趣味みたいに一つの枠に全て表示しているものがあります。
言語はfor文で一つ一つ回してスポーツみたいに一個づつ表示したいのでスポーツで使っているスタイルを適応すると border-radiusを使っているので角が歩くなってしまいます。丸くならずに一個一個表示したいのですがどうしたらいいのでしょうか?
大変ざっくりとした質問で申し訳ないですが、わかる方がいましたら教えて欲しいです。よろしくお願いいたします。
<div class="detail"> <p class="detail_title">スポーツ</p> <div v-if="user.sports.length > 0" class="chips"> <profile-chip v-for="sportin user.sports" :text="`${sport.name}`" :key="sport.id" /> </div> <div class="detail"> <p class="detail_title">言語</p> <div v-if="user.languages.length > 0" class="chips" > <user-chip v-for="l in user.languages" :text="`${l.languag.name}:${l.level.name}`" :key="l.language.id" /> </div> <p v-else class="detail_content"> 空欄です </p> </div> <style lang="scss" scoped> .detail { padding: 8px 0px; margin: 0 24px; &_title { font-style: normal; font-weight: 600; font-size: 10px; line-height: 14px; color: #525e6d; margin-bottom: 8px; } &_content { background: #f0f2f5; border-radius: 4px; padding: 8px; font-style: normal; font-weight: normal; font-size: 14px; line-height: 20px; color: #4d4452; } } .chips { display: flex; flex-wrap: wrap; }
<template> <div class="chip"> <p>{{ text }}</p> </div> </template> <script lang="ts"> import { Component, Vue, Prop } from 'vue-property-decorator' @Component export default class UserChip extends Vue { @Prop({ type: String, required: true }) text: string } </script> <style lang="scss" scoped> .chip { margin-right: 8px; margin-bottom: 8px; padding: 6px 12px; background: #f0f2f5; border-radius: 13px; box-sizing: border-box; max-width: 388px; p { text-overflow: ellipsis; font-style: normal; font-weight: normal; line-height: 14px; color: #000000; white-space: nowrap; overflow: hidden; } } </style>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/15 09:25
2020/04/15 09:27
2020/04/15 09:31
2020/04/15 09:39
2020/04/15 09:41
2020/04/15 09:47
2020/04/15 09:57
2020/04/15 10:49