{"id":15015852,"url":"https://github.com/knownasilya/ember-toggle","last_synced_at":"2025-04-05T07:01:50.681Z","repository":{"id":21716548,"uuid":"25038104","full_name":"knownasilya/ember-toggle","owner":"knownasilya","description":"Checkbox based Toggle Switches for Ember","archived":false,"fork":false,"pushed_at":"2023-08-03T03:10:48.000Z","size":5795,"stargazers_count":112,"open_issues_count":18,"forks_count":50,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-29T06:01:38.840Z","etag":null,"topics":["checkbox","checkboxes","component","ember","ember-addon","toggle-switches"],"latest_commit_sha":null,"homepage":"http://knownasilya.github.io/ember-toggle/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/knownasilya.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"knownasilya"}},"created_at":"2014-10-10T14:04:50.000Z","updated_at":"2024-09-02T16:19:27.000Z","dependencies_parsed_at":"2024-06-18T13:57:28.210Z","dependency_job_id":"936ea678-652d-4215-af54-9819dade2002","html_url":"https://github.com/knownasilya/ember-toggle","commit_stats":{"total_commits":373,"total_committers":25,"mean_commits":14.92,"dds":0.5281501340482574,"last_synced_commit":"23db918d1371b6c0918986efc33244ec26099b23"},"previous_names":["knownasilya/ember-cli-toggle"],"tags_count":69,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knownasilya%2Fember-toggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knownasilya%2Fember-toggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knownasilya%2Fember-toggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knownasilya%2Fember-toggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/knownasilya","download_url":"https://codeload.github.com/knownasilya/ember-toggle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299829,"owners_count":20916190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["checkbox","checkboxes","component","ember","ember-addon","toggle-switches"],"created_at":"2024-09-24T19:48:03.253Z","updated_at":"2025-04-05T07:01:50.539Z","avatar_url":"https://github.com/knownasilya.png","language":"JavaScript","readme":"# ember-toggle\n\nCheckbox based Toggle Switch component with swipe/drag support for Ember.\n\n[![NPM][npm-badge]][npm-badge-url]\n![CI](https://github.com/knownasilya/ember-toggle/workflows/CI/badge.svg)\n[![Ember Observer Score][ember-observer-badge]][ember-observer-url]\n\nBased on [this](http://codepen.io/mallendeo/pen/eLIiG/) codepen.\nHere's the official [demo] using this component.\n\n## Compatibility\n\n- Ember.js v3.28 or above\n- Ember CLI v3.28 or above\n- Node.js v16 or above\n\n## Install\n\n`ember install ember-toggle`\n\n## Basic Usage\n\n```hbs\n\u003cXToggle @value={{this.myValue}} @onToggle={{fn (mut this.myValue)}} /\u003e\n```\n\n### Themes\n\n![Examples Of Available Themes](vendor/ember-toggle/example-images/themes.png)\n\nThere are many `themes` which change the visual appearance of the toggle.\nCheck the [demo] for interactive examples.\n\n- `'default'`\n- `'ios'`\n- `'light'`\n- `'flat'`\n- `'flip'`\n- `'skewed'`\n- `'material'`\n\n![Dark Themes](vendor/ember-toggle/example-images/themes-dark.png)\n\nUse it along with the `@variant='auto'` or `@variant='dark'` option to get a dark themed version, works only with 'ios', 'flat' and 'material' theme.\n\n\u003e Example of changing the theme\n\n```hbs\n\u003cXToggle\n  @theme='ios'\n  @variant='dark'\n  @value={{this.toggled}}\n  @onToggle={{fn (mut this.toggled)}}\n/\u003e\n```\n\n_Note: By default all themes are included, see the Configuration section to change which themes are included/excluded._\n\n### Size\n\nYou can also adjust the size of the widget by use of the `size` property. Valid sizes are:\n\n- `'small'`\n- `'medium'`\n- `'large'`\n\nThis option is available on all themes but is a less sensible choice for those themes which actually\ninclude the label within the control (e.g., `skew` and `flip`).\n\n### Labels\n\nYou can customize labels (The text the user sees for the two states) and their associated values:\n\n```hbs\n\u003cXToggle\n  @onLabel='Enabled'\n  @offLabel='Disabled'\n  @showLabels={{true}}\n  @value={{this.myValue}}\n  @onToggle={{fn (mut this.myValue)}}\n/\u003e\n```\n\nIf you want your labels to be displayed, then you must set `showLabels` to `true`.\n\n### Available Options\n\n- `value` - The state of the switch, can be `true` or `false`. Defaults to `false`.\n- `onToggle` - The action that should change the state of `value`.\n- `theme` - One of 'light', 'ios', 'flat', 'material', 'flip', 'skewed', 'default'.\n- `variant` - One of `dark` or `auto`. Use `auto` for system dependent light/dark theme. Works only with `ios`, `flat` and `material` theme.\n  Defaults to 'default' if not specified.\n- `size` - One of 'small', 'medium', 'large'.\n  Defaults to 'medium' if not specified.\n- `onLabel` - The label for the _on_ state. Defaults to 'On'.\n- `offLabel` - The label for the _off_ state. Defaults to 'Off'.\n- `showLabels` - Defaults to 'false', if 'true' will display labels on left and ride side of toggle switch\n- `disabled` - Defaults to `false`, which means you can click the toggle.\n  When `true`, an `.x-toggle-disabled` class is set on the toggle and an `.x-toggle-container-disabled` class is set on the component.\n- `name` - A name to differentiate multiple toggles, gets passed to the `toggle` action. Defaults to 'default'.\n\n### Configuring\n\nAdd a configuration for `ember-toggle` to include only the themes that\nyou will use, as well as any other default settings that apply to all toggles\nin your app. These defaults can be overriden on a per toggle basis\n(except the options regarding themes being added to your app's build step).\n\nThis configuration is located in `config/environment.js`.  \nThe following is an example of how you can configure this addon:\n\n```js\nENV['ember-toggle'] = {\n  includedThemes: ['light', 'default', 'flip'],\n  excludedThemes: ['flip'],\n  excludeBaseStyles: false, // defaults to false\n  defaultShowLabels: true, // defaults to false\n  defaultTheme: 'light', // defaults to 'default'\n  defaultSize: 'small', // defaults to 'medium'\n  defaultOffLabel: 'False', // defaults to 'Off'\n  defaultOnLabel: 'True', // defaults to 'On'\n};\n```\n\n\u003e note: the IOS theme is referred to as just `ios` not `ios7` as was indicated in the originating CSS source\n\nTo exclude (not include) a theme, means that it's css styles will not be bundled with\nyour application, keeping your app's css bundle size smaller.\n\n\u003e **Note:** including a blank array e.g. `includeThemes: []` will not include any themes, leaving\n\u003e you to define your own theme styles. See the `vendor/ember-toggle/themes` directory\n\u003e for reference.\n\u003e **Note:** you may also want to set `excludeBaseStyles: true` so that this addon doesn't include the styles\n\u003e used by all the themes.\n\n## Advanced Usage\n\nIf you need custom labels, additional markup, or non-standard behavior, you are in the right section.\n\nThe `x-toggle` component also provides a composable component API.\n\n```hbs\n\u003cXToggle\n  @showLabels={{true}}\n  @value={{this.value}}\n  @onToggle={{fn (mut this.value)}}\n  as |toggle|\n\u003e\n  \u003ctoggle.offLabel /\u003e\n  \u003ctoggle.switch /\u003e\n  \u003ctoggle.onLabel /\u003e\n\u003c/XToggle\u003e\n```\n\nThe above is a simple example that returns a basic toggle, but you can see how\nthis could be used to wrap the switch or the labels in custom markup or logic.\n\n### Single Label\n\nThis format allows greater flexibility with labels, like the single label use-case.\n\n```hbs\n\u003cXToggle\n  @showLabels={{true}}\n  @value={{this.value}}\n  @onToggle={{fn (mut this.value)}}\n  as |toggle|\n\u003e\n  \u003ctoggle.label @value={{not this.value}}\u003e\n    \u003cb\u003eturn {{if this.value 'off' 'on'}}\u003c/b\u003e\n  \u003c/toggle.label\u003e\n\n  \u003ctoggle.switch @theme='flip' @onLabel='diff on' @offLabel='diff off' /\u003e\n\u003c/XToggle\u003e\n```\n\n\u003e Note: The `not` helper is a custom Ember helper in the above example.\n\n## Contributing\n\nSee the [Contributing] guide for details.\n\n## License\n\nMIT\n\n[npm-badge]: https://img.shields.io/npm/v/ember-toggle.svg\n[npm-badge-url]: https://www.npmjs.com/package/ember-toggle\n[ember-observer-badge]: http://emberobserver.com/badges/ember-toggle.svg\n[ember-observer-url]: http://emberobserver.com/addons/ember-toggle\n[demo]: http://knownasilya.github.io/ember-toggle/\n[contributing]: CONTRIBUTING.md\n[simplify]: https://github.com/knownasilya/ember-toggle/tree/simplify\n","funding_links":["https://github.com/sponsors/knownasilya"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknownasilya%2Fember-toggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fknownasilya%2Fember-toggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknownasilya%2Fember-toggle/lists"}