Concorde UI component — Pop. Click to open pop Doc ID: core/components/ui/pop/pop. Keywords: Concorde, supersoniks, core/components/ui/pop/pop, pop, Pop, UI component, sonic-pop, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/pop/pop.html.

Pop

Placement

<sonic-pop class="inline-block" placement="left">
      <sonic-button>Left</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-pop class="inline-block" placement="right">
      <sonic-button>Right</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-pop class="inline-block" placement="top">
      <sonic-button>Top</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-pop class="inline-block" placement="bottom">
      <sonic-button>Bottom</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>

Shadow

<sonic-pop class="inline-block" shadow="none" placement='top' >
      <sonic-button>None</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-pop class="inline-block" shadow="sm"  placement='top'>
      <sonic-button>Small</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-pop class="inline-block" shadow="md"  placement='top'>
      <sonic-button>Medium</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-pop class="inline-block" shadow="lg"  placement='top'>
      <sonic-button>Large</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>

noToggle

<sonic-pop class="inline-block"  noToggle>
      <sonic-button>No toggle on click</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-pop class="inline-block" >
      <sonic-button>Default toggle on click</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>

manual

<sonic-pop class="inline-block" manual id="manualPop">
      <sonic-button onclick="alert('customAction without opening Pop content')">Manual doesn't open on click</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item>Hourra !</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-button onclick="document.getElementById('manualPop').show()" class="ml-5"  variant="outline">
      <sonic-icon name="sparkles" library="custom"></sonic-icon>
      Click to open pop
    </sonic-button>