Вопрос о Blazor относительно ширины в процентах в зависимости от свойства - PullRequest
Новая
       35

Вопрос о Blazor относительно ширины в процентах в зависимости от свойства

0 голосов
/ 04 апреля 2020

У меня есть вопрос относительно моей ширины для моей рейтинговой системы на моем сайте Blazor. Я хочу, чтобы звёзды основывались на рейтинге, который имеет мой mov ie. Например:

enter image description here

Теперь я не знаю, как использовать мое свойство mov ie .Rating для установки ширины звезд. Я хочу, чтобы он тоже выглядел так, но понимаю, что он не работает так.

div class="rating-upper" style="width:" @movie.Rating"%">

Мой код выглядит так (сейчас я поставил 90%, но, очевидно, хочу вместо этого мой рейтинг):

enter image description here

Благодарен за любую помощь и впервые публикую здесь, так как я не могу найти никакой информации по этому вопросу. Новое в Blazor и программировании в целом.

1 Ответ

0 голосов
/ 04 апреля 2020

Я бы лично использовал для этого CSS clip-path и структурировал бы вещи немного иначе, чем вы в настоящее время.

Сначала вот мой CSS

    .rating {        
        --rating: 0;
        --percent: calc(var(--rating) * 20%);
        position: relative;
        display: inline;
    }
    .rating::after {        
        position: absolute;
        content:"⭐⭐⭐⭐⭐";
        clip-path: polygon(0 0, var(--percent) 0, var(--percent) 100%, 0 100%);
        background-color: transparent;
        /* Purely cosmetic to align these stars vertically */
        top: -0.2rem; 
    }
    .rating::before {
        position: absolute;
        left: calc(100%);
        content:"⭐⭐⭐⭐⭐";
        opacity: 0.2;
        /* Purely cosmetic to align these stars vertically */
        top: -0.2rem;
    }

И некоторый пример Razor 

<label class="rating" style=@($"--rating: {Rating}")>Rating : </label>

Объяснение

Класс «рейтинг» имеет до и после, оба добавляют набор звездочек к контенту, они располагаются так, чтобы перекрываться с фоном установите низкую непрозрачность и передний план, используя clip-path, чтобы «замаскировать» звезды на требуемую ширину.

Процентная ширина рассчитывается из переменной CSS --rating, которая применяется к label используя синтаксис Razor.

Демонстрацию можно посмотреть здесь: https://blazorfiddle.com/s/b6jpqbhe

...