search

connors / photon

The fastest way to build beautiful Electron apps using simple HTML and CSS
photonkit.com
MIT License
10.01k stars 580 forks source link

Component - Split Buttons #41

Closed paranoid-android closed 8 years ago

paranoid-android commented 8 years ago

In the "App Store" app in Mac OS, users can choose to "Download" or "Get" an app. Alternatively, a user can click the "v" button beside the word "Download" and "Get" to see more options. Options like: "Copy Link", "Tell a Friend", and "Share on Twitter".

It would be really nice if Photon supported split buttons.

tjisousa commented 8 years ago

I'm interested in adding this feature, but I've a question: How should they look like? Same as in App Store?

paranoid-android commented 8 years ago

Cool.

I really like what's been built so far. I like the fact that Photon has an opinion and is trying to remain consistent with Mac OS X. With that in mind, I went through all of the baked-in apps and the system preferences. Unfortunately, I did not find a pure split button anywhere.

For that reason, I'm going to share an opinion on what I think it should look like while still trying to be consistent with the OS X theme.

In my opinion, I think a split button should look close to the image provided. I'm not a graphic designer. So, it's my best attempt. I say that because I think the padding is off in my picture. But the idea is here:

split-button

In my opinion, the split button should behave like the Bootstrap Split Button in the fact that a developer can:

  1. Decide whether the split part comes before or after the main button.
  2. Decide which icon they want to use. Sometimes you may want to use a "^", sometimes a "v", other times a "+", yet at other times a "-". I'm sure there are plenty of other cases. For that reason, just let someone pick the icon.

Thanks so much for taking this on. I wish I was more skilled with CSS to provide more impact.

developit commented 8 years ago

You could just use a button-group with two buttons. For the small button, you'd need to knock the horizontal padding down from the default of 8px:

<div class="btn-group">
    <button class="btn btn-default" style="padding:3px;">
        <span class="icon icon-left-open"></span>
    </button>
    <button class="btn btn-default">Today</button>
</div>
preview preview 2
paranoid-android commented 8 years ago

Cool! Thanks for the feedback.