0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Html dash

border-style

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюnone
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/box.html#propdef-border-style

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.

Синтаксис

border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] <1,4>| inherit

Значения

Для управления видом границы предоставляется несколько значений свойства border-style . Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселов.

Кроме перечисленных в таблице значений используются следующие ключевые слова.

none Не отображает границу и ее толщина ( border-width ) задается нулевой. hidden Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse . В этом случае вокруг ячейки граница не будет отображаться вообще. inherit Наследует значение родителя.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.

Статья в тему:  Dash прогноз

Табл. 2. Зависимость результата использования от числа значений

Число значенийРезультат
1Стиль границы будет задан для всех сторон элемента.
2Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой.
3Первое значение задает стиль верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4Поочередно устанавливается стиль верхней, правой, нижней и левой границы.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства border-style

Объектная модель

[window.]document.getElementById(» elementID «).style.borderStyle

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit .

Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

Компоненты Dash

Каждое веб-приложение на основе Dash создается с использованием кода, который можно разделить на три основных раздела: макет, функции интерактивности и основная функция. Ниже мы рассмотрим каждый из них.

Макет в Dash содержит компоненты HTML и CSS, поддерживаемые библиотеками Dash. Этот раздел определяет, как будет выглядеть приложение на конечной веб-странице. Библиотеки dash_core_components и dash_html_components предоставляют веб-элементы, которые можно использовать в макете. Существует также библиотека graph_objs , которая предоставляет пользователю доступ к дополнительным графическим компонентам. Более того, как было сказано ранее, всегда можно создавать свои собственные компоненты, используя React.js и Javascript. Раздел макета выглядит как:

Статья в тему:  Будет ли рипл стоить как биткоин

Ниже приведены основные модули, необходимые для реализации всех графических элементов серии:

Ниже приведен базовый пример простого линейного графика, указанного в макете кода Dash:

Где data — DataFrame таблица библиотеки Pandas, содержащая столбцы date и Sales для осей x и y соответственно.

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

1) функция @app.callback() — где input id элемента dash вызывает изменение, в результате чего изменяется output id элемента dash.

2) Тело функции, которая запускается при каждом изменении ввода, должно быть определено.

Давайте воспользуемся приведенным выше примером и изменим диапазон дат по оси X графика продаж, используя компонент ввода Date Range picker :

Выше приведен макет элементов селектора диапазона дат, поддерживаемых библиотекой dash_core_components . Ниже мы проиллюстрируем, как вводные и выходные данные указываются в функции app.callback(), где функция определена для изменения оси x (где отмечены даты) на основе входного диапазона дат.

Совет: Устранение ошибок в компонентах таблиц и графиков

Один из аспектов разработки элементов Dash, таких как графики и таблицы, который часто упускается из виду, заключается в том, что они способныотображать любую ранее сохраненную информацию, если происходит ошибка. Распространенной проблемой является то, что графики продолжают отображать информацию из последнего обратного вызова, если текущий обратный вызов не может быть выполнен как запланировано (возможно, из-за неверного входного параметра). Поскольку пользователь на странице не знает об этом факте, это процесс приводит к ошибочной интерпретации показанных данных. Простое решение — добавить условия ошибки в функцию обратного вызова следующими способами:

  • Если возникает ошибка на графике, то возвращаем пустой граф .
  • Если произошла ошибка в таблице, возвращаем пустую таблицу <>.

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

Как и любой другой код Python, бэкенд-код, который поддерживает веб-приложение на основе Dash, также содержит основную функцию, которую можно использовать для вызова сервера, запускающего результирующее приложение по локальному URL-адресу и порту. Если порт не указан, по умолчанию возвращается 127.0.0.1:8050 . Ниже приведен пример:

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector