Conversation
devmentor-pl
left a comment
devmentor-pl
left a comment
There was a problem hiding this comment.
Asiu,
Tak jak już pisałem całość prezentuje się bardzo dobrze 👍
Zostawiłem parę uwag w komentarzach i odniosłem się też do a :)
| import { Row, Col, Alert as RBAlert } from 'react-bootstrap'; | ||
|
|
||
| const Task01 = () => { | ||
| const themeSettings = { |
There was a problem hiding this comment.
Docelowo "theme" definiujemy w osobnym pliku i jest on przekazywany gdzieś na "górze" np. w App.js.
Na potrzeby zadań jest ok, ale w projekcie lepiej to zrobić tak jak piszę wyżej i zazwyczaj jest to jeden plik :)
PS. Wiem, że wygodniej jest trzymać całe deklaracje w motywie, ale lepiej tam trzymać tylko wartości tj. kolor, grubość obramowania itp. :)
| Button! | ||
| <ThemeProvider theme={themeSettings}> | ||
| <Button variant='primary' size='lg' >Button!</Button> | ||
| </ThemeProvider> |
| <Breadcrumb.Item href='#'>Home</Breadcrumb.Item> | ||
| <Breadcrumb.Item href="https://getbootstrap.com/docs/4.0/components/breadcrumb/">Library</Breadcrumb.Item> | ||
| <Breadcrumb.Item active>Data</Breadcrumb.Item> | ||
| </Breadcrumb> |
| <Button variant="primary">Go somewhere</Button> | ||
| </ThemeProvider> | ||
| </Card.Body> | ||
| </Card> |
|
|
||
| export default Object.assign(Breadcrumb, { | ||
| Item: BreadcrumbItem, | ||
| }) No newline at end of file |
|
|
||
| export { StyledButton } | ||
|
|
||
|
|
| Body: CardBody, | ||
| Title: CardTitle, | ||
| Text: CardText, | ||
| }) |
| margin-bottom: 1rem; | ||
| ` | ||
|
|
||
| export { StyledCard, StyledCardImg, StyledCardBody, StyledCardTitle, StyledCardText } No newline at end of file |
src/components/Tabs/Tab.js
Outdated
| import StyledTab from "./Tab.styled"; | ||
|
|
||
| const Tab = ({ onClick, title, name, active, children, disabled }) => { | ||
| return <StyledTab name={name} active={active} onClick={disabled ? () => { } : onClick} title={title} disabled={disabled}> |
There was a problem hiding this comment.
Jeśli masz zapis, w którym funkcja faktycznie nic nie robi to można napisać po prostu: onClick={disabled ? null : onClick}
Potwierdzam też, że a nie zalicza się do znaczników, które mają "disabled" - tu wprowadziłęm CIę w błąd, ale już z button będzie działać :P Wtedy wystarczy onClick={onClick}
src/components/Tabs/Tabs.js
Outdated
| import StyledTabs from "./Tabs.styled"; | ||
| import Tab from "./Tab"; | ||
|
|
||
| const tabsList = [ |
There was a problem hiding this comment.
Najlepiej wrzucić do osobnego pliku :)
2 participants
No description provided.