go-lipgloss库使用

Github 仓库

基本类型

type Style

空结构体, 用于标记类型:

1
2
3
type Style struct {
	// contains filtered or unexported fields
}

type Color

本质是字符串, 没有做处理, 同样主要起标记作用:

1
type Color string

type AdaptiveColor

其根据终端背景颜色的明暗程度, 在运行时动态选择合适的颜色:

1
2
3
4
type AdaptiveColor struct {
	Light string
	Dark  string
}

type Border

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
type Border struct {
	Top          string
	Bottom       string
	Left         string
	Right        string
	TopLeft      string
	TopRight     string
	BottomLeft   string
	BottomRight  string
	MiddleLeft   string
	MiddleRight  string
	Middle       string
	MiddleTop    string
	MiddleBottom string
}

type Renderer

空结构体, 用于标记类型:

1
2
3
type Renderer struct {
	// contains filtered or unexported fields
}

基本使用

导入 lipgloss 库

1
import 	"github.com/charmbracelet/lipgloss"

创建一个空的 Lipgloss Style

1
noStyle := lipgloss.NewStyle()

复制一个 Lipgloss Style

用 func (s Style) Copy() Style 函数:

1
2
3
4
var (
    noStyle   = lipgloss.NewStyle()
    copyStyle = noStyle.Copy()
)

用 style 来 format 一个 string

用 func (s Style) Render(strs ...string) string:

1
2
3
4
5
var (
	focusedStyle  = lipgloss.NewStyle().Foreground(lipgloss.Color("205"))

	focusedButton = focusedStyle.Copy().Render("[ Submit ]")
)

给字符串添加一个 box

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
package main

import (
	tea "github.com/charmbracelet/bubbletea"
	"github.com/charmbracelet/lipgloss"
	"log"
)

type model struct {
	text     string
	boxStyle lipgloss.Style
}

var boxStyle = lipgloss.NewStyle().
	BorderStyle(lipgloss.NormalBorder()).
	BorderForeground(lipgloss.Color("202"))

func initialModel() model {
	return model{
		text:     "Hello box",
		boxStyle: boxStyle,
	}
}

func main() {
	p := tea.NewProgram(initialModel())
	if _, err := p.Run(); err != nil {
		log.Fatal(err)
	}
}

func (m model) Init() tea.Cmd {
	return nil
}

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := msg.(type) {
	case tea.KeyMsg:
		switch msg.String() {
		case "ctrl+c":
			return m, tea.Quit
		}
	}
	return m, nil
}

func (m model) View() string {
	return m.boxStyle.Render(m.text)
}

添加 Padding

用 func (s Style) Padding(i ...int) Style 等函数.

将两块横向/纵向拼接

横向拼接

用 func JoinHorizontal(pos Position, strs ...string) string

如:

1
2
3
4
5
6
7
8
blockB := "...\n...\n..."
blockA := "...\n...\n...\n...\n..."

// Join 20% from the top
str := lipgloss.JoinHorizontal(0.2, blockA, blockB)

// Join on the top edge
str := lipgloss.JoinHorizontal(lipgloss.Top, blockA, blockB)

纵向拼接

用 func JoinVertical(pos Position, strs ...string) string

如:

1
2
3
4
5
6
7
8
blockB := "...\n...\n..."
blockA := "...\n...\n...\n...\n..."

// Join 20% from the top
str := lipgloss.JoinVertical(0.2, blockA, blockB)

// Join on the right edge
str := lipgloss.JoinVertical(lipgloss.Right, blockA, blockB)

示例代码

1
2
3
4
5
6
7
8
9
10
11
import "github.com/charmbracelet/lipgloss"

var style = lipgloss.NewStyle().
    Bold(true).
    Foreground(lipgloss.Color("#FAFAFA")).
    Background(lipgloss.Color("#7D56F4")).
    PaddingTop(2).
    PaddingLeft(4).
    Width(22)

