Need help with UI shell #15050

hrstoyanov · 2023-10-27T15:31:27Z

hrstoyanov
Oct 27, 2023

I am new to IBM Carbon, but would like to use the web components. Trying to prototype a simple app with header nad left side drawer, but have some pain:

The documentation shows how to configure Shell UI , but does not show cleanly where to position the main content. Any better examples?
Can I control the showing/hiding responsive breakpoint for the side bar?
When the left-side drawer shows, it covers the main content. I would rather push it to the right. How?
The top hover covers my main area, I use a margin with a magic number to push my main area down, any better way?
Is it possible to make Shell UI work with moder CSS things like grid and flex?

Here is my sample code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/ui-shell.min.js"></script>
    <link rel="stylesheet"
    href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>

    <style>

        body { 
            height: 100vdh;
            background-color: pink;
        }

        main{
            margin: 3.5rem 0 0 0;
            border: 1px solid red;
            height: 100%;
        }

    </style>

    <title>Document</title>
  </head>
  <body>

    <header>
        <cds-header  aria-label="IBM Platform Name">
            <cds-header-menu-button button-label-active="Close menu" button-label-inactive="Open menu"></cds-header-menu-button>
            <cds-header-name href="javascript:void 0" prefix="IBM">[Platform]</cds-header-name>
    
            <cds-header-nav menu-bar-label="IBM [Platform]">
              <cds-header-nav-item href="javascript:void 0">Link 1</cds-header-nav-item>
              <cds-header-nav-item href="javascript:void 0">Link 2</cds-header-nav-item>
              <cds-header-nav-item href="javascript:void 0">Link 3</cds-header-nav-item>
    
              <cds-header-menu menu-label="Link 4" trigger-content="Link 4">
                <cds-header-menu-item href="javascript:void 0">Sub-link 1</cds-header-menu-item>
                <cds-header-menu-item href="javascript:void 0">Sub-link 2</cds-header-menu-item>
                <cds-header-menu-item href="javascript:void 0">Sub-link 3</cds-header-menu-item>
              </cds-header-menu>
            </cds-header-nav>
        </cds-header>
    </header>

    <main>
        Lorem A ipsum dolor sit amet consectetur adipisicing elit. Et natus labore rerum, fugit, mollitia, 
        eius blanditiis vitae magni ipsa itaque ab. Laboriosam ex dolores fuga autem error minus deserunt officia.
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non expedita magni qui totam esse consectetur,
        odit temporibus fuga! Quo quasi suscipit cupiditate exercitationem atque, est dignissimos illo eius aut ea!
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni ut ratione iure ipsa vel rerum voluptatum consequuntur, 
        libero mollitia ad eius totam animi distinctio saepe in, labore, quidem optio tenetur!
    </main>


    <div class="left-sidebar">
        <cds-side-nav aria-label="Side navigation" expanded>
            <cds-side-nav-items>
                <cds-side-nav-menu title="L0 menu">
                <cds-side-nav-menu-item href="www.ibm.com">
                    L0 menu item
                </cds-side-nav-menu-item>
                <cds-side-nav-menu-item href="www.ibm.com">
                    L0 menu item
                </cds-side-nav-menu-item>
                <cds-side-nav-menu-item href="www.ibm.com">
                    L0 menu item
                </cds-side-nav-menu-item>
                </cds-side-nav-menu>
                <cds-side-nav-menu title="L0 menu">
                <cds-side-nav-menu-item href="www.ibm.com">
                    L0 menu item
                </cds-side-nav-menu-item>
                <cds-side-nav-menu-item active aria-current="page" href="www.ibm.com">
                    L0 menu item
                </cds-side-nav-menu-item>
                <cds-side-nav-menu-item href="www.ibm.com">
                    L0 menu item
                </cds-side-nav-menu-item>
                </cds-side-nav-menu>
                <cds-side-nav-menu title="L0 menu">
                <cds-side-nav-menu-item href="www.ibm.com">
                    L0 menu item
                </cds-side-nav-menu-item>
                <cds-side-nav-menu-item href="www.ibm.com">
                    L0 menu item
                </cds-side-nav-menu-item>
                <cds-side-nav-menu-item href="www.ibm.com">
                    L0 menu item
                </cds-side-nav-menu-item>
                </cds-side-nav-menu>
                <cds-side-nav-divider></cds-side-nav-divider>
                <cds-side-nav-link href="javascript:void(0)">L0 link</cds-side-nav-link>
                <cds-side-nav-link href="javascript:void(0)">L0 link</cds-side-nav-link>
            </cds-side-nav-items>
            </cds-side-nav>
    </div>



  </body>

  </html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Need help with UI shell #15050

{{title}}

Replies: 0 comments

Select a reply

Need help with UI shell #15050

hrstoyanov Oct 27, 2023

Replies: 0 comments

hrstoyanov
Oct 27, 2023