Spade

Mini Shell

Directory:~$ /home/lmsyaran/public_html/templates/g5_hydrogen/custom/particles/
Upload File

[Home] [System Details] [Kill Me]
Current File:~$ /home/lmsyaran/public_html/templates/g5_hydrogen/custom/particles/jlsearch.yaml

name: JL Search
description: Easily create a nice looking search.
type: particle
icon: fa-search
form:
  overrideable: false
  fields:
    enabled:
      type: input.checkbox
      label: Enabled
      description: Globally enable to the particles.
      default: true
    _tabs:
      type: container.tabs
      fields:
        _tab_content:
          label: Content
          fields:
            title:
              type: input.text
              label: Title
              description: Customize the search title button when hovering.
              default: Search Form
              placeholder: Search...
            placeholder:
              type: input.text
              label: Placeholder
              description: Input your custom Search placeholder.
              placeholder: 'Your keyword...'
            search_style:
              type: select.select
              label: Search Type
              description: Select the search style.
              default: default
              options:
                 modal: Modal (Navbar Position)
                 default: Default
                 drop: Drop
            search_lineheight:
              type: input.number
              label: Line Height
              description: It's useful if you assign search to
navigation, you can modify the height of search item to match with your
menu item's height.
              placeholder: 60    
            toggle_color:
              type: input.colorpicker
              label: Toggle Color
              description: Customize the Toggle color.
            toggle_hover_color:
              type: input.colorpicker
              label: Toggle Hover Color
              description: Customize the Toggle Hover color.              
            form_style:
              type: select.select
              label: Form Style
              description: Set the search form style.
              default: default
              options:
                 danger: Danger
                 default: Default
                 success: Success
                 blank: Blank
            drop_position:
              type: select.select
              label: Drop Position
              description: Select the position for Drop search form style.
              default: left-center
              options:
                 left-center: Left Center
                 right-center: Right Center
            drop_mode:
              type: select.select
              label: Mode
              description: Display the drop search on click or hover.
              default: click
              options:
                 hover: Hover
                 click: Click
            search_icon:
              type: select.select
              label: Search Icon Position
              description: Set the position for icon style.
              default: right
              options:
                 left: Left
                 none: None
                 right: Right
            large_form:
              type: input.checkbox
              label: Show Large Form
              description: Show large search form style.
              default: false
            search_text_color:
              type: select.select
              label: Inverse Color
              description: Set light or dark color mode for input text,
icon.
              default: default
              options:
                default: None
                light: Light
                dark: Dark
            padding:
              type: input.text
              label: Padding
              description: Custom the padding(rem units) for search form if
you assign the search to navigation section. Example set the padding same
with navigation menu items.
              placeholder: Top Right Bottom Left
            class:
              type: input.selectize
              label: CSS Classes
              description: CSS class name for the particle.
        _tab_general:
          label: General
          overridable: false
          fields:
            particle_title_info:
              type: separator.note
              class: alert alert-info
              content: 'Particle Title Style'
            particle_title:
              type: input.text
              label: Title
              description: Add an optional particle title.
              placeholder: Enter particle title
            particle_title_style:
              type: select.select
              label: Style
              description: Title styles differ in font-size but may also
come with a predefined color, size and font.
              default: h3
              options:
                 default: None
                 heading-2xlarge: 2XLarge
                 heading-xlarge: XLarge
                 heading-large: Large
                 heading-medium: Medium
                 heading-small: Small
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
            particle_title_decoration:
              type: select.select
              label: Decoration
              description: Decorate the headline with a divider, bullet or
a line that is vertically centered to the heading.
              default: none
              options:
                 none: None
                 divider: Divider
                 bullet: Bullet
                 line: Line
            particle_title_align:
              type: select.select
              label: Alignment
              description: Center, left and right alignment for Particle
title.
              default: inherit
              options:
                  inherit: Inherit
                  left: Left
                  center: Center
                  right: Right
                  justify: Justify
            particle_predefined_color:
              type: select.select
              label: Predefined Color
              description: Select the text color. If the Background option
is selected, styles that don't apply a background image use the
primary color instead.
              default: default
              options:
                 default: None
                 muted: Muted
                 emphasis: Emphasis
                 primary: Primary
                 secondary: Secondary
                 success: Success
                 warning: Warning
                 danger: Danger
            particle_title_color:
              type: input.colorpicker
              label: Custom Color
              description: Customize the title color instead using
