133 lines
5.3 KiB
Markdown
133 lines
5.3 KiB
Markdown
# awesome-buttons
|
|
|
|
Button widget library for Awesome Window Manager
|
|
|
|
<p align="center">
|
|
<img src="https://github.com/streetturtle/awesome-buttons/raw/master/screenshot.gif" alt="logo" style="max-width:100%;">
|
|
</p>
|
|
|
|
<p align="center">
|
|
<img src="https://img.shields.io/github/stars/streetturtle/awesome-buttons.svg">
|
|
<img src="https://img.shields.io/github/forks/streetturtle/awesome-buttons.svg">
|
|
<img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/streetturtle/awesome-buttons/luacheck">
|
|
</p>
|
|
|
|
# Customizations
|
|
|
|
## Text button
|
|
|
|
| Name | Default | Description |
|
|
|---|---|---|
|
|
| `type` | `basic` | Button type, could be 'outline', 'flat' or 'basic' |
|
|
| `text` | `''` | Button text |
|
|
| `color` | `#D8DEE9` | Button color |
|
|
| `text_size` | `10` | Size of the text |
|
|
| `onclick` | `function() end` | Function which is called when button is clicked |
|
|
|
|
|
|
## Icon button
|
|
|
|
| Name | Default | Description |
|
|
|---|---|---|
|
|
| `type` | `basic` | Button type, could be 'outline', 'flat' or 'basic' |
|
|
| `color` | `#D8DEE9` | Button color |
|
|
| `icon` | `help-circle` | Icon name from feathericons, or path to the icon, read below for more details |
|
|
| `icon_size` | `20` | Size of the icon |
|
|
| `icon_margin` | `4` | Margins around the icon |
|
|
| `shape` | `circle` | Shape of the button, could be 'circle', 'rounded_rect' or 'rectangle' |
|
|
| `onclick` | `function() end` | Function which is called when button is clicked |
|
|
|
|
## Icon with text button
|
|
|
|
| Name | Default | Description |
|
|
|---|---|---|
|
|
| `type` | `basic` | Button type, could be 'outline', 'flat' or 'basic' |
|
|
| `icon` | `help-circle` | Icon name from feathericons, or path to the icon, read below for more details |
|
|
| `text` | `''` | Button text |
|
|
| `text_size` | `10` | Size of the text |
|
|
| `onclick` | `function() end` | Function which is called when button is clicked |
|
|
|
|
Buttons come with preinstalled icons (taken from https://feathericons.com/). So you can either specify the name of the icon to use (to check available icons check the https://feathericons.com/ or under the icons folder):
|
|
|
|
```lua
|
|
awesomebuttons.with_icon{ icon = 'moon', color = '#f88' }
|
|
```
|
|
|
|
or provide a path to the icon:
|
|
|
|
```lua
|
|
awesomebuttons.with_icon{ icon = '/home/something/something.svg', color = '#f88' }
|
|
```
|
|
|
|
# Demo
|
|
|
|
To check buttons in action, simply add the section below to your rc.lua. It will create a wibox with buttons (same as in screenshot.)
|
|
|
|
```lua
|
|
|
|
local awesomebuttons = require("awesome-buttons.awesome-buttons")
|
|
|
|
local buttons_example = wibox {
|
|
visible = true,
|
|
bg = '#2E3440',
|
|
max_widget_size = 500,
|
|
ontop = true,
|
|
height = 200,
|
|
width = 500,
|
|
shape = function(cr, width, height)
|
|
gears.shape.rounded_rect(cr, width, height, 3)
|
|
end
|
|
}
|
|
|
|
buttons_example:setup {
|
|
{
|
|
{
|
|
{
|
|
markup = '<span size="20000" color="white">Awesome Buttons Demo</span>',
|
|
align = 'center',
|
|
widget = wibox.widget.textbox
|
|
},
|
|
{
|
|
wibox.widget.textbox('Only text:'),
|
|
awesomebuttons.with_text{ text = 'Hello', color = '#ff8' },
|
|
awesomebuttons.with_text{ type = 'outline', text = 'Bonjour', color = '#8ff', text_size = 8 },
|
|
awesomebuttons.with_text{ type = 'flat', text = 'Ola', color = '#f8f', text_size = 12 },
|
|
spacing = 8,
|
|
layout = wibox.layout.fixed.horizontal
|
|
},
|
|
{
|
|
wibox.widget.textbox('Only icon:'),
|
|
awesomebuttons.with_icon{ icon = 'moon', color = '#f88' },
|
|
awesomebuttons.with_icon{ icon = 'meh', color = '#a38', shape = 'circle' },
|
|
awesomebuttons.with_icon{ icon = 'map', color = '#f8c', shape = 'rounded_rect' },
|
|
awesomebuttons.with_icon{ type = 'outline', icon = 'sun', color = '#218' },
|
|
awesomebuttons.with_icon{ type = 'outline', icon = 'shield', color = '#188', shape = 'circle' },
|
|
awesomebuttons.with_icon{ type = 'outline', icon = 'zoom-in', color = '#f8f', shape = 'rounded_rect' },
|
|
awesomebuttons.with_icon{ type = 'flat', icon = 'truck', color = '#fc8' },
|
|
awesomebuttons.with_icon{ type = 'flat', icon = 'wifi', color = '#488', shape = 'circle' },
|
|
awesomebuttons.with_icon{ type = 'flat', icon = 'watch', color = '#788', shape = 'rounded_rect' },
|
|
spacing = 8,
|
|
layout = wibox.layout.fixed.horizontal
|
|
},
|
|
{
|
|
wibox.widget.textbox('Icon and text:'),
|
|
awesomebuttons.with_icon_and_text{ icon = 'check-circle', text = 'With Icon!', color = '#f48' },
|
|
awesomebuttons.with_icon_and_text{ type = 'outline', icon = 'battery-charging', text = 'Charging', color = '#8d1' },
|
|
awesomebuttons.with_icon_and_text{ type = 'flat', icon = 'star', text = 'Awesome!!!', color = '#EBCB8B' },
|
|
spacing = 8,
|
|
layout = wibox.layout.fixed.horizontal
|
|
},
|
|
spacing = 16,
|
|
layout = wibox.layout.fixed.vertical,
|
|
},
|
|
shape_border_width = 1,
|
|
valigh = 'center',
|
|
layout = wibox.container.place
|
|
},
|
|
margins = 16,
|
|
widget = wibox.container.margin
|
|
}
|
|
|
|
awful.placement.top(buttons_example, { margins = {top = 40}, parent = awful.screen.focused()})
|
|
```
|