StippleUI.Chips.chip - Function
  chip(args...; kwargs...)

The chip component is basically a simple UI block entity, representing for example more advanced underlying data, such as a contact, in a compact way.

Chips can contain entities such as an avatar, text or an icon, optionally having a pointer too. They can also be closed or removed if configured so.

Examples

View

julia> chip("Add to calendar", icon="event")

Arguments

  1. Content
  • icon::String - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"
  • iconright::String - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"
  • iconremove::String - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"
  • iconselected::String - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"
  • label::Union{String, Int} - Chip's content as string; overrides default slot if specified ex. "Joe Doe" "Book"
  1. General
  • tabindex::Union{Int, String} - Tabindex HTML attribute value ex. 0 100
  1. Model
  • value::Bool - Model of the component determining if chip should be rendered or not default. true
  • selected::Bool - Model for chip if it's selected or not. Needs to be set to a model property.
  1. State
  • clickable::Bool - Is chip clickable? If it's the case, then it will add hover effects and emit 'click' events
  • removable::Bool - Is chip removable? If it's the case, then it will add a close button and emit 'remove' events
  • disable::Bool - Put component in disabled mode
  1. Style
  • ripple::Union{Bool, Dict} - Configure material ripple (disable it by setting it to 'false' or supply a config object) default. true ex. false { early: true, center: true, color: 'teal', keyCodes: [] }
  • dense::Bool - Dense mode; occupies less space
  • size::String - chip size name or a CSS unit including unit name ex. "xs" "sm" "md" "lg" "xl" "1rem"
  • dark::Bool - Notify the component that the background is a dark color
  • color::String - Color name for component from the Color Palette eg. "primary" "teal-10"
  • square::Bool - Sets a low value for border-radius instead of the default one, making it close to a square
  • outline::Bool - Display using the 'outline' design

source


Checkboxes

Datepickers

Genie