Condivisione della tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Oggi ti mostrerò come utilizzare il menu drawer in Axure. Nel menu del cassetto è necessario ottenere due effetti interattivi, ovvero:

Interazione uno

L'effetto di ridimensionamento delle voci di menu di livello 1 e 2 nel menu drawer

Logica di implementazione: impostazione dello stato di commutazione del pannello dinamico e implementazione "spingi/tira l'originale".

Interazione 2

Commutazione dello stato selezionato di una voce di menu

Logica dell'attrezzo: imposta lo stato selezionato nella vista ausiliaria

Diamo un’occhiata alle fasi di implementazione:

Interazione 1: effetto di ridimensionamento delle voci di menu di livello 1 e 2 nel menu drawer

passo 1

1. Trascina in un pannello dinamico e regola la dimensione del pannello dinamico.

2. Fare doppio clic sul pannello dinamico, impostare il nome del pannello dinamico: "Menu 1", aggiungere 2 stati del pannello dinamico, denominati rispettivamente: Comprimi, Espandi

Passo 2

1. Fare doppio clic sullo stato piegato per accedere alla pagina di stato "piegato".

2. Trascina un rettangolo nella pagina e imposta il nome su "Menu 1-Comprimi". Ridimensiona il Menu 1 e inserisci il testo "Menu 1".

3. Trascina l'immagine della freccia a discesa e regola le dimensioni

Passaggio 3

Aggiungi gli stili di passaggio del mouse e di selezione di "Menu 1-Collapse" e imposta rispettivamente il colore del carattere: blu e il colore di riempimento: grigio chiaro.

Passaggio 4

Caso d'uso quando si imposta il clic del mouse sul rettangolo "Menu 1-Collapse":

Selezionare l'azione "Cambia stato pannello", impostare "Menu 1" per passare allo stato "Espanso" e selezionare l'attributo "Componente Spingi/Tira".

Passaggio 5

1. Copia il contenuto dello stato "comprimi" del pannello dinamico nella pagina dello stato "espanso".

2. Nella pagina di stato "Espandi", modificare il nome del rettangolo in "Menu 1-Espandi".

Interazione 2: commutazione dello stato selezionato delle voci di menu

Passaggio 6

1. Copia "Menu 1-Espandi" come sottomenu, modifica il testo del componente nome e nominalo: Sottomenu 1

2. Impostare l'evento clic del mouse del sottomenu 1, selezionare l'azione "Imposta selezionato" e configurare il componente corrente da selezionare.

Passaggio 7

1. Copia più sottomenu in batch, modifica il testo e nominali rispettivamente.

2. Dopo aver selezionato tutti i sottomenu multipli, impostare il nome del gruppo di selezione: 1

Anteprima per vedere l'effetto.