Git Product home page Git Product logo

Comments (3)

chrislopresto avatar chrislopresto commented on June 21, 2024

@boydkr Could you share the template where you use variants? The README doesn't document this yet, but freestyle-variant components are designed to be used inside a freestyle-collection component as follows:

{{#freestyle-collection as |collection|}}
  {{#freestyle-variant collection=collection key='no-num'}}
    {{#freestyle-usage "foo-foo-no-num" title="Information"}}
      {{foo-foo title="Information"}}
    {{/freestyle-usage}}
  {{/freestyle-variant}}

  {{#freestyle-variant collection=collection key='with-num'}}
    {{#freestyle-usage "foo-foo-people" title="People"}}
      {{foo-foo title="People" num=55}}
    {{/freestyle-usage}}
  {{/freestyle-variant}}

  {{#freestyle-variant collection=collection key='with-icon'}}
    {{#freestyle-usage "foo-foo-twitter" title="Twitter"}}
      {{foo-foo title="Twitter" icon="twitter"}}
    {{/freestyle-usage}}
  {{/freestyle-variant}}
{{/freestyle-collection}}

from ember-freestyle.

boydkr avatar boydkr commented on June 21, 2024

Here is an excerpt

{{#freestyle-subsection name="Graphics" section=section}}

      {{#freestyle-collection title="Preview Graphics" defaultKey='very good' as |collection|}}
        {{#freestyle-variant collection=collection key='very good' class="FreestyleCollection-variant"}}
          {{#freestyle-usage 'graphic4' title="Very Good" inline=(eq collection.activeKey 'all')}}
            {{graphic foo=4 size="preview"}}
          {{/freestyle-usage}}
        {{/freestyle-variant}}
        {{#freestyle-variant collection=collection key='good' class="FreestyleCollection-variant"}}
          {{#freestyle-usage 'graphic3' title="Good" inline=(eq collection.activeKey 'all')}}
            {{graphic foo=3 size="preview"}}
          {{/freestyle-usage}}
        {{/freestyle-variant}}
        {{#freestyle-variant collection=collection key='neutral' class="FreestyleCollection-variant"}}
          {{#freestyle-usage 'graphic2' title="Neutral" inline=(eq collection.activeKey 'all')}}
            {{graphic foo=2
                                size="preview"}}
          {{/freestyle-usage}}
        {{/freestyle-variant}}
        {{#freestyle-variant collection=collection key='poor' class="FreestyleCollection-variant"}}
          {{#freestyle-usage 'graphic1' title="Poor" inline=(eq collection.activeKey 'all')}}
            {{graphic foo=1 size="preview"}}
          {{/freestyle-usage}}
        {{/freestyle-variant}}
        {{#freestyle-variant collection=collection key='very poor' class="FreestyleCollection-variant"}}
          {{#freestyle-usage 'graphic0' title="Very Poor" inline=(eq collection.activeKey 'all')}}
            {{graphic foo=0 size="preview"}}
          {{/freestyle-usage}}
        {{/freestyle-variant}}
      {{/freestyle-collection}}

      {{#freestyle-usage 'graphic-incomplete-0' title="Very Poor Incomplete" inline=true}}
        {{graphic complete=false
                        foo=0
                        size="preview"}}
      {{/freestyle-usage}}

{{/freestyle-subsection}}

from ember-freestyle.

chrislopresto avatar chrislopresto commented on June 21, 2024

Ah, gotcha. Apparently I didn't pull in the inline CSS rule tied to the freestyle-variant classNameBinding. Will be an easy fix...

http://github.com/chrislopresto/ember-freestyle/blob/1af16595bfa452eb91df261e33772003a07b30e2/app/styles/components/freestyle-collection.scss#L55-L57 should be moved into a new freestyle-variant.scss partial as:

.FreestyleVariant {
  &--inline {
    display: inline;
  }
}

We should also update the README documentation to include:

  • one of our usage snippets from this issue tidied up
  • an explanation of the inline property on the freestyle-variant component

Any chance you have time to make a PR?

from ember-freestyle.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.