Progress Bar

Этот плагин делает одно: он создает простой (но красивый) индикатор выполнения CSS3, который вы можете стилизовать с помощью собственного CSS и использовать где угодно с помощью простого шорткода. Теперь с поддержкой пользовательских цветов и градиентов. Чтобы добавить индикатор выполнения к сообщению или странице, просто используйте этот шорткод: [wppb progress = 50], где «50» в приведенном выше примере - индикатор выполнения, заполненный на 50%. Простой, легкий, кросс-браузерный (ухудшается для браузеров, не поддерживающих CSS3). Для получения дополнительных примеров и полных описаний всех доступных параметров щелкните вкладку параметров. Для демонстрации каждого из вариантов перейдите сюда: https://jazzsequence.com/progress-bar/ Параметры На этой странице описаны все доступные параметры для шорткода. Их можно использовать в любой комбинации. Единственный обязательный параметр - прогресс. Все параметры чувствительны к регистру (например, «прогресс» будет работать, а «Прогресс» - нет). progress (обязательно). Определяет, насколько заполнен индикатор выполнения. Прогресс может быть в 2 формах, либо в виде числа (0–100), и в этом случае он будет интерпретироваться как процент, либо как дробь (например, 25/100). Начиная с версии 1.1, вы также можете использовать знаки доллара (например, $ 63 / $ 180), например, для создания индикатора выполнения сбора средств. При использовании знаков доллара вам нужно только добавить знак доллара к одному или другому из двух значений (например, 63/180 или 63/180 долларов США) - плагин будет выводить любой вариант одинаково (63/180 долларов США). Ваш прогресс тоже может быть большим (например, 150/100 или 123%), но ваш пробег может отличаться в зависимости от дисплея. Не рекомендуется использовать это с опцией полной ширины, например, потому что ваш прогресс будет выходить за пределы вашего основного контейнера. Примеры [wppb progress = 50] Индикатор выполнения, заполненный на 50% [wppb progress = "50/100"] Индикатор выполнения, заполненный 50/100 [wppb progress = "$ 45 / $ 50"] Индикатор выполнения в долларовом выражении, который составляет 45 долларов США / 50 долларов США [wppb progress = 110] Индикатор выполнения превышает 100% [wppb progress = 150/100] Индикатор выполнения превышает цель [wppb progress = 125 долларов США / 100] Индикатор выполнения в стиле сбора средств параметр, который превысил цель. Это добавляет один из нескольких поддерживаемых параметров к индикатору выполнения. Для тех, кто знает CSS, можно добавить новые «параметры», просто добавив новые стили в ваш style.css. См. Страницу часто задаваемых вопросов для получения дополнительной информации о создании новых классов CSS. Параметры можно комбинировать, заключив их в кавычки в шорткоде. К индикатору выполнения, естественно, будет применена внутренняя тень. Была добавлена опция плоского изображения для удаления тени и отображения «плоского» цвета, что лучше всего при использовании вместе с параметром цвета. Поддерживаемые значения: Candystripe, Animated-Candystripe, красный, оранжевый, зеленый, желтый, плоский Примеры [wppb progress = 50 option = red] Отображает красный индикатор выполнения [wppb progress = 50 option = "animated-candystripe green"] Отображает зеленый индикатор выполнения с анимированной полосой из конфет [wppb progress = 50 option = "candystripe orange"] Отображает оранжевый индикатор выполнения со статической полосой из конфет [wppb progress = 50 option = Candystripe] Отображает индикатор выполнения по умолчанию (синий) со статической полосой из конфет [wppb progress = 50 option = flat color = red] Отображает красный индикатор выполнения без внутренней тени или градиента [wppb progress = 50 option = "flat candystripe" color = gray] Отображает серый индикатор выполнения без внутренней тени или градиента и статический Конфеты в процентах (устарело) Этот параметр устарел. Вместо этого используйте параметр местоположения. Отображает процент (или долю) внутри или за пределами индикатора выполнения. Примечание: не рекомендуется использовать процент = после, если вы показываете индикатор выполнения, превышающий целевое значение. Поддерживаемые значения: внутри, после Примеры [wppb progress = 50 option = красный процент = после] Отображает красный индикатор выполнения с процентами, отображаемыми справа от индикатора выполнения [wppb progress = 50 option = "red candystripe" проценты = внутри] Отображает красный индикатор выполнения со статической полоской и проценты, отображаемые внутри индикатора выполнения. расположение Отображает процент, текст или дробь внутри или за пределами индикатора выполнения. Примечание: не рекомендуется использовать location = after, если вы показываете индикатор выполнения, превышающий его цель. Поддерживаемые значения: внутри, после Примеры [wppb progress = 50 option = red location = after] Отображает красный индикатор выполнения с индикатором выполнения, отображаемым справа от индикатора выполнения. [wppb progress = 50 option = "red candystripe" location = inside] Отображает красную полосу выполнения со статической полосой конфеты и прогресс, отображаемый внутри индикатора выполнения. [wppb progress = 85 location = after text = "foo"] Отображает индикатор выполнения с текстом "foo", отображаемым после индикатора выполнения. текст Отображает произвольный текст вместо индикатора выполнения. Может использоваться с параметром местоположения, чтобы определить, отображается ли текст внутри или за пределами индикатора выполнения (по умолчанию - внутри). Необходимо использовать в двойных кавычках. HTML-код удаляется из окончательного вывода. Поддерживаемые значения: любая текстовая строка. Примеры [wppb progress = 75 text = "My awesome text"] Отображает "My awesome text" внутри 75% индикатора выполнения. [wppb progress = 85 location = after text = "foo"] Отображает "foo" после 85% индикатора выполнения [wppb progress = 85 location = inside text = "hello!"] Отображает "hello!" внутри индикатора выполнения 85% (обратите внимание, расположение текста по умолчанию находится внутри, поэтому указывать «внутри» не требуется). fullwidth Заставляет индикатор выполнения занимать 100% контейнера. (Подходит для адаптивных макетов.) Не рекомендуется для индикаторов выполнения, которые превышают свою цель. Примечание: полная ширина фактически принимает любое значение. Если полная ширина присутствует вообще, будет отображаться индикатор выполнения шириной 100%. Например, fullwidth = foo выведет то же самое, что fullwidth = true. Поддерживаемое значение: true Примеры [wppb progress = 50 fullwidth = true] Отображает полноразмерный (отзывчивый) индикатор выполнения [wppb progress = 50 fullwidth = foo] Идентично указанному выше цвету индикатора выполнения. Определяет цвет индикатора выполнения. Это полезно для создания новых цветов индикатора выполнения на лету без редактирования CSS. Не может использоваться в сочетании с любыми ранее существовавшими вариантами цвета (красный, желтый, оранжевый или зеленый). Поддерживаемые значения: любое шестнадцатеричное значение цвета, любое значение цвета rgb / rgba, любое имя цвета, поддерживаемое css. Примеры [wppb progress = 50 color = rgb (123,50,87)] [wppb progress = 55 color = rgba (123,64 , 99,0.3)] Примечание. Поскольку цвет фона индикатора выполнения - темно-серый, любая непрозрачность, примененная к цвету rgba, сделает цвет темнее, поскольку он добавляется к темно-серому фону. [wppb progress = 22 color = # ff3257] [wppb progress = 68 color = lightYellow] endcolor Определяет конечный цвет для настраиваемого градиента при использовании с цветом. Поддерживаемые значения: любое шестнадцатеричное значение цвета, любое значение цвета rgb / rgba, любое имя цвета, поддерживаемое css. Примеры [wppb progress = 72 color = turquoise endcolor = teal] [wppb progress = 83 color = # ff2222 endcolor = # ff9984] [wppb progress = 50 color = rgb (203,96,179) endcolor = rgb (173,18,131)] gradient Определяет конечный цвет на лету для градиента на основе параметра цвета. Таким образом, градиент требует наличия цвета, иначе цвет и градиент будут установлены на цвет по умолчанию (синий). Не может использоваться в сочетании с любыми ранее существовавшими вариантами цвета (красный, желтый, оранжевый или зеленый). При использовании градиента значение цвета должно быть в шестнадцатеричной форме. Поддерживаемые значения: любое положительное или отрицательное десятичное значение от 0,0 до 1,0 или -1,0. Примеры [wppb progress = 22 color = # ff0000 gradient = 0.2] Отображает красный индикатор выполнения, который становится светлее внизу [wppb progress = 22 color = # ff0000 gradient = -0.2] Отображает красный индикатор выполнения, который становится темнее внизу Это не работает: [wppb progress = 34 color = rgb (22,18,99) gradient = 0,2]

Автор: Chris Reynolds

Версия: 2.1.4

Последнее обновление: 2015-11-23 5:16pm GMT