Naviga Writer
8.1.7
8.1.7
  • Naviga Writer
  • Release notes
    • 8.1.7
    • 8.1.6
    • 8.1.5
    • 8.1.4
    • 8.1.3
    • 8.1.2
    • 8.1.1
    • 8.1
    • 8.0
    • 7.2
    • 7.1.0
    • 7.0.0
    • 6.5.x
    • 6.5.0
    • 6.4.1
    • 6.4.0
    • 6.3.5
    • 6.3.4
    • 6.3.3
    • 6.3.2
    • 6.3.1
    • 6.2.2
    • 6.2.1
    • 6.2.0
    • 6.1.2
    • 6.1.1
    • 6.1.0
    • 6.0.0
    • 5.3.0
  • Introduction
    • Authoring
    • Developing
    • Publishing
    • History
  • User Guide
    • Writer User Guide
      • Create a new article
      • Top bar
        • Setting menu
        • Article name
        • Search and replace words
        • Version history of an article
          • List of versions
          • Changes in each version
          • Restore to an older version
        • Locked article
        • Active Users
        • Copy article url
        • Save and publish flow
        • History Button
      • Content area
        • Image gallery
        • Embed map
        • Table
        • Teaser
        • Content part
        • HTML embed
        • Upload image
        • Upload PDF
        • Textstyles
        • Lists
        • Special character
        • Marker tool
      • Right Sidebar
        • Meta
          • Author
          • Channels
        • Integrations
        • Image and Article search
      • Bottom bar
        • Article information
        • Edit metadata on linked images
        • Article size
        • Text information
        • Language menu
      • Images User Guide
        • Upload images
        • Metadata of the image
        • Cropping images
        • Download
      • Personal Writer Template
      • Writer Keyboard Shortcuts
      • Text Management
      • Common questions when starting using Writer
  • Admin Guide
    • Configuration Files
    • Configurations Guide
      • Right Sidebar
      • Text Information
      • Content menu
    • Article Templates Configuration
    • Byline configuration
    • Language Configuration
    • Publish Flow
      • Default configuration definitions
      • Publish flow config details
      • Preconditions for roles in the publish flow
    • Generic Properties
      • Configuration
    • Image Services
      • ImEngine
      • Imgix
    • Plugins
      • Naviga developed plugins
        • Plugins in earlier versions of Writer
      • Deprecated Plugins
      • Third-party plugins
  • Developer guide
    • Upgrade Guides
      • 8.0 - Image/PDF upload changes
      • 8.0 - Opening an Article
    • Writer Plugin Development
      • Quickstart
      • Type Definitions (beta)
      • Plugin overview
      • Creating a content object plugin
      • Validation and hooks
      • Interacting with external resources
    • Writer Plugin Building Blocks
      • Package
      • Component
      • Node
      • Converter
      • Events
    • Writer Plugin Style Guide
      • CSS Guidelines
      • CSS variables, colors and fonts
      • UI Components
    • Tutorials
      • Popover & text analysis
      • Search & replace
      • Concept interaction
      • Integrating External Spell Checking
    • Infomaker NewsML
      • Overview
      • Important: About inline notes
      • Document relations and types
      • Extensions XSD
      • NewsItem
      • ConceptItem
      • PlanningItem
      • Examples
        • NewsItem - Text
        • NewsItem - Picture
        • NewsItem - PDF
        • ConceptItem - Author
        • ConceptItem - Category
        • ConceptItem - Channel
        • ConceptItem - Content Profile
        • ConceptItem - Event
        • ConceptItem - Organisation
        • ConceptItem - Person
        • ConceptItem - Place (point)
        • ConceptItem - Place (polygon)
        • ConceptItem - Section
        • ConceptItem - Story
        • ConceptItem - Topic
        • PlanningItem
    • Media Enrichment
      • Images
  • API Reference
    • Writer Api
      • Api
      • Article
      • Browser
      • Concept
      • ConceptService
      • Document
      • Events
      • NewsItem
      • Router
      • Ui
      • Upload
      • User
      • settings
      • History
      • Settings
    • UI Components
      • UIAvatar
      • UIButton
      • UIByline
      • UICheckbox
      • UIChip
      • UIDatePicker
      • UIDatetimeFieldEditor
      • UIDropdown
      • UIFieldEditor
      • UIIconButton
      • UIInlineImage
      • UIPagination
      • UISelect
      • UITimePicker
      • UIToggle
      • UITooltip
      • UIInputText
      • UITextarea
      • UIButtonGroup
      • UIConceptSearch
      • UIDateTimePicker
      • UIInputSearch
      • UIIcon
      • UIPill
      • UISpinner
      • UIButtonList
      • UIIconBadge
      • UIIconButtonMenu
      • UIInputPassword
Powered by GitBook
On this page
  • Example
  • list
  • UISelect.list
  • Example

Was this helpful?

  1. API Reference
  2. UI Components

UISelect

This component renders a list of selectable items. Toggles, Buttons or Dropdown. Should be rewritten because kind of mess.

Since: 7.0.0 (3.2.0)

Name
Type
Default
Description

list

placeholder

string

For dropdown. To provied placeholder value

emptyOptionLabel

string

For dropdown. Used insted of placeholder if want to provied reset option to dropdown

size

string

""large""

Only available for dropdown Size of select. Variants: large|small

direction

string

""down""

Only available for dropdown Direction of rendered options list. Variants: down|up

type

string

""default""

Only available for dropdown Different types will be passed into this property. Variants default|secondary

disabled

boolean

false

Only available for dropdown Disable state

optionsListAlign

string

""left""

Only available for dropdown Options list postion agaist parent

tabindex

number

0

Only available for dropdown - Tabindex

isSelected

function

Required - Callback check if selected

onChangeList

function

Required - Callback when list changes

Example

import {UISelect} from 'writer'

render($$) {
    const el = $$('div')
    return el.append(
      $$(UISelect, {
          list: this.state.list,
          onChangeList: (listItems, selectedItem) => {
             this.addToSelectedItems(selectedItem)
          },
          isSelected: (listItems, item) => {
              const selectedItems = this.getSelectedItems()
              return selectedItems.some((selectedItem) => return selectedItem.value === item.value)
          }
      })
    )
}

list

UISelect.list

This component renders a list of selectable items.

It supports 3 types of lists: drop-down list, toggle list and button list.

The list is defined as a property, that should contain:

Name
Type
Default
Description

label

string

Required - Only on top level list

type

string

Required - Type of output. toggle|button|dropdown

multivalue

boolean

false

Determines you should be able to select many options. Don't works with dropdown

values

Array.<object>

Required - List with values

values.title

string

Required - Title for value in list

values.list

Toggle option. Optional list to be display when choosen

Example

{
    label: '[a list label]',
    type: '[dropdown/toggle/button]',
    values: [
        {
            title: 'title 1', ...
        },
        {
            title: 'title 2', ...
        },
        {
            title: 'Additional options',
            list: {
                title: 'Other options',
                type: '[dropdown/toggle/button]',
                values: [
                    ...
                ]
            }
        }
    ]
}
PreviousUIPaginationNextUITimePicker

Was this helpful?

Required - List object containing info for rendering. See

list
UISelect.list
list