π Buttons Configuration β
Buttons helps to customize text, icon and links of every button in Vue Quotes
.
π Schema β
IMPORTANT
IconComponent
refers to a Phosphor Icon schema
ts
interface ButtonsSchema {
// β¬
οΈ Previous Button Props
previousText?: string | InternationalizationSchema[];
previousIcon?: IconComponent;
// β‘οΈ Next Button Props
nextText?: string | InternationalizationSchema[];
nextIcon?: IconComponent;
// π€ Export Button Props
exportText?: string | InternationalizationSchema[];
exportActiveText?: string | InternationalizationSchema[];
exportIcon?: IconComponent;
exportSuccessNotification?: string | InternationalizationSchema[];
exportFailedNotification?: string | InternationalizationSchema[];
// π Light Mode Button Props
lightModeTooltipText?: string | InternationalizationSchema[];
lightModeIcon?: IconComponent;
// π Dark Mode Button Props
darkModeTooltipText?: string | InternationalizationSchema[];
darkModeIcon?: IconComponent;
// π Social Button Props
socialEnabled: boolean;
socialText?: string | InternationalizationSchema[];
socialIcon?: IconComponent;
socialLink?: string;
// π Language Button Props
languageText?: string | InternationalizationSchema[];
languageIcon?: IconComponent;
// π Search Button Props
searchText?: string | InternationalizationSchema[];
searchIcon?: IconComponent;
}
π·οΈ Properties β
previousText β
- Type:
string | InternationalizationSchema[]
- Required:
false
- Description: Text for the previous button.
- Default:
Previous quote
previousIcon β
- Type:
IconComponent
- Required:
false
- Description: Icon for the previous button.
- Default:
PhCaretLeft
nextText β
- Type:
string | InternationalizationSchema[]
- Required:
false
- Description: Text for the next button.
- Default:
Next quote
nextIcon β
- Type:
IconComponent
- Required:
false
- Description: Icon for the next button.
- Default:
PhCaretRight
exportText β
- Type:
string | InternationalizationSchema[]
- Required:
false
- Description: Text for the export button.
- Default:
Export Image
exportActiveText β
- Type:
string | InternationalizationSchema[]
- Required:
false
- Description: Text displayed when the app is exporting a quote.
- Default:
Exporting...
exportIcon β
- Type:
IconComponent
- Required:
false
- Description: Icon for the export button.
- Default:
PhDownload
exportSuccessNotification β
- Type:
string | InternationalizationSchema[]
- Required:
false
- Description: Notification message for successful export.
- Default:
Successfully Exported Phrase
exportFailedNotification β
- Type:
string | InternationalizationSchema[]
- Required:
false
- Description: Notification message for failed export.
- Default:
Export Failed. Try later
lightModeTooltipText β
- Type:
string | InternationalizationSchema[]
- Required:
false
- Description: Tooltip text for the light mode button.
- Default:
Change to Dark Mode
lightModeIcon β
- Type:
IconComponent
- Required:
false
- Description: Icon for the light mode button.
- Default:
PhMoon
darkModeTooltipText β
- Type:
string | InternationalizationSchema[]
- Required:
false
- Description: Tooltip text for the dark mode button.
- Default:
Change to Light Mode
darkModeIcon β
- Type:
IconComponent
- Required:
false
- Description: Icon for the dark mode button.
- Default:
PhSun
socialEnabled β
- Type:
boolean
- Required:
true
- Description: Indicates if social button is rendered.
socialText β
- Type:
string | InternationalizationSchema[]
- Required:
false
- Description: Text for the social button.
- Default:
My Portfolio
socialIcon β
- Type:
IconComponent
- Required:
false
- Description: Icon for the social button.
- Default:
PhGithubLogo
socialLink β
- Type:
string
- Required:
false
- Description: URL link for the social button.
- Default:
https://eduardoprofe666.github.io
languageText β
- Type:
string | InternationalizationSchema[]
- Required:
false
- Description: Text for the language selection button.
- Default:
Select Language
languageIcon β
- Type:
IconComponent
- Required:
false
- Description: Icon for the language selection button.
- Default:
PhGlobe
searchText β
- Type:
string | InternationalizationSchema[]
- Required:
false
- Description: Text for the search button.
- Default:
Search Quotes
searchIcon β
- Type:
IconComponent
- Required:
false
- Description: Icon for the search button.
- Default:
PhMagnifyingGlass
β¨ Example β
ts
export const buttons: ButtonsSchema = {
socialEnabled: true,
exportActiveText: [
{languageId: 'en', message: 'Exporting...'},
{languageId: 'es', message: 'Exportando...'}
],
exportSuccessNotification: [
{languageId: 'en', message: 'Successfully Exported Phrase'},
{languageId: 'es', message: 'Frase exportada con Γ©xito'}
],
exportFailedNotification: [
{languageId: 'en', message: 'Export Failed. Try later'},
{languageId: 'es', message: 'ExportaciΓ³n fallida. Intente mΓ‘s tarde'}
],
lightModeTooltipText: [
{languageId: 'en', message: 'Change to Dark Mode'},
{languageId: 'es', message: 'Cambiar a Modo Oscuro'}
],
darkModeTooltipText: [
{languageId: 'en', message: 'Change to Light Mode'},
{languageId: 'es', message: 'Cambiar a Modo Claro'}
],
exportText: [
{languageId: 'en', message: 'Export Image'},
{languageId: 'es', message: 'Exportado a Imagen'},
],
nextText: [
{languageId: 'en', message: 'Next Quote'},
{languageId: 'es', message: 'Siguiente Frase'},
],
previousText: [
{languageId: 'en', message: 'Previous Quote'},
{languageId: 'es', message: 'Anterior Frase'},
],
languageText: [
{languageId: 'en', message: 'Select Language'},
{languageId: 'es', message: 'Seleccionar Lenguaje'},
],
searchText: [
{languageId: 'en', message: 'Search Quotes'},
{languageId: 'es', message: 'Buscar Frases'},
],
socialText: [
{languageId: 'en', message: 'My Portfolio'},
{languageId: 'es', message: 'Mi Portfolio'},
],
socialLink: 'https://eduardoprofe666.github.io'
};