Localization
Halstack Design System provides the possibility to translate all the labels that cannot be changed by the component properties through the Halstack Provider and its property labels
.
You will need to create an object with your translations. In this object, you will have as many objects as components you want to translate, using the label from the list we show here below, following the structure of the example.
() => { const [items, changeItems] = useState(10); const itemsPerPageClick = (value) => { changeItems(value); }; const labels = { formFields: { optionalLabel: "(Opcional)", }, select: { actionClearSelectionTitle: "Eliminar selección", }, textInput: { clearFieldActionTitle: "Limpiar", }, paginator: { itemsPerPageText: "Número de elementos: ", pageOfText: (a, b) => `Página: ${a} de ${b}`, }, }; return ( <HalstackProvider labels={labels}> <DxcInset space="2rem"> <DxcSelect label="Label" helperText="Helper text" options={[ { label: "Option 01", value: "1" }, { label: "Option 02", value: "2" }, { label: "Option 03", value: "3" }, { label: "Option 04", value: "4" }, ]} placeholder="Choose an option" multiple optional /> </DxcInset> <DxcInset space="2rem"> <DxcTextInput label="Input text" defaultValue="Example text" clearable optional /> </DxcInset> <DxcInset space="2rem"> <DxcPaginator itemsPerPageOptions={[10, 15]} totalItems={27} itemsPerPage={items} itemsPerPageFunction={itemsPerPageClick} ></DxcPaginator> </DxcInset> </HalstackProvider> ); }
The following sections define the structure of the JSON object with the different components and their respective labels.
These labels are common to several components of the design system.
Label Name | Default value | Details |
---|---|---|
optionalLabel | (Optional) | |
requiredSelectionErrorMessage | This field is required. Please, choose an option. | |
requiredValueErrorMessage | This field is required. Please, enter a value. | |
formatRequestedErrorMessage | Please match the format requested. | |
lengthErrorMessage | Min length minLength , max length maxLength . | It is a function that receives two parameters (minlength and maxlength) and returns the text with those parameters. |
logoAlternativeText | Logo |
Label Name | Default value |
---|---|
fileSizeGreaterThanErrorMessage | File size must be greater than min size. |
fileSizeLessThanErrorMessage | File size must be less than max size. |
multipleButtonLabelDefault | Select files |
singleButtonLabelDefault | Select file |
dropAreaButtonLabelDefault | Select |
multipleDropAreaLabelDefault | or drop files |
singleDropAreaLabelDefault | or drop file |
deleteFileActionTitle | Remove file |
Label Name | Default value | Details |
---|---|---|
copyrightText | © DXC Technology year . All rights reserved. | It is a function that receives one parameter (year) and returns the text with that parameter. |
Label Name | Default value | Details |
---|---|---|
valueGreaterThanOrEqualToErrorMessage | Value must be greater than or equal to value . | It is a function that receives one parameter (value) and returns the text with that parameter. |
valueLessThanOrEqualToErrorMessage | Value must be less than or equal to value . | It is a function that receives one parameter (value) and returns the text with that parameter. |
decrementValueTitle | Decrement value | |
incrementValueTitle | Increment value |
Label Name | Default value | Details |
---|---|---|
itemsPerPageText | Items per page: | |
minToMaxOfText | minNumberOfItems to maxNumberOfItems of totalItems | It is a function that receives three parameters (minNumberOfItems, maxNumberOfItems and totalItems) and returns the text with those parameters. |
goToPageText | Go to page: | |
pageOfText | Page: pageNumber of totalPagesNumber | It is a function that receives two parameters (pageNumber and totalPagesNumber) and returns the text with those parameters. |
Label Name | Default value |
---|---|
contentTitle | Contents |