Left navigation to achieve 100% height
Preface
Hello! Welcome to the Axure 9 practical case tutorial column.
In the Axure 9 Actual Combat Case Basics column, there is an article " Axure 9 Actual Combat Case, Dynamic Panel Application 1, Navigation Bar Achieving 100% Width ", Xiao Mo taught you how to achieve 100% width in the top navigation bar.
Then some students will ask, can horizontal navigation be 100%, and can vertical navigation be 100%? This question is very in-depth. In this section, I will explain how to achieve 100% height in the left navigation bar, and see below.
Step 1: Drag the dynamic panel to the page
1. The first step is to drag a dynamic panel onto the page and name it "sidebar"; set its x and y to 0, that is, align the upper left corner and place it on the bottom; then set the size of the dynamic panel, The width must be the width of the actual navigation, and the height can be arbitrary.
The second step, click <When window size changes>
2. In the second step, in the "Properties" in the toolbar on the right of Axure, click <When window size changes> to add a use case to the current page. This time, instead of right-clicking on the dynamic panel to select 100%, it is about using variables.
The third step, check the sidebar dynamic panel
3. In the third step, in the "Add Action" column in the pop-up window, find "Set Size" and click to select it; in the "Configuration Action" column, check the sidebar dynamic panel.
The fourth step is to clear the width and height values
4. The fourth step, the highlight is here, first clear the width and height values, (when the width is empty or 300, it means to keep the original value of the dynamic panel width, which is the 300 set in the first step; of course, it can be modified to other Value, but in the generated page, the modified value is the actual width.) Then click the high one to set the variable for the high.
The fifth step, high variable settings
5. The fifth step, then the highlight is not over, click <Insert Variable or Function> in the pop-up window, then select <Window.height> in <Window> from the drop-down menu, and then click <OK> in the lower right corner of the window to set carry out.
Conclusion
6. Through the previous 5 steps, you can achieve 100% height of the left navigation, but it seems that we have forgotten one thing, that is to set the background color for the dynamic panel. I will not repeat it here, because it has already been mentioned in the previous lecture. As mentioned, if there are students who have not learned, you can click the link at the beginning of the article to learn the video tutorial. The final renderings are attached below to end this tutorial.
Related Courseware
In order to help students to quickly understand and practice Axure cases, each tutorial in this column will provide RP format courseware download.
Link: https://mosi.lanzous.com/b01i03rdi
Password: The 8mnc
link is valid for a long time. If you encounter an access exception, please remove mosi. and try again, or send a private message to the blogger.