Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ability to show block title over the border #87

Open
eugener opened this issue Jun 16, 2022 · 5 comments
Open

Add ability to show block title over the border #87

eugener opened this issue Jun 16, 2022 · 5 comments
Labels
enhancement New feature or request

Comments

@eugener
Copy link

eugener commented Jun 16, 2022

The title could be shown either on top or bottom of the block.
Here one example of such UI

The API might look like the following

var style = lipgloss.NewStyle().
    BorderStyle(lipgloss.NormalBorder()).
    BorderForeground(lipgloss.Color("63")).
    Title(lipgloss.Top, "Title")

There is also a need to change the title dynamically

  style.SetTitle((lipgloss.Top, "New Title"))

Titles which do not fit the width of the block can be automatically truncated at the front or back. The fact of truncation can be represented by adding character

@meowgorithm
Copy link
Member

meowgorithm commented Jun 16, 2022

Implementation specifics aside, this seems like a good addition, though it may also be better off as a standalone component. If we were to add it to the library we'd also need to be able to set colors as well as the option to have both a top and bottom label simultaneously, and potential horizontal padding on the label.

If this is something you need right now here's a basic implementation you can start from: https://gist.github.com/meowgorithm/1777377a43373f563476a2bcb7d89306

@eugener
Copy link
Author

eugener commented Jun 16, 2022

This is pretty similar to what I had to implement within the app I'm working on.
Addition of Title API to styles would make it no-brainer. Title colors and horizontal alignment (left, center,right) would be a welcome addition too!

@eugener
Copy link
Author

eugener commented Jul 31, 2022

@meowgorithm Please take a look at related PR #97. Hopefully, with few iterations, this API can become a part of the library

@meowgorithm
Copy link
Member

Thanks @eugener. I’m on holiday for the next few weeks and will look at it when I’m back. I do think this is a common enough request that we should accommodate it.

@greenm01
Copy link

greenm01 commented Sep 7, 2022

I would also like to add a title to my border, similar to TermUI:
https://raw.githubusercontent.com/gizak/termui/master/_assets/demo.gif

Thanks!

@muesli muesli added the enhancement New feature or request label Oct 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants