Lernen Sie, wie Sie in 2 Minuten ein kreisförmiges/fächerförmiges Menü erstellen (Basisversion)

@centerIconSize: 30px;

.flex(@justify: flex-start, @align: center) {
    Inhalt begründen: @justify;
    Elemente ausrichten: @align;
    Anzeige: Flex;
}
.Sektor-Menü-Wrapper {
    Position: relativ;
    Breite: @centerIconSize;
    Rand: automatisch;

    .center-Symbol {
        .flex(Mitte);
        Breite: @centerIconSize;
        Höhe: @centerIconSize;
        Randradius: 50 %;
        Hintergrund: rgba(0, 0, 0, 0,3);
        Farbe: weiß;
        Cursor: Zeiger;
    }

    .Sektor-Element {
        Position: absolut;
        .flex(Mitte);
        Breite: @centerIconSize;
        Höhe: @centerIconSize;
        Randradius: 50 %;
        Hintergrund: rgba(0, 0, 0, 0,3);
        Cursor: Zeiger;
        Farbe: weiß;
        oben: 0;
        links: 0;
        Übergang: alles linear 0,5 s;
        transformieren: übersetzen(0, 0);
        // Anzeige: keine;
        Sichtbarkeit: versteckt;
    }

    .Sektor-Liste {
        &.Sektorliste-aktiv {
            Übergang: alles linear 0,5 s;
            .Sektor-Element {
                .flex(Mitte);
                Übergang: alles linear 0,5 s;
                transformieren: übersetzen(0, 0);
                Sichtbarkeit: sichtbar;

                &:erstes-Kind {
                    transformieren: übersetzen(0, -@centerIconSize * 1,5);
                }
        
                &:n-tes-Kind(2) {
                    transformieren: übersetzen(-@centerIconSize * 1,5, 0);
                }
        
                &:n-tes-Kind(3) {
                    transformieren: übersetzen(0, @centerIconSize * 1,5);
                    
                }
            }
        }
    }
}

importiere React von „react“;

exportiere Standardklasse SectorMenu erweitert React.Component {
    Zustand = {
        Richtung: 'links',
        SektorMenüSichtbar: false,
        centerIconSize: 30,
        SektorArtikelgröße: 30,
    }

    /**
     * Radialmenü anzeigen */
    Sektormenü anzeigen = () => {
        const { SektorMenuVisible } = dieser.Zustand;
        dies.setState({
            SektorMenüSichtbar: !SektorMenüSichtbar,
        })
    }

    beiKlick aufSectorMenuItem = (Index) => {
        const { sectorMenuItemFunctions } = this.props;
        wenn (!SectorMenuItemFunctions || Typ von (SectorMenuItemFunctions[Index]) !== 'Funktion') {
            zurückkehren;
        }
        SektorMenüelementFunktionen[index]();
    }

    getSectorJsx = () => {
        const { SektorMenuItems } = this.props;

        wenn (!sectorMenuItems || !Array.isArray(sectorMenuItems) || sectorMenuItems.length === 0) {
            zurückkehren;
        }

        const Stile = {};
        const { SektorMenuVisible } = dieser.Zustand;

        returniere SektorMenüElemente.map((Element, i) => {
            // const Stile = {
            // transformieren: übersetzen(0, -centerIconSize * 2);
            // };

            zurück (<div
                Klassenname = {`Sektorelement ${SektorMenuVisible && 'Sektorelement-aktiv'}`}
                Stil={Stile}
                beiKlick={() => this.onClickSectorMenuItem(i)}
                Schlüssel={i}
            >
                {Artikel}
            </div>)
        });
    }
    rendern() {
        const { SektorMenuVisible } = dieser.Zustand;
        zurückkehren (
            <div Klassenname = "Sektor-Menü-Wrapper">
                <div className="center-icon" onClick={this.showSectorMenu}>
                    {
                        SektorMenüSichtbar ? 'x' : '···'
                    }
                </div>
                <div className={`Sektorliste ${sectorMenuVisible && 'Sektorliste-active'}`}>
                    {this.getSectorJsx()}
                </div>
            </div>
        )
    }
}

<SektorMenü
    SektorMenüelemente={['A1', 'A2', 'A3']}
    SektorMenuItemFunctions={[Funktion () {console.log(0)}, Funktion () {console.log(1)}, Funktion () {console.log(2)}]}
/>