fmt.Println(style.Render("Hello, kitty"))

输出如:

其设置样式的方式和 CSS 类似.

可以用 #0000FF 的格式设置颜色.

行内可用的样式

如设置粗体斜体等:

1
2
3
4
5
6
7
8
var style = lipgloss.NewStyle().
    Bold(true).
    Italic(true).
    Faint(true).
    Blink(true).
    Strikethrough(true).
    Underline(true).
    Reverse(true)

块级可用的样式

如设置 padding 和 margin.

1
2
3
4
5
6
7
8
9
10
11
12
13
// Padding
var style = lipgloss.NewStyle().
    PaddingTop(2).
    PaddingRight(4).
    PaddingBottom(2).
    PaddingLeft(4)

// Margins
var style = lipgloss.NewStyle().
    MarginTop(2).
    MarginRight(4).
    MarginBottom(2).
    MarginLeft(4)

同样可以像 CSS 一样用复合属性:

1
2
3
4
5
6
7
8
9
10
11
12
// 2 cells on all sides
lipgloss.NewStyle().Padding(2)

// 2 cells on the top and bottom, 4 cells on the left and right
lipgloss.NewStyle().Margin(2, 4)

// 1 cell on the top, 4 cells on the sides, 2 cells on the bottom
lipgloss.NewStyle().Padding(1, 4, 2)

// Clockwise, starting from the top: 2 cells on the top, 4 on the right, 3 on
// the bottom, and 1 on the left
lipgloss.NewStyle().Margin(2, 4, 3, 1)

设置文本对齐

1
2
3
4
5
var style = lipgloss.NewStyle().
    Width(24).
    Align(lipgloss.Left).  // align it left
    Align(lipgloss.Right). // no wait, align it right
    Align(lipgloss.Center) // just kidding, align it in the center

设置文本宽高

1
2
3
4
5
var style = lipgloss.NewStyle().
    SetString("What’s for lunch?").
    Width(24).
    Height(32).
    Foreground(lipgloss.Color("63"))

设置边框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Add a purple, rectangular border
var style = lipgloss.NewStyle().
    BorderStyle(lipgloss.NormalBorder()).
    BorderForeground(lipgloss.Color("63"))

// Set a rounded, yellow-on-purple border to the top and left
var anotherStyle = lipgloss.NewStyle().
    BorderStyle(lipgloss.RoundedBorder()).
    BorderForeground(lipgloss.Color("228")).
    BorderBackground(lipgloss.Color("63")).
    BorderTop(true).
    BorderLeft(true)

// Make your own border
var myCuteBorder = lipgloss.Border{
    Top:         "._.:*:",
    Bottom:      "._.:*:",
    Left:        "|*",
    Right:       "|*",
    TopLeft:     "*",
    TopRight:    "*",
    BottomLeft:  "*",
    BottomRight: "*",
}

复合形式:

1
2
3
4
5
6
7
8
// Add a thick border to the top and bottom
lipgloss.NewStyle().
    Border(lipgloss.ThickBorder(), true, false)

// Add a thick border to the right and bottom sides. Rules are set clockwise
// from top.
lipgloss.NewStyle().
    Border(lipgloss.DoubleBorder(), true, false, false, true)

其他类型的 border 可参考 这个文档

复制一个样式

用 Copy(), 如:

1
2
3
var style = lipgloss.NewStyle().Foreground(lipgloss.Color("219"))

var wildStyle = style.Copy().Blink(true)

继承一个样式

1
2
3
4
5
6
7
8
9
var styleA = lipgloss.NewStyle().
    Foreground(lipgloss.Color("229")).
    Background(lipgloss.Color("63"))

// Only the background color will be inherited here, because the foreground
// color will have been already set:
var styleB = lipgloss.NewStyle().
    Foreground(lipgloss.Color("201")).
    Inherit(styleA)

取消一个样式

在 rules 之前添加 Unset, 如:

