Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use the sliding navigation component in Bootstrap5". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use the sliding navigation component in Bootstrap5.

Usage of Bootstrap5 sliding navigation components

1 characteristics of sliding navigation

Sliding navigation (Offcanvas) is a sidebar component that can be switched through JavaScript to show and hide from the left, right, or lower edge of the window. It is often used in projects to build hidden sidebars for navigation, shopping carts, etc.

It has the following characteristics

The slide navigation Offcanvas shares some of the same JavaScript code as the modal box modals. Conceptually, they are very similar, but they are separate plug-ins.

When displayed, Offcanvas includes a default background that can be clicked to hide the hidden canvas.

Similar to modals, only one offcanvas can be displayed at a time.

Be careful! Given the way CSS handles animation, you cannot use margin or translate on .offcanvas elements. Instead, use the class as a separate wrapper element.

It doesn't sound very clear, but it doesn't matter. It doesn't stop you from learning. Let's learn to use it through examples.

2 sliding navigation example demonstration

The table presentation displays through the link, displays the personal center through the button, and here you can put all the elements such as text, list, form, etc. Click X in the upper right corner to close my post, my collection, my favorite friend, Niutouma, Sun Dasheng.

Click any of the above buttons and the following interface pops up in the window

If you are familiar with it, you can also change the above text to the form to make a shopping cart. From the above example, we can see that the sliding navigation component includes the container, the navigation head, and the navigation body, which I will describe in detail below.

3 sliding navigation components and the meaning of parameters

3.1 Container

All the sliding navigation content is div class= "offcanvas offcanvas-start" > direct, and the container is the outermost shell of the sliding navigation.

Position parameter in the container, which has three values

Offcanvas-start, as shown in the example above, the pop-up navigation is in the upper left corner of the screen

Offcanvas-end, the pop-up navigation is on the right side of the screen

Offcanvas-bottom, the pop-up navigation is at the bottom of the screen

If there is no such parameter, the position is uncertain. My demonstration is in the lower left corner.

Here are the pictures with different parameters.

Offcanvas-end

Offcanvas-bottom

No position parameter

3.2 Navigation head

Personal center

As in the above code, the navigation header contains a navigation title and a button, which is the X navigation head in the upper right corner of the navigation. Generally speaking, you only need to change the title content, and leave the rest as is.

3.3 Navigation body

All content contained in between is a navigation bar in which any element can be placed.

3.4 Navigation activation button

This is not theoretically part of navigation, but it is generally necessary to set a button or icon on the page and activate sliding navigation by clicking or swiping to an area when the navigation is hidden. Of course, you can also let the navigation display at the beginning, and then stop displaying it when it is turned off.

Display by link display by button

In the navigation button above

Data-bs-toggle= "offcanvas" indicates that it works for sliding navigation.

Href= "# offcanvasExample" or data-bs-target= "# offcanvasExample" is the key code that works, where the offcanvasExample in # offcanvasExample is the id of the container.

Aria-controls= "offcanvasExample" sets the focus of the keyboard and does not have to be written.

3.5 default display and off

This is simple, just add a parameter show to the container. In this way, the navigation appears without clicking the button to open the page.

Adding data-bs-keyboard= "true" to the container enables you to turn off offcanvas when you press the escape key.

3.6 Page masking and no scrolling

By default, when sliding navigation appears, the original web page will appear and the scrolling up and down effect of the page will be disabled, also known as locking. You can use the data-bs-scroll property to toggle body scrolling, use data-bs-backdrop to switch the background, and add it directly to the container.

Data-bs-scroll= "true", default false

Data-bs-backdrop= "false", default true

This is a comprehensive example, after displaying the sliding navigation, try to scroll the middle wheel of the mouse to see if the page can slide, but I will not demonstrate the display effect.

Sliding window allows page scrolling mask and page scrolling Colored with scrolling are allowed by default

Try scrolling the rest of the page to see this option in action.

Offcanvas with backdrop

.

Backdroped with scrolling

Try scrolling the rest of the page to see this option in action.

Core hint: Hongmeng system can be used in mobile phones, cars, home appliances, smart home, smart wearable devices and other products to provide a unified language for the intelligence, interconnection and cooperation of different devices.

The reference News Network reported on June 15.

Chinese technology giant Huawei has recently promoted its Hongmeng system, the Singapore-based Lianhe Zaobao website reported. Analysts believe that Hongmeng's operating system will be suppressed internationally by manufacturers such as Google, Apple and Samsung, and other Chinese mobile phone manufacturers that compete with Huawei may not use the system immediately. Therefore, Hongmeng operating system will face many challenges.

According to the report, Hongmeng system can be used in mobile phones, cars, home appliances, smart home, smart wearable devices and other products to provide a unified language for the intelligence, interconnection and collaboration of different devices. Huawei estimates that the number of devices equipped with the Hongmeng operating system will reach 300 million by the end of this year, including more than 200 million Huawei devices and more than 100 million terminal devices for third-party partners.

