buefy маркер, чтобы сделать его звездочкой, а не кружком

я хотел изменить значок круга на значок звездочки. Может ли кто-нибудь помочь мне, как я могу изменить его на значок звездочки, а не на кружок? Я попытался поместить содержимое в CSS, но он не работал. Спасибо.

Вы также можете получить доступ к коду здесь: https://codesandbox.io/s/festive-silence-kjbkc?file=/src/App.vue:0-2304

Вот код:

<template>
  <section>
    <b-steps
      v-model="activeStep"
      :animated="isAnimated"
      :rounded="isRounded"
      :has-navigation="hasNavigation"
      :icon-prev="prevIcon"
      :icon-next="nextIcon"
      :label-position="labelPosition"
      :mobile-mode="mobileMode"
    >
      <b-step-item step="1" label="Account" :clickable="isStepsClickable">
        <h1 class="title has-text-centered">Account</h1>
        Lorem ipsum dolor sit amet.
      </b-step-item>

      <b-step-item
        step="2"
        label="Profile"
        :clickable="isStepsClickable"
        :type="{ 'is-success': isProfileSuccess }"
      >
        <h1 class="title has-text-centered">Profile</h1>
        Lorem ipsum dolor sit amet.
      </b-step-item>

      <b-step-item
        step="3"
        :visible="showSocial"
        label="Social"
        :clickable="isStepsClickable"
      >
        <h1 class="title has-text-centered">Social</h1>
        Lorem ipsum dolor sit amet.
      </b-step-item>

      <b-step-item
        :step="showSocial ? '4' : '3'"
        label="Finish"
        :clickable="isStepsClickable"
        disabled
      >
        <h1 class="title has-text-centered">Finish</h1>
        Lorem ipsum dolor sit amet.
      </b-step-item>

      <template v-if="customNavigation" #navigation="{ previous, next }">
        <b-button
          outlined
          type="is-danger"
          icon-pack="fas"
          icon-left="backward"
          :disabled="previous.disabled"
          @click.prevent="previous.action"
        >
          Previous
        </b-button>
        <b-button
          outlined
          type="is-success"
          icon-pack="fas"
          icon-right="forward"
          :disabled="next.disabled"
          @click.prevent="next.action"
        >
          Next
        </b-button>
      </template>
    </b-steps>
  </section>
</template>

<script>
export default {
  data() {
    return {
      activeStep: 0,

      showSocial: false,
      isAnimated: true,
      isRounded: true,
      isStepsClickable: false,

      hasNavigation: true,
      customNavigation: false,
      isProfileSuccess: false,

      prevIcon: "chevron-left",
      nextIcon: "chevron-right",
      labelPosition: "bottom",
      mobileMode: "minimalist",
    };
  },
};
</script>

person Claud    schedule 11.05.2021    source источник
comment
Если вы поменяетесь на звездочку, как будут отображаться числа? или звезды вокруг числа?   -  person Abhinav Kumar    schedule 11.05.2021
comment
извините да это должно быть около цифр   -  person Claud    schedule 11.05.2021


Ответы (1)


Вы можете добавить значок вместо круга, но он не показывает шаги, а просто каждый значок для каждого шага.

<template>
<b-steps>
    <b-step-item label="Account" icon="account-key"></b-step-item>
    <b-step-item label="Profile" icon="account"></b-step-item>
    <b-step-item label="Social" icon="account-plus"></b-step-item>
</b-steps>

Вот пример.

person Abhinav Kumar    schedule 11.05.2021