Popover

Normal

Normal variant av komponenten er skjult. For å åpne komponenten må den få et annet element som anker. Typisk er det elementet som åpner komponenten som bør bli komponentens anker (som i eksempelet med knappen nedenfor). Popover-komponenten vil da posisjonere seg selv i forhold til dette anker-elementet.

<Knapp onClick={(e) => this.togglePopover(e.currentTarget)}>Åpne popover</Knapp>
<Popover
    ankerEl={this.state.anker}
    onRequestClose={() => this.setState({anker: undefined})}
>
    <p style={{padding:'1rem'}}>
        Dette er en popover.
    </p>
</Popover>
 Kopiert! 

Orientering

Komponenten kan posisjonere seg med forskjellige orienteringer i forhold til anker-elementet. Default er over, men kan også være under, hoyre, venstre, over-venstre, over-hoyre, under-venstre eller under-hoyre.

<Select
    label="Velg orientering"
    onChange={(e) => this.setState({ orientering: e.target.value })}
    defaultValue={this.state.orientering}
>
    <option value="over">Over</option>
    <option value="under">Under</option>
    <option value="hoyre">Høyre</option>
    <option value="venstre">Venstre</option>
    <option value="over-venstre">Over, fra venstre kant</option>
    <option value="over-hoyre">Over, fra høyre kant</option>
    <option value="under-venstre">Under, fra venstre kant</option>
    <option value="under-hoyre">Under, fra høyre kant</option>
</Select>
<Popover
    ankerEl={this.state.anker}
    onRequestClose={() => this.setState({anker: undefined})}
    orientering={this.state.orientering}
>
    <p style={{margin:'1rem', maxWidth:300}}>
        Dette er en popover som bruker <code className="inline">orientering</code>-propen til å posisjonere seg i forhold til ankeret sitt.
    </p>
</Popover>
 Kopiert! 

Uten pil

Du kan også skru av pilen og få komponenten til å posisjonere seg helt inntil anker-elementet sitt. Kjekt hvis man f.eks. vil lage typiske dropdown-menyer:

<Menyknapp
    id={this.buttonId}
    onClick={(e) => this.togglePopover(e.currentTarget)}
    aria-expanded={this.state.anker !== undefined}
    aria-controls={this.popoverId}
    aria-haspopup="menu"
>
    <span>Dropdown meny</span>
</Menyknapp>
<Popover
    id={this.popoverId}
    ankerEl={this.state.anker}
    onRequestClose={() => this.setState({ anker: undefined })}
    orientering="under"
    autoFokus={false}
    tabIndex={-1}
    utenPil
>
    <ul
        className="menu"
        role="menu"
        style={{ minWidth: 190 }}
        aria-labelledby={this.buttonId}
    >
        <li><a role="menuitem" className="lenke" href="#" ref={(node) => node && node.focus()}>Et valg</a></li>
        <li><a role="menuitem" className="lenke" href="#">Et annet valg</a></li>
        <li><a role="menuitem" className="lenke" href="#">Et tredje valg</a></li>
        <li><a role="menuitem" className="lenke" href="#">Et fjerde valg</a></li>
    </ul>
</Popover>
 Kopiert! 

Input-trigger

<Input
    label="Skriv noe"
    onChange={(e) => {
        if (e.target.value && !this.state.anker) {
            this.setState({anker: e.currentTarget});
        } else if (!e.target.value) {
            this.setState({anker: undefined});
        }
    }}
/>
<Popover
    ankerEl={this.state.anker}
    onRequestClose={() => this.setState({ anker: undefined })}
    orientering="under-venstre"
    autoFokus={false}
    utenPil
>
    <p style={{ padding: '1rem' }}>
        Dette er en popover.
    </p>
</Popover>
 Kopiert! 

Autojustering mot skjermbredde

Popover-komponenten vil automatisk justere egen posisjon og størrelse for å holde seg innenfor den tilgjengelige skjermbredden.

Base

Selve Popover-vinduet er en selvstendig "dum" komponent kalt PopoverBase som du kan bruke hvis du ønsker å håndtere posisjonering osv. manuelt.

<PopoverBase>
  <div style={{ padding: "1rem" }}>Dette er en PopoverBase</div>
</PopoverBase>
 Kopiert!