home
  • Blog
1.10
  • Getting Started
  • Getting Ember
  • Concepts
  • The Object Model
  • Application
  • Templates
  • Routing
  • Components
  • Controllers
  • Models
  • Views
  • Enumerables
  • Testing
  • Configuring Ember.js
  • Cookbook
    • Introduction
    • Contributing
    • User Interface and Interaction
      • Introduction
      • Adding CSS Classes to Your Components
      • Adding CSS Classes to Your Components Based on Properties
      • Focusing a Textfield after It's Been Inserted
      • Displaying Formatted Dates With Moment.js
      • Specifying Data-Driven Areas of Templates That Do Not Need To Update
      • Using Modal Dialogs
      • Resetting scroll on route changes
    • Event Handling & Data Binding
    • Helpers & Components
    • Working with Objects
  • Understanding Ember.js
  • Contributing to Ember.js
Old Guides - You are viewing the guides for Ember v1.10.0.
Go to v5.0.0

Adding CSS Classes to Your Components Based on Properties

Edit pencil

Problem

You want to add or remove CSS class names to your Ember Components based on properties of the component.

Solution

Add property names to the classNameBindings property of subclassed components.

Discussion

You can apply classes based on properties of the component, or even by properties bound to data passed into the component. This is done by binding the class attribute using classNameBindings.

classNameBindings: ['active'],
active: true

You can also set the class name based on a computed property.

classNameBindings: ['isActive'],
isActive: function() {
  return 'active';
}.property('someAttribute')

Another way would be to bind the class name to a bound property.

classNameBindings: ['isRelated:relative'],
isRelatedBinding: "content.isRelated" // value resolves to boolean

Example

JS Bin

See Customizing a Component's Element for further examples.

left arrow
Adding CSS Classes to Your Components
Focusing a Textfield after It's Been Inserted
right arrow
On this page

  • Problem
  • Solution
  • Discussion
  • Example
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2023 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue