Skip to content

Latest commit

 

History

History
63 lines (41 loc) · 1.78 KB

README.md

File metadata and controls

63 lines (41 loc) · 1.78 KB
Raw

Phoenix Modal

Mithril-Komponente für das Phoenix Modal.

Die Komponente ist Teil des Phoenix Reisen Design-Systems.

Demo

https://phoenixreisen.github.io/mithrils/modal/

Installation

Mithril wird benötigt.

npm install --save @phoenixreisen/mithrils

Anwendung

import Modal from '@phoenixreisen/mithrils/modal';

Das Modal selbst kümmert sich nicht um seinen Geöffnet-/Geschlossen-Status. Das muss außerhalb entschieden werden, indem eine Statusvariable dafür sorgt, ob das Modal gerendert wird oder nicht.

Wenn keine Größe angegeben ist, passt sich das Modal bis zu seiner max-width und max-height an seinen Content an. Folgende fixe Größen für Tablets und Desktops können aber auch festgelegt werden:

  • s7590 - 75% breit, 90% hoch
  • s9090 - 90% breit, 90% hoch
  • s5050 - 50% breit, 50% hoch
  • s5075 - 50% breit, 75% hoch

Auf Smartphones nimmt das Modal immer 90% der Breite ein und wird bis zu 90% hoch.

<Modal title="Mein Modal" withCloseText={false}
    toggle={() => state.show = false}
    content={<div>CONTENT</div>}
    footer={<div>FOOTER</div>}>
</Modal>

Demo für Github Page

Mit folgendem Befehl werden alle Demos in den Ordner ../../docs gebaut. Dieser Ordner wird von Github zur Bereitstellung der Demos bzw. Github Pages genutzt.

Möchte man zum Entwickeln nur bestimmte Demos bauen, kann man in der rollup.config.js nicht benötigte Demos auskommentieren, sollte sie vor dem push aber wieder einkommentieren.

npm run compile:demos

Test

[npm install]
npm run test

Deployment

Deployed & published wird immer die ganze Sammlung. Siehe hier.