Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

offcanvas-mobile


Hello,
How I can use offcanvas-mobile in Metronic, please?


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


It's not visible on the mobile view in demo 5
https://preview.keenthemes.com/metronic/vue/demo5/?_ga=2.189648619.1788980769.1655565138-1413213079.1655565138#/profile/profile-1



Sorry for the misunderstanding.

I was referring to Metronic8 profile page.
https://preview.keenthemes.com/metronic8/vue/demo1/#/crafted/pages/profile/overview

It is a bug, the content must be included in offcanvas, we will check this and include a fix in upcoming Metronic releases.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Thank you,
but I'm asking about the menu on the profile page that will be hidden on mobile view, like this



Hi,

Right now menu on a profile page is visible on the mobile view, if you want to move it to the drawer for the mobile view then you can use our DrawerComponent.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi,

I suppose that you meant "drawer" component, in Vue our assets/ts/components/DrawerComponent.ts is a ts version of our js component in the HTML version.

Unfortunately, we do not have a separate ts version doc right now. Since all HTML attributes will be the same as in html version, you can refer to our HTML version's doc:
https://preview.keenthemes.com/html/metronic/docs/general/drawer

Let me know if you will need any additional help.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(