mirror of
https://github.com/Lissy93/dashy.git
synced 2024-12-23 08:52:28 +03:00
�� Updates docs
This commit is contained in:
parent
3d342bb43d
commit
a06b73ded6
40
README.md
40
README.md
@ -60,24 +60,27 @@ All fields are optional, unless otherwise stated.
|
||||
**`pageInfo`**
|
||||
- `title` - String: The page title and heading
|
||||
- `description` - String: Short description visible under the heading
|
||||
- `navLinks` - Array: Links to display in the nav bar, an array or objects containing a title and link:
|
||||
- `title` - String: Text to display
|
||||
- `path` - String: URL or relative link
|
||||
|
||||
**`appConfig`** _(optional)_
|
||||
- `enableFontAwesome` - Boolean: Where `true` is enabled, if left blank font-awesome will be enabled only if required by 1 or more icons
|
||||
- `fontAwesomeKey` - String: If you have a font-awesome key, then you can use it here and make use of premium icons. It is a 10-digit alpha-numeric string from you're FA kit URL (e.g. `13014ae648`)
|
||||
- `theme`- String: The default theme for first load
|
||||
- `cssThemes` - String[]: An array of theme names which can be used in the theme switcher dropdown
|
||||
- `cssThemes` - String[]: An array of custom theme names which can be used in the theme switcher dropdown - _See **theming** below_
|
||||
- `externalStyleSheet` - String or String[] - Either a URL to an external stylesheet or an array or URLs, which can be applied as themes within the UI
|
||||
|
||||
**`sections`** - Section[]: (required) An array of sections - *See **`section`** below*
|
||||
**`sections`** - Section[]: (required) An array of sections - _See **`section`** below_
|
||||
|
||||
**`section`**
|
||||
- `name` - String: (required) The title of that section
|
||||
- `items` - Item[]: (required) An array of items - *See **`item`** below*
|
||||
- `items` - Item[]: (required) An array of items - _See **`item`** below_
|
||||
- `displayData`: An object with the following fields (all optional)
|
||||
- `collapsed` - Boolean: If true, the section will be collapsed (defaults to `false`)
|
||||
- `collapsed` - Boolean: If true, the section will be collapsed initially (defaults to `false`)
|
||||
- `rows` - Int: Number of rows the section should span vertically, e.g. 2 (defaults to `1`)
|
||||
- `cols` - Int: Number of columns the section should span horizontally, e.g. 2 (defaults to `1`)
|
||||
- `color` - String: A custom background color for the section, as a hex code or HTML color (e.g. `#fff`)
|
||||
- `color` - String: A custom accent color for the section, as a hex code or HTML color (e.g. `#fff`)
|
||||
- `customStyles` - String: Custom CSS properties that should be applied to that section, e.g. `border: 2px dashed #ff0000;`
|
||||
- `itemSize` - String: Specify the size for items within this group, either `small`, `medium` or `large`
|
||||
|
||||
@ -87,7 +90,8 @@ All fields are optional, unless otherwise stated.
|
||||
- `icon` - String: Icons can be either a local image, remote image, or a Font Awesome icon, *see below for more info*
|
||||
- `url` - String: The full path to be opened on click (e.g. `https://example.com`)
|
||||
- `target` - String: The method in which the item will be opened, either `newtab`, `sametab` or `iframe`
|
||||
- `color` - String: A custom background color the the item, as a hex code or HTML color (e.g. `#fff`)
|
||||
- `color` - String: A custom color the the item, as a hex code or HTML color (e.g. `#fff`)
|
||||
- `backgroundColor` - String: A custom fill color for the the item's background, also as a hex code
|
||||
|
||||
**`icon`** Examples:
|
||||
- To use use a remote image, just use it's full URL, e.g. `https://i.ibb.co/710B3Yc/space-invader-x256.png`
|
||||
@ -96,6 +100,30 @@ All fields are optional, unless otherwise stated.
|
||||
- To use a Font-Awesome icon, specify the category (`fas`, `fab`, `far`, `fal` or`fad`), followed by a space then `fa-` and the icon name. For example: `fas fa-rocket`, `fab fa-monero`, `fal fa-duck` or `fad fa-glass-whiskey-rocks`. Note that light (`fal`) and duotone (`fad`) icons are only available with Font Awesome Pro, to use this, you need to set you're kit ID under `appConfig.fontAwesomeKey`.
|
||||
|
||||
|
||||
### Theming
|
||||
|
||||
By default, there are 15 themes built-in, but you can add you're own themes with CSS. The easiest way to write a theme is by setting CSS variables, but you can also directly override elements by their selector. As an example, see the [built-in CSS themes](https://github.com/Lissy93/dashy/blob/master/src/styles/color-themes.scss).
|
||||
|
||||
For example, specify a theme
|
||||
```css
|
||||
html[data-theme='tiger'] {
|
||||
--primary: #f58233;
|
||||
--item-group-background: #0b1021;
|
||||
}
|
||||
```
|
||||
In order for the theme to show up in the theme switcher, it needs to be added to the config file, under `appConfig.cssThemes`, either as a string, or an array of strings for multiple themes. For example:
|
||||
|
||||
```yaml
|
||||
appConfig:
|
||||
cssThemes: ['tiger', 'another-theme']
|
||||
```
|
||||
|
||||
You can also load an external stylesheet. Pass either a URL to a .css file, or an array or URLs to `appConfig.externalStyleSheet`. The stylesheet will then be pre-loaded, and can then be enabled from the UI using the theme switcher.
|
||||
|
||||
```yaml
|
||||
appConfig:
|
||||
externalStyleSheet: 'https://example.com/my-stylesheet.css'
|
||||
```
|
||||
---
|
||||
|
||||
## License 📜
|
||||
|
Loading…
Reference in New Issue
Block a user