Once you’ve got your CommandBar up and running, what’s the next move? If you’re someone who enjoys design, you’re probably eager to give it a unique and stylish look, right? 💅
Throughout these steps, we’ll be tailoring the CommandBar to reflect your brand identity.
… into this. 😎
Here’s what you exactly need 👇:
- Open Editor → Settings tab → Styles → Skins (Theme)
Here’s where your theme/skin is currently at…
2. Navigate to
Base and add these values.
3. Now, go to
Bar to adjust
Placeholder to update the font color.
4. Then, go to
Input and adjust padding styles.
At this point you should have something like this… easy right? 😎
…shall we continue?
5. Go to
Category Header and update the default values.
6. Navigate to the
Search Tab and
Option Selected styles section and add these values.
Your CommandBar should look something like this…
7. Now, here’s the fun part. Let’s add the custom
footer using CommandBar Enterprise SDK.
footer component using
windows.CommandBar.setCustomComponent('footer', () => ...);
This is what it should look like..
header component using
windows.CommandBar.setCustomComponent('header', () => ...);
Here’s what it should look like…
…and you’re done 🎉
Thanks for reading and following along. I hope that this story will give value to you at some point. Please feel free to reach out if you have any questions.