How to write a custom component with both lua function and highlighting group?

[linrongbin16]

Hi,

I want to create a custom component with lua function (since it's flexiable) to produce the text content, and render it with a highlighting group (for example 'Function').

how should I do it?

for now I configure it with:

local SCROLL_BAR = { "▁", "▂", "▃", "▄", "▅", "▆", "▇", "█" }

local function ScrollBar()
    local curr_line = vim.api.nvim_win_get_cursor(0)[1]
    local lines = vim.api.nvim_buf_line_count(0)
    local i = math.floor((curr_line - 1) / lines * #SCROLL_BAR) + 1
    return string.rep(SCROLL_BAR[i], 2)
end

require('lualine').setup({
  ...
  sections = {
    ...
    lualine_z = { 'progress', ScrollBar },
  }
})   

It looks like:

I want to render the text with some color, so I try to configure it with:

local SCROLL_BAR = { "▁", "▂", "▃", "▄", "▅", "▆", "▇", "█" }

local function ScrollBar()
    local curr_line = vim.api.nvim_win_get_cursor(0)[1]
    local lines = vim.api.nvim_buf_line_count(0)
    local i = math.floor((curr_line - 1) / lines * #SCROLL_BAR) + 1
    return "%#String#" .. string.rep(SCROLL_BAR[i], 2)  -- I add '%#String#' here
end

But it seems breaks the background color of lualine_z sections:

[linrongbin16]

I finally configure it with:

        lualine_z = {
            "progress",
            {
                ScrollBar,
                color = function()
                    local mode = vim.o.termguicolors and "gui" or "cterm"
                    local code = vim.fn.synIDattr(
                        vim.fn.synIDtrans(vim.fn.hlID("Special")),
                        "fg",
                        mode
                    )
                    return { fg = code, gui = "bold" }
                end,
            },
        }

And it's working now:

[maxigaz]

Thank you for the solution! I've been looking for a way to replace Lualine's native progress indicator with a bar icon, and also a way to change the colour of a component (not an entire section). You helped me achieve both. Cheers!