1
2
3
4
5
var style = lipgloss.NewStyle().
    Bold(true).                        // make it bold
    UnsetBold().                       // jk don't make it bold
    Background(lipgloss.Color("227")). // yellow background
    UnsetBackground()                  // never mind

强制生效的一些样式

Inline, MaxWidth, 和 MaxHeight:

1
2
3
4
5
6
7
8
// Force rendering onto a single line, ignoring margins, padding, and borders.
someStyle.Inline(true).Render("yadda yadda")

// Also limit rendering to five cells
someStyle.Inline(true).MaxWidth(5).Render("yadda yadda")

// Limit rendering to a 5x5 cell block
someStyle.MaxWidth(5).MaxHeight(5).Render("yadda yadda")

控制 Tab 的渲染

1
2
3
4
style := lipgloss.NewStyle() // tabs will render as 4 spaces, the default
style = style.TabWidth(2)    // render tabs as 2 spaces
style = style.TabWidth(0)    // remove tabs entirely
style = style.TabWidth(lipgloss.NoTabConversion) // leave tabs intact

启用渲染

用 lipgloss.Style 调用 Render(string):

1
2
3
style := lipgloss.NewStyle().Bold(true).SetString("Hello,")
fmt.Println(style.Render("kitty.")) // Hello, kitty.
fmt.Println(style.Render("puppy.")) // Hello, puppy.

也可不调用 Render() 直接使用:

1
2
var style = lipgloss.NewStyle().SetString("你好，猫咪。").Bold(true)
fmt.Println(style) // 你好，猫咪。

将文本水平或纵向排列

1
2
3
4
5
6
7
8
9
// Horizontally join three paragraphs along their bottom edges
lipgloss.JoinHorizontal(lipgloss.Bottom, paragraphA, paragraphB, paragraphC)

// Vertically join two paragraphs along their center axes
lipgloss.JoinVertical(lipgloss.Center, paragraphA, paragraphB)

// Horizontally join three paragraphs, with the shorter ones aligning 20%
// from the top of the tallest
lipgloss.JoinHorizontal(0.2, paragraphA, paragraphB, paragraphC)

得到 block 的宽高

1
2
3
4
5
6
7
8
9
10
11
12
// Render a block of text.
var style = lipgloss.NewStyle().
    Width(40).
    Padding(2)
var block string = style.Render(someLongString)

// Get the actual, physical dimensions of the text block.
width := lipgloss.Width(block)
height := lipgloss.Height(block)

// Here's a shorthand function.
w, h := lipgloss.Size(block)

指定位置放置字符串

用 Place 系列函数.

type Position

大小为 0~1 之间的数字:

1
type Position float64

预定义有:

1
2
3
4
5
6
7
const (
	Top    Position = 0.0
	Bottom Position = 1.0
	Center Position = 0.5
	Left   Position = 0.0
	Right  Position = 1.0
)

Place 将字符串放在指定宽高和位置的 Box 中

1
func Place(width, height int, hPos, vPos Position, str string, opts ...WhitespaceOption) string

PlaceHorizontal 将字符串放在指定宽度以及水平位置的 Box 中

1
func PlaceHorizontal(width int, pos Position, str string, opts ...WhitespaceOption) string

PlaceVertical 将字符串放在指定高度以及竖直位置的 Box 中

type WhitespaceOption

1
type WhitespaceOption func(* whitespace)

WithWhiteSpaceBackground 设置背景颜色填充

1
func WithWhiteSpaceBackground(c TerminalColor) WhitespaceOption

WithWhitespaceChars 设置字符填充

1
func WithWhitespaceChars(s string) WhitespaceOption

WithWhitespaceForeground 设置前景颜色填充

1
func WithWhitespaceForeground(c TerminalColor) WhitespaceOption
Go
go-lipgloss库使用
http://example.com/2023/10/06/go-lipgloss库使用/
作者
Jie
发布于
2023年10月6日
许可协议