predefined color mode. Set the Predefined color to None before using this
color customization mode.
            particle_title_fontsize:
              type: input.number
              label: Font Size
              description: Customize the particle title font size.
              min: 0
            particle_title_element:
              type: select.select
              label: HTML Element
              description: Choose one of the elements to fit your semantic
structure.
              default: h3
              options:
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
                 div: div
            general_content_info:
              type: separator.note
              class: alert alert-info
              content: 'General Particle Settings'
            align:
              type: select.select
              label: Text Alignment
              description: Center, left and right alignment may depend on a
breakpoint and require a fallback.
              default: inherit
              options:
                  inherit: None
                  left: Left
                  center: Center
                  right: Right
                  justify: Justify
            breakpoint:
              type: select.select
              label: Alignment Breakpoint
              description: Define the device width from which the alignment
will apply.
              default: always
              options:
                  always: Always
                  s: Small (Phone Landscape)
                  m: Medium (Tablet Landscape)
                  l: Large (Desktop)
                  xl: X-Large (Large Screens)
            fallback:
              type: select.select
              label: Alignment Fallback
              description: Define an alignment fallback for device widths
below the breakpoint.
              default: inherit
              options:
                  inherit: None
                  left: Left
                  center: Center
                  right: Right
                  justify: Justify
            g_maxwidth:
              type: select.select
              label: Max Width
              description: Set the maximum content width.
              default: inherit
              options:
                  inherit: None
                  small: Small
                  medium: Medium
                  large: Large
                  xlarge: X-Large
                  xxlarge: XX-Large
            g_maxwidth_alignment:
              type: select.select
              label: Max Width Alignment
              description: Define the alignment in case the container
exceeds the element's max-width.
              default: left
              options:
                  left: Left
                  center: Center
                  right: Right
            g_maxwidth_breakpoint:
              type: select.select
              label: Max Width Breakpoint
              description: Define the device width from which the
element's max-width will apply.
              default: always
              options:
                  always: Always
                  s: Small (Phone Landscape)
                  m: Medium (Tablet Landscape)
                  l: Large (Desktop)
                  xl: X-Large (Large Screens)
            margin:
              type: select.select
              label: Margin
              description: Set the vertical margin.
              default: inherit
              options:
                  inherit: Keep existing
                  small: Small
                  default: Default
                  medium: Medium
                  large: Large
                  xlarge: X-Large
                  remove-vertical: None
            visibility:
              type: select.select
              label: Visibility
              description: Display the element only on this device width
and larger.
              default: inherit
              options:
                  inherit: Always
                  s: Small (Phone Landscape)
                  m: Medium (Tablet Landscape)
                  l: Large (Desktop)
                  xl: X-Large (Large Screens)
            general_animation_info:
              type: separator.note
              class: alert alert-info
              content: 'Animation Settings'
            animation:
              type: select.select
              label: Animation
              description: Apply an animation to particles once they enter
the viewport. This will animate all particles inside the section.
              default: inherit
              options:
                  inherit: None
                  fade: Fade
                  scale-up: Scale Up
                  scale-down: Scale Down
                  slide-top-small: Slide Top Small
                  slide-bottom-small: Slide Bottom Small
                  slide-left-small: Slide Left Small
                  slide-right-small: Slide Right Small
                  slide-top-medium: Slide Top Medium
                  slide-bottom-medium: Slide Bottom Medium
                  slide-left-medium: Slide Left Medium
                  slide-right-medium: Slide Right Medium
                  slide-top: Slide Top 100%
                  slide-bottom: Slide Bottom 100%
                  slide-left: Slide Left 100%
                  slide-right: Slide Right 100%
            animation_delay:
              type: input.number
              label: Animation Delay
              description: Set the delay animations for particle. Delay
time in ms.
              min: 0
              placeholder: 200
            animation_repeat:
              type: select.select
              label: Animation Repeat
              description: Repeat an animation to particle once it enter
the viewport.
              default: disabled
              options:
                enabled: Enable
                disabled: Disable
    copyright:
      type: separator.note
      class: alert alert-success
      content: 'JL Search <strong>Version: 2.1.3</strong>
Copyright (C) <a href="https://joomlead.com/"
target="_blank">https://joomlead.com</a> | <a
href="https://joomlead.com/g5/docs/search-particle-documentation/"
target="_blank">Documentation</a>'