Huawei's use of its own Hongmeng system means it is no longer dependent on Android. Moreover, Hongmeng system is an one-time development, multi-terminal deployment system, which is more suitable for the needs of the Internet of things era, and has broad application prospects. Huawei says it is working with the world's top 200 App vendors to develop applications across terminals.

Hongmeng system is Huawei "promotion" ticket?

The Hongmeng operating system can be used as a strategic fulcrum for Huawei to help connect the smart car field with life. (Reuters)

Ren Zhengfei, founder of Huawei, said at an internal meeting that Huawei should dare to lead the world in the field of pure software; the future development of the software sector is basically outside the control of the United States, has greater independence and autonomy, and can "take root and pierce the sky."

Xiaomi and other famous Chinese mobile phone manufacturers take a wait-and-see attitude towards Hongmeng system.

However, although Huawei has announced that Hongmeng system will adopt an open source strategy, famous Chinese mobile phone manufacturers such as Xiaomi, OPPO and vivo still take a wait-and-see attitude towards Hongmeng system.

Industry insiders point out that big Chinese mobile phone manufacturers such as Xiaomi compete with Huawei. Huawei's mobile phone sales have plummeted after the US sanctions. These manufacturers are direct or indirect beneficiaries and naturally do not want to stand on the platform of Huawei's Hongmeng operating system.

Moreover, these Android-dependent manufacturers are also worried that if they adopt Hongmeng, they may be suppressed by Google and even prevent their exports from using Android, affecting overseas shipments.

At the same time, the security and stability of Hongmeng system need to be observed. Huawei stressed that Hongmeng will achieve the Internet of everything, but its technological advantages have not been realized so far. Yu Chengdong, a Huawei executive, has also said that Hongmeng's maturity is only 70% of Android's.

However, the launch of Hongmeng system will demonstrate Huawei's strong technical strength and development prospects, so that it has a stronger ability to withstand pressure. In case Chinese technology companies such as Xiaomi are "stuck" by external forces like Huawei, Hongmeng system will be a good candidate.

Professional institutions: Hongmeng system is of great significance to Huawei

Founder Securities analysis, the significance of Hongmeng system to Huawei has three points: first, as Huawei's ticket to become an ecological giant. The ultimate competition of digital business, in the final analysis, is the competition of the operating system. The common characteristics of the top three apple, Google and Microsoft in the world by market capitalization are their own operating systems.

Second, Huawei is forced to change its business model of selling hardware directly, get rid of the business risks brought by the chip blockade, and achieve the continuation of the business through Hongmeng.

The third is to act as the strategic fulcrum of Huawei Automobile. Hongmeng will help connect the smart car field with life, and will also bring more smart life experience to users in the field of self-driving and car networking in the future.

4 controlled by JavaScript

4.1 using data properties

In the previous example, we all use data attributes to automatically assign control over an offcanvas element by adding data-bs-toggle= "offcanvas" and data-bs-target to the element or by linking href. If you want it to be turned on by default, you can add additional show classes.

4.2 setting properties through JavaScript

Var offcanvasElementList = [] .slice.call (document.querySelectorAll ('.offcanvas')) var offcanvasList = offcanvasElementList.map (function (offcanvasEl) {return new bootstrap.Offcanvas (offcanvasEl)})

You can pass data attributes through JavaScript. For data properties, append the following option names to the data- bs-, as shown in

Data-bs-backdrop= "true" to apply the background to the body when offcanvas is turned on

Data-bs-scroll= "false", which allows you to scroll the body when offcanvas is open

Data-bs-keyboard= "true", close offcanvas when you press the escape key

4.3 Show turn off sliding navigation

With js control, you can simply realize the navigation effect of mouse sliding over a certain area and mouse sliding off navigation effect.

Var myOffcanvas = document.getElementById ('myOffcanvas') var bsOffcanvas = new bootstrap.Offcanvas (myOffcanvas)

Toggle switches the offcanvas element to Show or Hidden. Returns the caller before actually showing or hiding the offcanvas element (that is, before the show.bs.offcanvas or hidden.bs.offcanvas event occurs).

Show displays the offcanvas element. Returns the caller before the offcanvas element is actually displayed (that is, before the show.bs.offcanvas event occurs).

Hide hides the offcanvas element. Is returned to the caller before the offcanvas element is actually hidden (that is, before the hidden.bs.offcanvas event occurs).

The _ getInstance static method, which allows you to get the offcanvas instance associated with the DOM element

4.4 event

Bootstrap's offcanvas class exposes events for connecting to offcanvas functionality.

This event fires immediately when show.bs.offcanvas calls the show instance method.

Shown.bs.offcanvas this event is triggered when the offcanvas element is visible to the user (waiting for the CSS transformation to complete).

When hide.bs.offcanvas calls the hide method, his event is fired immediately.

Hidden.bs.offcanvas this event is triggered when the offcanvas element is hidden from the user (waiting for the CSS conversion to complete).

At this point, I believe you have a deeper understanding of "how to use the sliding navigation components in Bootstrap5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.