Dropdown Item

Code

Dropdown item

Overview

Grouping container within a dropdown. This provides the appropriate semantics for a group of items with a corresponding label

Properties

Property	Attribute	Description	Type	Default
`headline`	`headline`		`string`	`undefined`

Label

Dropdown item

New

Dropdown Item

<certara-dropdown button-label="Dropdown">
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
</certara-dropdown>

Properties

Property	Attribute	Description	Type	Default
`description`	`description`	Additional descriptive text that shows below the label	`string`	`undefined`
`hideMenuOnClick`	`hide-menu-on-click`	The default behavior of the dropdown menu will close when this item is clicked	`boolean`	`true`
`href`	`href`	certara-dropdown-item renders as a `<button>` element by default, unless given an `href`	`string`	`undefined`

Events

Event	Description	Type
`certaraClick`	Standard event emitted when the dropdown item is clicked	`CustomEvent<any>`
`certaraDropdownItemClick`	Internal event emitted when the dropdown item is clicked, used by certara-dropdown	`CustomEvent<any>`

Slots

Slot	Description
	Default dropdown-item content
`"description"`	Slot for descriptive text
`"right-content"`	Right-aligned content area for buttons and additional actions

@standardDropdownItem(label="", href="", data-toggle="")

PropTypeDefaultDescriptionCopy

label
string
blank
creates a label for anchor in the dropdown item
href
string
#
url for anchor inside dropdown item
data-toggle
string
blank
appends a data-toggle="" to the dropdown item

<div class="dropdown">
  <button id="dropdown" type="button" class="btn btn--secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
      Dropdown
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown">
    <li><button class="dropdown-item">Dropdown item</button></li>
  </ul>
</div>

Checkboxes

Label

Disabled label

Label

Certara UI
HTML

Label

Disabled label

Label

<certara-dropdown button-label="Status">
<certara-dropdown-checkbox>Label</certara-dropdown-checkbox>
<certara-dropdown-checkbox disabled>Disabled label</certara-dropdown-checkbox>
<certara-dropdown-checkbox description="Description">Label</certara-dropdown-checkbox>
</certara-dropdown>

Overview

The <certara-dropdown-checkbox> uses all props from <certara-checkbox> with the exception of layout

Properties

Property	Attribute	Description	Type	Default
`checked`	`checked`		`boolean`	`false`
`description`	`description`	Additional descriptive text that shows below the label	`string`	`undefined`
`disabled`	`disabled`		`boolean`	`false`
`indeterminate`	`indeterminate`		`boolean`	`false`
`name`	`name`		`string`	`this.inputId`
`size`	`size`		`"md" \| "sm"`	`'md'`
`value`	`value`		`any`	`'on'`

Events

Event	Description	Type
`certaraBlur`		`CustomEvent<void>`
`certaraChange`		`CustomEvent<CheckboxChangeEventDetail<any>>`
`certaraFocus`		`CustomEvent<void>`

Slots

Slot	Description
	Default dropdown-item-checkbox content
`"description"`	Slot for descriptive text

Dependencies

Depends on

certara-checkbox

Graph

graph TD;
  certara-dropdown-checkbox --> certara-checkbox
  certara-checkbox --> certara-help-block
  style certara-dropdown-checkbox fill:#f9f,stroke:#333,stroke-width:4px

<li class="dropdown-item">
  <div class="form-check">
    <input id="check" type="checkbox" class="form-check__input" />
    <label class="form-check__label" for="check">…</label>
  </div>
</li>

Design resources

View component in Figma

Dropdown Item

Code

certara-dropdown-group

Overview

Properties

certara-dropdown-item

Properties

Events

Slots

PropTypeDefaultDescriptionCopy

Checkboxes

certara-dropdown-checkbox

Overview

Properties

Events

Slots

Dependencies

Depends on

Graph

Design resources