Как оформить всплывающее окно - PullRequest
Новая
       48

Как оформить всплывающее окно

0 голосов
/ 22 февраля 2019

Можно ли стилизовать всплывающее окно, которое поставляется сact-leaflet.js.org?Я взломал стили, но вы можете получить шаблоны пользовательского интерфейса для всплывающих окон / или как правильно изменить внешний вид всплывающего окна?

Фрагмент кода 

<Marker
    key={message._id}
    position={[message.latitude, message.longitude]}
    icon="">

      <Popup className="request-popup">
        <p>...</p>
        <p>...</p>
    </Popup> 
</Marker>

Я бы хотел, чтобы всплывающее окно выглядело примерно следующим образом:

desired popup design

Спасибо,

1 Ответ

0 голосов
/ 22 февраля 2019

Вы можете манипулировать встроенным внешним видом всплывающего окна листовки с помощью назначенного вами класса request-popup, например, чтобы изменить радиус границы всплывающего окна 

.request-popup .leaflet-popup-content-wrapper {
  border-radius: 0px;
}

Чтобы написать собственный текст и дать ему свой личныйСтиль Я бы порекомендовал создать файл с именем fi popupStyles.js.Там вы объявляете весь свой стиль всплывающих окон.Затем вы импортируете его в комп Map и напишите свой HTML.Используйте начальную загрузку для достижения желаемых полей и других полезностей.

popupStyles.js 

const popupContent = {
  textAlign: "center",
  height: "350px",
  marginTop: "30px"
};
const popupHead = {
  fontWeight: "bold",
  fontSize: "22px"
};

const popupText = {
  fontSize: "15px",
  marginBottom: "20px"
};

const okText = {
  fontSize: "15px"
};

export { popupContent, popupHead, popupText, okText };

, а затем в компе 

import { popupContent, popupHead, popupText, okText } from "./popupStyles";

<Marker position={center} icon={defaultMarker}>
    <Popup className="request-popup">
      <div style={popupContent}>
        <img
          src="https://cdn3.iconfinder.com/data/icons/basicolor-arrows-checks/24/149_check_ok-512.png"
          width="150"
          height="150"
        />
        <div className="m-2" style={popupHead}>
          Success!
        </div>
        <span style={popupText}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
          enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.
        </span>
        <div className="m-2" style={okText}>
          Okay
        </div>
      </div>
    </Popup>
  </Marker>

Демо

...