CODEWITHSUNDEEP
githubatom-editor
RanRag
RanRag

Reputation: 49557

How to add checkbox toggle in github atom editor plugin

I want to add a functionality to an existing plugin and want to add an additional option in the plugin's Menu.

I want that option to look like below "untitled" entry:

Checkbox

Option will behave like an existing functionality we have in eclipse "Build Automatically" toggle.

enter image description here

I want that as soon as user sees this option in Atom plugin menu he knows whether it's enabled or not.

Do we have something existing in ATOM view.So, that I can look for reference.

Upvotes: 1

Views: 336

Answers (1)

Matthew Schuchard
Matthew Schuchard

Reputation: 28749

You can add this in the package settings menu instead of the Atom menu in a couple of ways.

First, there is the method of putting it directly in your code. Consider the following in the main.js for my package linter-ansible-linting:

config: {
  ansibleLintExecutablePath: {
    title: 'Ansible-Lint Executable Path',
    type: 'string',
    description: 'Path to Ansible-Lint executable (e.g. /usr/bin/ansible-lint) if not in shell env path.',
    default: 'ansible-lint',
  },
  useRulesDirs: {
    title: 'Use non-default rules directories with Ansible-Lint.',
    type: 'boolean',
    default: false,
  },
  rulesDirs: {
    title: 'Rules Directories',
    type: 'array',
    description: 'Non-default rules directories to use with Ansible-Lint. (only if use non-default rules directories checked)',
    default: ['/usr/local/lib/python2.7/site-packages/ansiblelint/rules', '/usr/local/lib/python2.7/dist-packages/ansiblelint/rules'],
    items: {
      type: 'string'
    }
  }
}

You can also put it in the package.json. Consider the following that someone else inside the Atom-Linter org put in a package I maintain linter-puppet-lint:

"configSchema": {
  "executablePath": {
    "title": "Executable path",
    "type": "string",
    "description": "Path to puppet-lint executable",
    "default": "puppet-lint"
  },
  "automaticFix": {
    "title": "Attempt to automatically fix warnings and errors",
    "type": "boolean",
    "default": false
  },
}

These will make the config settings available in the Settings menu for your package. Your specific setting is going to be a boolean, so I would recommend following the format for that type.

buildAutomatically: {
  title: 'Build Automatically',
  type: 'boolean',
  default: false,
}

"buildAutomatically: {
  "title": "Build Automatically",
  "type": "boolean",
  "default": false
}

Upvotes: 1

Related Questions